i have all folder wrappred inside [lang]
in main page.js im getting lanfg like en-GB or en-US
but in router folders page.js im getting lang like object {lang:en-GB}
#internationlization
mint zodiac
vapid galeBOT
Hi @mint zodiac. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, when you're using internationalization with dynamic routing, the lang parameter is passed as a part of the params object. This is why you're seeing lang as an object {lang: 'en-GB'} in your router folders' page.js.
Here's an example of how you can access the lang parameter in your page component:
export default async function Page({ params: { lang } }) {
// You now have access to the current locale
// e.g. /en-US/products -> `lang` is "en-US"
return ...
}
In this example, lang is destructured from the params object, giving you direct access to the current locale as a string (e.g., "en-US").
If you're seeing lang as an object in your page components, it might be because you're not destructuring it correctly from the params object. Make sure you're using the correct syntax as shown in the example above.
For more information, you can refer to the Next.js documentation on internationalization (https://nextjs.org/docs/app/building-your-application/routing/internationalization).
Sources:
- Next.js Documentation: Internationalization - Routing Overview Part 2 (https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview)
- Github Issue: Internationalization and not-found page not render - Comments Part 3 (https://github.com/vercel/next.js/issues/55313)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
mint zodiac
@vapid gale How will i get in main page.js/
vapid galeBOT
Let me check the knowledge base for you. One moment! :books:
In your main page.js file, you can access the lang parameter in a similar way, by destructuring it from the params object in your component's props. Here's an example:
export default async function Page({ params: { lang } }) {
// You now have access to the current locale
// e.g. /en-US/products -> `lang` is "en-US"
return ...
}
In this example, lang is destructured from the params object, giving you direct access to the current locale as a string (e.g., "en-US").
If you're seeing lang as an object in your page components, it might be because you're not destructuring it correctly from the params object. Make sure you're using the correct syntax as shown in the example above.
For more information, you can refer to the Next.js documentation on internationalization (https://nextjs.org/docs/app/building-your-application/routing/internationalization).
Sources:
- Next.js Documentation: Internationalization - Routing Overview Part 2 (https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview)
- Github Issue: Internationalization and not-found page not render - Comments Part 3 (https://github.com/vercel/next.js/issues/55313)