Assistance Needed with Implementing Localization in Next.js with Payload CMS 3.0

[brianFrizzera]

Hi, Friends!

I'm developing a web application using Payload CMS 3.0, incorporating the website template for a portion of the app. My goal is to implement localization by structuring my URLs to include locale codes, such as:

• https://domain.com/pt/posts/teste
• https://domain.com/en/home

While attempting to set up dynamic routing with [locale]/[slug], I've encountered issues where only the default locale works, and only for the home page (e.g., https://domain.com/pt or https://domain.com/pt/home). Although implementing localization solely in Next.js is straightforward, I'm unsure about the best practices for integrating localization within Payload CMS and have tried modifying the existing code accordingly.

Problem

I'm encountering routing conflicts when setting up [locale]/[slug] paths. Specifically:

• Default Locale Functionality: Only the default locale functions correctly, and only for the home page.
• Non-Default Locales: Routes with non-default locales do not render as expected and is a 404.

[HarleySalas]

If you'd like to share an example repo for how you're currently doing it, I'd be happy to take a look. This thing is something I've done for quite a few projects and next-intl is usually my preference.

I do run things a bit differently. In any case, I also have a public repo with an older version of Payload, when it was in beta. I haven't gotten the chance to update it yet, as it's just a hobby project. But, it may still be enough to get you going.
https://github.com/conqdb/conqdb/tree/main/apps/web I forgot, that one doesn't have completely dynamic pages, my bad!

[brianFrizzera]

Thank you very much! You helped me a lot.

I had to make some changes, almost all of them related to updating some parts of legacy code. The rest was just integrating it with Payload.

Thanks again, especially for offering to help me with the code in my repo.

Best regards!

[ZorbaBuda]

Hey! Same here. I started learning Payload 3.0.
For practice, I want to recreate in Payload 3 a website localized in two languages, that project uses next-intl .
As of now, I am practicing with just one language, but soon or later will need to be able to use two languages, and I am not
seeing too much info about how manage this.

[brianFrizzera]

@ZorbaBuda, This might also be useful for you:

#9435 (reply in thread)

[bhofstaetter]

I'm also trying to integrate next-intl into my payload project, but haven't managed to combine the next-intl middleware with mine yet. has anyone had a similar case and could help? I'm pretty new to nextjs and payload, probably there is a better approach to do this?

here's my custom middleware.ts

export const middleware = async (request: NextRequest) => {
    // ---------------------------------------------------------------------------------
    // header anreichern
    // ---------------------------------------------------------------------------------

    const requestHeaders = request.headers;
    const modifiedHeaders = new Headers(requestHeaders);

    const host = requestHeaders.get('host') ?? '';
    const protocol = requestHeaders.get('x-forwarded-proto') ?? 'https';

    const hostname = host.split(':')[0];
    const origin = `${protocol}://${host}`;

    const {pathname, searchParams} = request.nextUrl;
    const searchParamsString = searchParams.toString() ? `?${searchParams.toString()}` : '';

    const customHeaders = [
        {name: X_HEADER_DOMAIN, value: hostname},
        {name: X_HEADER_PATHNAME, value: pathname},
        {name: X_HEADER_BASE_URL, value: origin},
        {name: X_HEADER_SEARCH_PARAMS, value: searchParamsString},

        {name: X_HEADER_LOCALE, value: searchParams.get('locale')},
        {name: X_HEADER_DRAFT_MODE, value: searchParams.get('draftMode')},
        {name: X_HEADER_LIVE_PREVIEW, value: searchParams.get('livePreview')},
        {name: X_HEADER_REDIRECT_BACK, value: searchParams.get('redirectBack')},
    ];

    customHeaders.forEach((header) => {
        if (header.value) {
            modifiedHeaders.set(header.name, header.value);
        }
    });

    const newResponse = NextResponse.next({
        request: {
            headers: modifiedHeaders,
        },
    });

    // ---------------------------------------------------------------------------------
    // folgende routen sollen nicht weiter bearbeitet werden
    // ---------------------------------------------------------------------------------

    if (
        pathname.startsWith(ROUTE_API) ||
        pathname.startsWith(ROUTE_STATIC) ||
        pathname.startsWith(ROUTE_ADMIN) ||
        pathname.startsWith(ROUTE_NEXT) ||
        /\.(.*)$/.test(pathname) // dateien im "public" ordner
    ) {
        return newResponse;
    }

    // ---------------------------------------------------------------------------------
    // sicherstellen das nur die tenant hauptdomain verwendet wird
    // ---------------------------------------------------------------------------------

    try {
        const result = await typedFetch<GetPrimaryDomainResponse>(`${origin}${ROUTE_API}/tenants/primarydomain`, {
            headers: {
                [X_HEADER_DOMAIN]: hostname,
            },
        });

        const primaryDomain = result.json.primaryDomain;

        if (primaryDomain && primaryDomain !== hostname) {
            const primaryDomainUrl = new URL(origin);

            primaryDomainUrl.hostname = primaryDomain;

            return NextResponse.redirect(primaryDomainUrl.toString(), {
                status: 301,
            });
        }
    } catch (err) {
        console.warn('problem while primary domain redirect', err);
    }

    // ---------------------------------------------------------------------------------
    // dauerhaft geschützte routen absichern
    // ---------------------------------------------------------------------------------

    const loggedInUser = await getLoggedInUser();

    const protectedRoutes = ['/du-kommst-hier-nicht-rein'];

    if (!loggedInUser && protectedRoutes.includes(pathname)) {
        try {
            const redirectUrl = new URL(origin);
            const redirectSearchParams = new URLSearchParams({
                redirectBack: encodeURI(pathname + searchParamsString),
            });

            redirectUrl.pathname = ROUTE_LOGIN;
            redirectUrl.search = redirectSearchParams.toString();

            return NextResponse.redirect(redirectUrl.toString());
        } catch (err) {
            console.warn('problem while redirecting protected route to login', err);
        }
    }

    return newResponse;
};

[brianFrizzera]

My Middleware Approach

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';
 
export default createMiddleware(routing);

export const config = {
  matcher: [
    // Match all pathnames except for
    // - … if they start with `/api`, `/_next` or `/_vercel`
    // - … the ones containing a dot (e.g. `favicon.ico`)
    '/((?!api|_next|_vercel|admin|.*\\..*).*)',
  ]
}

As simple as that. The magic lies in creating a [locale] folder inside the frontend. All dynamic routes, such as [slug], posts, etc., must be placed inside [locale].

You also need to adjust how you fetch pages. Here's the approach I used:

import type { Metadata } from 'next'

import { PayloadRedirects } from '@/components/PayloadRedirects'
import configPromise from '@payload-config'
import { getPayload, TypedLocale } from 'payload'
import { draftMode } from 'next/headers'
import React, { cache } from 'react'

import type { Page as PageType } from '@/payload-types'

import { RenderBlocks } from '@/blocks/RenderBlocks'
import { RenderHero } from '@/heros/RenderHero'
import { generateMeta } from '@/utilities/generateMeta'
import PageClient from './page.client'

export async function generateStaticParams() {
  const payload = await getPayload({ config: configPromise })

  const locales: TypedLocale[] = ['pt', 'en']; // Define supported locales
  const pages = await payload.find({
    collection: 'pages',
    draft: false,
    limit: 1000,
    overrideAccess: false,
    select: {
      slug: true,
    },
  })

  const params = pages.docs?.flatMap(({ slug }) => {
    return locales.map((locale) => ({ slug, locale }));
  });

  return params;
}

type Args = {
  params: Promise<{
    slug: string;
    locale: TypedLocale;
  }>
}

export default async function Page({ params: paramsPromise }: Args) {
  const { slug = 'home', locale } = await paramsPromise
  const url = '/' + slug

  let page: PageType | null;

  page = await queryPageBySlug({
    slug,
    locale,
  });

  if (!page) {
    return <PayloadRedirects url={url} />
  }

  const { hero, layout } = page

  return (
    <article className="pt-16 pb-24">
      <PageClient />
      {/* Allows redirects for valid pages too */}
      <PayloadRedirects disableNotFound url={url} />

      <RenderHero {...hero} />
      <RenderBlocks blocks={layout} />
    </article>
  )
}

export async function generateMetadata({ params: paramsPromise }): Promise<Metadata> {
  const { slug = 'home', locale } = await paramsPromise
  const page = await queryPageBySlug({
    slug,
    locale,
  })

  return generateMeta({ doc: page })
}

const queryPageBySlug = cache(async ({ slug, locale }: { slug: string, locale: TypedLocale;}) => {
  const { isEnabled: draft } = await draftMode()

  const payload = await getPayload({ config: configPromise })

  const result = await payload.find({
    collection: 'pages',
    draft,
    limit: 1,
    overrideAccess: draft,
    locale: locale,
    where: {
      slug: {
        equals: slug,
      },
    },
  })

  return result.docs?.[0] || null
})

I’m assuming you’ve set up the localization part correctly. If you have any questions or need further assistance, feel free to reach out.

[bhofstaetter]

thanks for your answer, but unfortunately it doesn't address my problem. My problem is that I don't know how to combine my custom middleware with the next-intl middleware. any suggestions on that?

[bhofstaetter]

after looking over it again, it seems to work if i run the next-inlt part at the end of my middleware and edit the response headers as desired

    // ---------------------------------------------------------------------------------
    // internationalisierung
    // ---------------------------------------------------------------------------------

    const shouldHandleIntlRouting =
        pathname === '/' || new RegExp(`^/(${routing.locales.join('|')})(/.*)?$`).test(pathname);

    if (shouldHandleIntlRouting) {
        const intlMiddleware = createMiddleware(routing);
        const intlResponse = intlMiddleware(request);

        customHeaders.forEach((header) => {
            if (header.value) {
                intlResponse.headers.set(header.name, header.value);
            }
        });

        return intlResponse;
    }

    return newResponse;

[MarkWestside]

Hi,

Thanks to your code I got next-intl working. However I still have an issue with Live Preview. It uses the cookies’ NEXT_LOCALE for the preview which isn’t changed on the admin panels locale switcher (localizer). Do you have any best practices to get the correct locale for the preview?