Internationalization with app router

Developing with Prismic
1

Have anyone tried multilingual site with nextjs 13.4 app router?

3

I personally haven't tried creating such project. If anyone in the community has given it a shot, I'd love to hear about their experience and maybe even see some examples!

It should be straightforward if you've used the pages route setup before since it's only the folder structure that changes, essentially.

In the meantime, you might want to check out the Next.js docs:

Also, check out our latest blog post with updates on the Next.js app router and Prismic integration.

4

I tried the nextjs internationalization tutorial .it does'nt work with app directory.
Its looks that prismic language configurations in prismicio.ts routes and next.config.js are not supported with the new next13.4 app router .
when I console.log locales in layout.js i get: {'en', "ServiceWorker.js"}.
Can you please update the internationalization documentation for the new app router
.

1 Like
5

Here's some insight from our DevX team:

Nested routes are similar to the Pages Router. You can still create directories like: blog/[uid] , the only difference being that you would create a [uid]/page.tsx file rather than a [uid].tsx file.

An multi-language setup is little different from the Pages Router and conceptually more aligned with how the rest of the App Router works.

Rather than defining locales in next.config.js and using the locale parameter in getStaticProps() , you simply treat the locale as another URL path. For example, you could support multi-lang using this route: [locale]/[uid]/page.tsx. You would then query and render the correct content using the' locale' parameter.

7

Hi Pau,

As I understand in this case you can't have pages like https://domain.com/[uid]. And you can only split the website to https://domain.com/en/[uid] and other locales. So you won't have root pages for English locale for example.

9

While the most common use case for localized URLs avoids having the master locale in the URL, it is possible to include it.