Next.js Discord

Discord Forum

Challenge with Domain-Based Localization in App Router

Unanswered
Filipino Venus posted this in #help-forum
Open in Discord
Filipino VenusOP
Hi next.js experts!
Hope you guys are doing well.

I’m currently working on migrating the page router to the app router in Next.js. Localization is one of the core features I’ve been trying to implement, but I’ve encountered an issue.
In the page router, I was able to implement domain-based localization with Next.js built-in support as follows:

module.exports = { i18n: { locales: ['en-US', 'fr', 'nl-NL'], defaultLocale: 'en-US', domains: [ { domain: 'example.com', defaultLocale: 'en-US', }, { domain: 'example.nl', defaultLocale: 'nl-NL', }, { domain: 'example.fr', defaultLocale: 'fr', http: true, }, ], }, }

However, I noticed that the getting locale has been removed in the app router, and I decided to try the next-i18n-router module to address this issue.
I'm sure that you guys checked these docs before:
https://nextjs.org/docs/pages/building-your-application/routing/internationalization
https://github.com/i18nexus/next-i18n-router

But here's the challenge:
I can't find the domain-based setting in the next-i18n-router module. From what I understand, the solutions available for the app router seem to focus on sub-path based localization, where all pages and layouts must be nested within a [locale] folder.

I’m wondering if anyone with experience in domain-based localization in the app router can shed some light on how to achieve this with the current setup?

Thanks in advance for your help!

7 Replies

Roseate Spoonbill
I don't know if there is ready solution for this, but my first idea for this would be a middleware, that attaches this info to request sent, so that it is present as internal header or something similar. At that point you can freely use it from headers helper.
It would have to be passed to client components in your page code as headers are not accessible from client side.
Filipino VenusOP
Hi @Roseate Spoonbill
Thanks for your response.
I already tried to use middleware but it's not a solution for my case. I'm using SSG(Static Site Generation) so all pages are generated at build time.
But middleware is not triggered at build time, you know.
Roseate Spoonbill
In such case I would probably go for subpath approach, which has rewrites configured:
https://nextjs.org/docs/app/api-reference/config/next-config-js/rewrites

Sth like this:
      {
        source: '/:path*',
        has: [
          {
            type: 'host',
            value: 'nl.example.com',
          },
        ],
        destination: '/nl/:path*',
      }
You could do more advanced rewrites also in middleware if needed
Just keep in mind that this approach might require multiple rules per domain, as static asset urls might be incorrect after rewrite.
Filipino VenusOP
Thanks @Roseate Spoonbill
Let me try with your suggestion