Localization with Next.js

Technical Questions
1

Localizing your Next.js App

This walkthrough starts from the next-js-simple starter. Add the i18n config to your next.config.js file. We’ll use sub-path routing in this example.

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
	}
}

// With this configuration if you have a pages/blog.js it will 
// route to /blog, /fr/blog, and /de/blog

Now you should be able to access locale in the context of getStaticProps and pass it to options in your builder.get() call. This allows Builder’s API to automatically resolve the locale on custom components with localized inputs.

We also want to return the locale from getStaticProps so we can pass it to the locale prop of the <BuilderComponent/> in the page component. Similarly, this will allow the preview in the Visual Editor to auto resolve content client-side to the proper locale. Your [[...page]].tsx should look something like this:

// [[...page]].tsx

export async function getStaticProps({
  params,
  locale,
}: GetStaticPropsContext<{ page: string[] }>) {
  const page =
    (await builder
      .get('page', {
        userAttributes: {
          urlPath: '/' + (params?.page?.join('/') || ''),
        },
        options: { 
          locale 
        }
      })
      .toPromise()) || null

  return {
    props: {
      page,
      locale,
    },
    revalidate: 5,
  }
}

export async function getStaticPaths() {
  const pages = await builder.getAll('page', {
    options: { noTargeting: true },
    omit: 'data.blocks',
  })

  return {
    paths: pages.map((page) => `${page.data?.url}`),
    fallback: true,
  }
}

export default function Page({
  page,
  locale,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter()
  const isPreviewingInBuilder = useIsPreviewing()
  const show404 = !page && !isPreviewingInBuilder

  if (router.isFallback) {
    return <h1>Loading...</h1>
  }

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        {!page && <meta name="robots" content="noindex" />}
      </Head>
      {show404 ? (
        <DefaultErrorPage statusCode={404} />
      ) : (
        <BuilderComponent 
          model="page" 
          content={page} 
          locale={locale}
        />
      )}
    </>
  )
}

Localizing Custom Components

You can enable localized input fields in your custom components by setting localized: true. Localized inputs will resolve to the correct locale, returning a single value with a type of the input type. Try it out with string, richText, or file input types and more!

Here is an example of a Heading component with a localized text field:

// Heading.tsx

export const Heading = (props: { title: string; }) => {

  return(
    <div style={{'width': '50vw'}}>
      <h1>{props.title}</h1>
    </div>
  )
}

Builder.registerComponent(Heading, {
  name: "Heading",
  inputs: [
    {
      localized: true,
      name: "title",
      type: "text", 
      defaultValue: 'I am a heading!'
    },
  ],
});

Setting Up Locales in Builder

In your Account Settings select Custom Targeting Attributes and enter a new attribute called locale of type string and enum. Add values for each of your locales. For more information see here.

Custom Targeting Attributes
Custom Targeting Attributes783×524 25.4 KB

At this point you’re all set up for several localization methods including localized components, localized text blocks, and localizing multiple blocks. For more information on localizing whole pages see here.

Demo
Starter: builder/examples/next-js-localized at main · BuilderIO/builder · GitHub
Video Walkthrough: Loom | Free Screen & Video Recording Software | Loom

1 Like