Next.js : setup multilingual website with localization

Technical Questions
1

Hi everyone,

I’m building a multilingual blog using Next.js (with the app directory) and Builder.io as my CMS. One challenge I’m facing is that Builder.io enforces a unique Page url field for each entry. This means I can’t create separate entries for each localized URL. Instead, I’m forced to use a custom slug parameter to uniquely identify a page.

Here’s what I’m trying to achieve:

  • Single BuilderIO Entry, Multiple Localized URLs:
    I want a single Builder.io entry to serve the same content for different languages. For instance, the same entry should work for both /en/blog/my-article and /fr/blog/mon-article. Since the Page url field must be unique, I’m using a custom slug parameter to identify the page.

  • Next.js Folder Structure:
    I’m planning to use the following folder structure in Next.js:

    app/
  [lang]/
    blog/
      [...page]/
        page.tsx

    This structure should allow URLs like /en/blog/my-article and /fr/blog/mon-article to be handled dynamically.

Below is a simple example of what my page.tsx file looks like:

// app/[lang]/blog/[...page]/page.tsx
import { builder, BuilderComponent } from '@builder.io/react';
import { notFound } from 'next/navigation';

export default async function Page({ params }: { params: { lang: string; page?: string[] } }) {
  const { lang, page } = params;
  // Use the last segment of the URL as the unique slug for the page
  const slug = page && page.length ? page[page.length - 1] : '';

  // Query Builder.io using the custom "slug" field,
  // passing the language parameter to fetch the correct localized content.
  const builderContent = await builder.get('blog', {
    query: { 'data.slug': slug },
    options: { locale: lang },
    userAttributes: { locale: lang },
  }).promise();

  if (!builderContent) {
    notFound();
  }

  return <BuilderComponent model="blog" content={builderContent} locale={lang} />;
}

My questions are:

  1. Builder.io Configuration:
    How do I set up Builder.io for localization in this scenario? Is there a recommended way to configure Builder.io (using built-in localization or custom targeting) so that it delivers the proper language variant while using a custom slug parameter?

  2. Next.js Routing:
    Is the [lang]/blog/[...page] folder structure the best approach for handling these localized URLs? Do I need to adjust the way I extract the slug or manage the locale parameter in my query?

I really tried several solutions. And as soon as I add localization, nothing works.

It would be cool to have an example or a video from you on the subject. The documentation isn’t detailed enough to find a solution…

2

Hey @aschapmann,

we have multiple Next.js pages that we wanted to localize too. Some of them also use Builder. If you are looking for an easy way to localize your content, may I suggest globalseo.ai it works well for us.