Next.js 13 App router domain i18n implementation
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
Does Next.js 13 still have i18n config in next.config.js?
I used to use locale from next/router object in the page router but I am wondering how I can do this in the app router.
I actually need only en-AU and en-NZ for using different databases, but don't need any localized content.
Should I use middleware for this?
Where can I get the locale in cilent components and server components in the app?
I used to use locale from next/router object in the page router but I am wondering how I can do this in the app router.
I actually need only en-AU and en-NZ for using different databases, but don't need any localized content.
Should I use middleware for this?
Where can I get the locale in cilent components and server components in the app?
Answered by joulev
Oh I see. In that case use path-based i18n as described in the guide I linked above, then use middleware to rewrite unlocaled paths to locales paths depending on the request domain
36 Replies
@Asian black bear Does Next.js 13 still have i18n config in next.config.js?
I used to use locale from next/router object in the page router but I am wondering how I can do this in the app router.
I actually need only en-AU and en-NZ for using different databases, but don't need any localized content.
Should I use middleware for this?
Where can I get the locale in cilent components and server components in the app?
Does the app router still have i18n in next.config.js?No. See https://nextjs.org/docs/app/building-your-application/routing/internationalization
Asian black bearOP
Can I use middleware for this purpose?
@joulev
@Asian black bear Can I use middleware for this purpose?
I don’t see how middleware is relevant here. You are not doing any subdomain i18n, middleware is not relevant
Just read the link above
I can’t explain it better than the documentation
@joulev I can’t explain it better than the documentation
Asian black bearOP
Thanks I already read this out though
app/[lang]/page.js
So actually we do not want to have [lang] directory
So actually we do not want to have [lang] directory
because we do not need localization
we just have 2 locales en-AU and en-NZ
@Asian black bear because we do not need localization
You don’t need localisation but you want i18n. But i18n and localisation are the same thing. I don’t understand then.
Asian black bearOP
we are using different api endpoints for these 2 different locales
Explain what you need in examples
Asian black bearOP
Let me explain
We are hosting our site on ............com.au and ..........co.nz 2 different domains
and we are using different endpoints for each domain
but we have only one project and we host this on section.io and it provides the 2 domains
so we used next.config.js i18n field to have locales depending on the domains
and we are fetching data from endpoints depending on the locale value which we get from
const {locale} = useRouter();Hopefully this makes sense @joulev
We want static site and we are using SSG in all cases, so we want to make sure 2 versions of pages are built at the build time
au site and nz site
and it hosts each version of site on each domain
@Asian black bear We are hosting our site on ............com.au and ..........co.nz 2 different domains
Oh I see. In that case use path-based i18n as described in the guide I linked above, then use middleware to rewrite unlocaled paths to locales paths depending on the request domain
Answer
This is similar to how a multi-tenant app would work
Asian black bearOP
Thanks for your help
@joulev This is similar to how a multi-tenant app would work
Asian black bearOP
May I ask one more?
So the page htmls are generated at build time?
or when data fetching, the data is fetched at build time and cached?
if the page html is generated at build time, then the data is fetched at build time and cached yes
that's called [static rendering](https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default)
(ping @Asian black bear)
Asian black bearOP
Thanks
Asian black bearOP
My question again @joulev
App router does not support domain based routing right?
App router does not support domain based routing right?
@Asian black bear My question again <@484037068239142956>
App router does not support domain based routing right?
Not that I know of, no. They just don’t implement i18n in app router, you have to implement it yourself using dynamic segments ([lang])
Asian black bearOP
Thanks again