Why the default locale does not appear on the home page

Developing with Prismic
,
1

Hello there,

I have 2 locales ar-eg and en-gb with ar-eg being the default locale
the ar-eg will show with other pages like /ar-eg/about for example but for the homepage it's just localhost:3000 how to append the default locale to the url so it becomes localhost:3000/ar-eg or what ever is the default locale is, i want the homepage to always show the default locale

prismic routes

const routes: prismic.ClientConfig['routes'] = [
  // Examples:
  {
    type: 'page',
    uid: 'home',
    path: '/:lang',
  },
  {
    type: 'page',
    path: '/:lang/:uid',
  },
];

middleware.ts

import { NextRequest, NextResponse } from 'next/server';
import { createClient } from '@/prismicio';

export async function middleware(request: NextRequest) {
  const client = createClient();
  const repository = await client.getRepository();

  const locales = repository.languages.map((lang) => lang.id);
  const defaultLocale = locales[0];

  // Check if there is any supported locale in the pathname
  const { pathname } = request.nextUrl;

  const pathnameIsMissingLocale = locales.every(
    (locale) =>
      !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`,
  );

  // Redirect to default locale if there is no supported locale prefix
  if (pathnameIsMissingLocale) {
    return NextResponse.rewrite(
      new URL(`/${defaultLocale}${pathname}`, request.url),
    );
  }
}

export const config = {
  // Don’t change the URL of Next.js assets starting with _next
  matcher: [
    '/((?!_next|api|slice-simulator|static|sw.js|swe-worker-development.js).*)',
  ],
};

page.tsx

import * as prismic from '@prismicio/client';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { SliceZone } from '@prismicio/react';
import { createClient } from '@/prismicio';
import { components } from '@/slices';
import { getLocales } from '@/lib/getLocales';
import { Wrapper } from '@/app/(components)/wrapper';

/* —————————————————————————————————————————————————————
  ( Metadata ) ——————————————————————————————————————— */
export async function generateMetadata({
  params: { lang },
}: {
  params: { lang: string };
}): Promise<Metadata> {
  const client = createClient();
  const home = await client
    .getByUID('page', 'home', { lang })
    .catch(() => notFound());

  return {
    title: home.data.meta_title,
    description: home.data.meta_description,
    openGraph: {
      images: [
        {
          url: home.data.meta_image.url || '',
        },
      ],
    },
  };
}

/* —————————————————————————————————————————————————————
  ( Home ) ——————————————————————————————————————— */
export default async function Index({
  params: { lang },
}: {
  params: { lang: string };
}) {
  const client = createClient();
  const home = await client
    .getByUID('page', 'home', { lang })
    .catch(() => notFound());
  const locales = await getLocales(home, client);

  return (
    <Wrapper theme='light' lang={lang} locales={locales}>
      <SliceZone slices={home.data.slices} components={components} />
    </Wrapper>
  );
}

/* —————————————————————————————————————————————————————
  ( Static Params ) ——————————————————————————————————————— */
export async function generateStaticParams() {
  const client = createClient();

  const pages = await client.getAllByType('page', {
    lang: '*',
    filters: [prismic.filter.at('my.page.uid', 'home')],
  });

  return pages.map((page) => {
    return {
      lang: page.lang,
    };
  });
}
3

Hey @nilenarrator,

Based on your description, it sounds like you actually don't really want a homepage :sweat_smile:

The homepage would generally be the page rendered by src/app/page.ts, but you actually want to redirect that page to src/app/[lang]/page.ts. It sounds like it should be as simple as creating a Next.js redirect from / to /ar-eg.

Let me know if that helps!

Sam

5

hahaha you're right that did the trick, i feel stupid now
thanks a lot really appreciate it

1 Like