How to handle Internatinalization on Root Page.js
Unanswered
Donskoy posted this in #help-forum
DonskoyOP
Hello, I have app router app > page.js where my landing page stays. now as SSG site. I also want to enable the internationalization. but in the documentation it mentioned that we need to create [lang] directory. but that leads to URL changes. and I don't want to change URL for default language which is en-US. I have shared code snippet of app > [lang] > page.js which is shared by next js documentation site. but it is not ideal for app > page.js .
export async function generateStaticParams() {
return [{ lang: 'en-US' }, { lang: 'de' }]
}
export default function Root({ children, params }) {
return (
<html lang={params.lang}>
<body>{children}</body>
</html>
)
}
basically i want, abc.com not abc.com/en
export async function generateStaticParams() {
return [{ lang: 'en-US' }, { lang: 'de' }]
}
export default function Root({ children, params }) {
return (
<html lang={params.lang}>
<body>{children}</body>
</html>
)
}
basically i want, abc.com not abc.com/en
20 Replies
Have you tried to change structure to app >[locale] >page.js? By using or the next-intl either without it, with custom middleware which can handle the requests with the locale and rewrite with locale.
DonskoyOP
no i didn't. can you share example or something
and the middleware code with using next-intl
const handleI18nRouting = createIntlMiddleware({
locales: ['en', 'ru', 'de'],
defaultLocale: 'en',
localePrefix: 'as-needed',
localeDetection: false,
alternateLinks: false,
});
export default async function middleware(request: NextRequest) {
const response = handleI18nRouting(request);
return response;
}
const handleI18nRouting = createIntlMiddleware({
locales: ['en', 'ru', 'de'],
defaultLocale: 'en',
localePrefix: 'as-needed',
localeDetection: false,
alternateLinks: false,
});
export default async function middleware(request: NextRequest) {
const response = handleI18nRouting(request);
return response;
}
DonskoyOP
understood. let me check this
DonskoyOP
Hello @HaykMkrtich , do you have any link for reference?
DonskoyOP
just to update you, i am working on SSG project, where in next.config file i have "output":"export"
i haven't tried with this configuration ("output":"export"), you will need to try it. I think it should work if you configure the intlMiddleware and the right way and also use the right structure app>[locale]> page.tsx/or what you want.
import createIntlMiddleware from 'next-intl/middleware';
// create intl middleware instance
const handleI18nRouting = createIntlMiddleware({
locales: ['en', 'ru', 'de'],
defaultLocale: 'en',
localePrefix: 'as-needed',
localeDetection: false,
alternateLinks: false,
});
export default async function middleware(request: NextRequest) {
//wrap request into middleware instance
const response = handleI18nRouting(request);
// by returning response the middleware will handle all requests with locale prefix and inside each page.tsx you'll get locale prop and depending on that you can render fetch and render localized versions of content.
return response;
// create intl middleware instance
const handleI18nRouting = createIntlMiddleware({
locales: ['en', 'ru', 'de'],
defaultLocale: 'en',
localePrefix: 'as-needed',
localeDetection: false,
alternateLinks: false,
});
export default async function middleware(request: NextRequest) {
//wrap request into middleware instance
const response = handleI18nRouting(request);
// by returning response the middleware will handle all requests with locale prefix and inside each page.tsx you'll get locale prop and depending on that you can render fetch and render localized versions of content.
return response;
as the reference you can check docs of next-intl
https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing
https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing
DonskoyOP
it is not working with output:export
⨯ Middleware cannot be used with "output: export". See more info here: https://nextjs.org/docs/advanced-features/static-html-export
static exports are limited to their use. Some features are unsupported. That's why you cant use your middleware
DonskoyOP
Yeah
exactly what i want is.
if lang is en then url should https://abc.com/
for pl(polish) lang- https://abc.com/pl
if lang is en then url should https://abc.com/
for pl(polish) lang- https://abc.com/pl
yea, then your middleware should handle the detection and redirection of this. However: you can't use the middleware with static export. So either find a new way on detecting and redirecting the client to the correct language (without the middleware) or run a server that handles the middleware (for example via vercel)
Why not using dynamic force-static with time based revalidation configured once year? this way your pages will be updated once a year so you. Of course if you will not change any common component in page that can regenerate pages with new code. What's the reason for exporting pages reducing data cache usage on vercel?. Anyway if you continue to work on this project and add or change components then each time your page will be regenerated.
@Donskoy solved?
DonskoyOP
no still not solved