# Localization with Next.js **URL:** \ **Category:** Technical Questions\ **Created:** [February 24, 2023, 7:33pm UTC](https://forum.builder.io/t/localization-with-next-js/3299 "2023-02-24T19:33:45Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\ **Post date:** [February 24, 2023, 7:33pm UTC](https://forum.builder.io/t/localization-with-next-js/3299/1 "2023-02-24T19:33:45Z")
**Localizing your Next.js App** This walkthrough starts from the [next-js-simple](https://github.com/BuilderIO/builder/tree/main/examples/next-js-simple) starter. Add the `i18n` config to your `next.config.js` file. We’ll use sub-path routing in this example. ```auto // 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 ``` > **[Advanced Features: Internationalized Routing | Next.js](https://nextjs.org/docs/advanced-features/i18n-routing)** > > Next.js has built-in support for internationalized routing and language detection. Learn more here. 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 `` 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: ```auto // [[...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) { const router = useRouter() const isPreviewingInBuilder = useIsPreviewing() const show404 = !page && !isPreviewingInBuilder if (router.isFallback) { return

Loading...

} return ( <> {!page && } {show404 ? ( ) : ( )} ) } ``` **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](https://www.builder.io/c/docs/custom-components-input-types) and more! Here is an example of a Heading component with a localized text field: ```auto // Heading.tsx export const Heading = (props: { title: string; }) => { return(

{props.title}

) } 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](https://www.builder.io/c/docs/add-remove-locales). ![Custom Targeting Attributes](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/454ec928807f9b010684921fac7ebb6658662efe.jpeg) At this point you’re all set up for several localization methods including localized components, [localized text blocks](https://www.builder.io/c/docs/localization-by-block), and [localizing multiple blocks](https://www.builder.io/c/docs/localization-grouped). For more information on localizing whole pages see [here](https://www.builder.io/c/docs/localization-whole-page). **Demo** Starter: [builder/examples/next-js-localized at main · BuilderIO/builder · GitHub](https://github.com/BuilderIO/builder/tree/main/examples/next-js-localized) Video Walkthrough: [Loom | Free Screen & Video Recording Software | Loom](https://www.loom.com/share/d3920742e46f41388f2b1a182f719c28) ---
**Author:** ![Simon](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@Simon](https://forum.builder.io/u/Simon)\ **Post date:** [April 12, 2023, 11:12pm UTC](https://forum.builder.io/t/localization-with-next-js/3299/2 "2023-04-12T23:12:26Z")
Hi @ancheetah, thanks for this walkthrough. Am I correct in saying that Builder only supports localisation if you’re prepared to drop $450/month? Or am I missing something? It seems like a pretty fundamental requirement for many scenarios where a business can’t justify that amount for their CMS. Thanks, Simon ---
**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\ **Post date:** [April 13, 2023, 8:26pm UTC](https://forum.builder.io/t/localization-with-next-js/3299/3 "2023-04-13T20:26:26Z")
Hi @Simon, thank you for your interest in our localization workflows, we appreciate your enthusiasm for this feature! You are correct that it is currently only available to our Growth level customers and above. We understand that this feature is fundamental for many customers across all of our subscription levels, and hope you can appreciate the level of development and support that such a feature rich functionality requires. Based on our feedback and discussions with customers, we have often found that the value provided by this feature, especially for our multi-locale customers, often exceeds the cost, but we appreciate your feedback! Rest assured that we are constantly working to improve our products and services, and we will certainly consider your feedback as we continue to develop and refine our offerings. ---
**Author:** ![Simon](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@Simon](https://forum.builder.io/u/Simon)\ **Post date:** [April 13, 2023, 9:00pm UTC](https://forum.builder.io/t/localization-with-next-js/3299/4 "2023-04-13T21:00:52Z")
Thanks, @ancheetah, for the response. I don’t want to hijack what is a technical post, is there somewhere else I can provide further feedback? Don’t even start me on environments!! ---
**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\ **Post date:** [April 14, 2023, 1:18pm UTC](https://forum.builder.io/t/localization-with-next-js/3299/5 "2023-04-14T13:18:27Z")
Hi @Simon feel free to post in our [general](https://forum.builder.io/c/general/6) channel or [feature requests](https://forum.builder.io/c/feature-requests/5) channel. For feature requests we also have an [ideas board](https://ideas.builder.io/) here where the community can upvote each others ideas. We appreciate any feedback you can provide! ---
**Author:** ![zbigniew.stepniewski](https://avatars.discourse-cdn.com/v4/letter/z/9de0a6/32.png) [@zbigniew.stepniewski](https://forum.builder.io/u/zbigniew.stepniewski)\ **Post date:** [January 17, 2024, 2:54pm UTC](https://forum.builder.io/t/localization-with-next-js/3299/6 "2024-01-17T14:54:50Z")
Why must I create a new targeting attribute called `locale` when the `Localization` attribute already exists there? This tutorial seems inconsistent with the introduction to Localization with Builder I found here: [Localization Intro - Builder.io](https://www.builder.io/c/docs/localization-intro). ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/fbb1b0a7053bf0d9f7038875ff98c95629f8f20b.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/dc08b98530022be3ab1f201a0f05d4951fb7074d.png) ---
**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\ **Post date:** [January 17, 2024, 3:53pm UTC](https://forum.builder.io/t/localization-with-next-js/3299/7 "2024-01-17T15:53:25Z")
Hi @zbigniew.stepniewski you are correct! The original post here is about a year old, and we are constantly updating our feature set and functionality. Localization is one of those features that we are constantly expanding and the doc you linked to and the images you posted are the latest version. As you called out, we have since negated the need to create a `locale` attribute and instead have moved localization to be its own standalone targeting section. The forum is a great resource for us to establish niche or experimental features, but in general once functionality is established and officially mapped out in our docs, that will usually be the source of truth for the best and most established paths. That being said, most of the other technical aspects of this post such as how to use and pass the locale prop in your code is still accurate. Hope this helps! ---
**Author:** ![zbigniew.stepniewski](https://avatars.discourse-cdn.com/v4/letter/z/9de0a6/32.png) [@zbigniew.stepniewski](https://forum.builder.io/u/zbigniew.stepniewski)\ **Post date:** [January 18, 2024, 8:47am UTC](https://forum.builder.io/t/localization-with-next-js/3299/8 "2024-01-18T08:47:03Z")
Thanks, now it’s clear. I was looking for how to combine the Builder Localization with NextJs. ---
**Author:** ![amanijaw96](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@amanijaw96](https://forum.builder.io/u/amanijaw96)\ **Post date:** [May 20, 2024, 9:51am UTC](https://forum.builder.io/t/localization-with-next-js/3299/9 "2024-05-20T09:51:10Z")
Hello, This solution limits the next export for deployment can i please know the work around this to be able to build and export the project