For example when moving between /en/sign-in and /en/sign-up how to do it using the next link component and keep the user language params ?
#Persist lang in url between link ?
elder burrow
cedar gyroBOT
Hi @elder burrow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You can persist the language in the URL when navigating between pages in Next.js by using the locale prop provided by the next/link component. This prop allows you to specify the locale for the link. If no locale prop is provided, the currently active locale is used during client-transitions.
Here is an example of how you can use it:
import Link from 'next/link'
export default function IndexPage(props) {
return (
<Link href="/sign-up" locale="en">
Sign Up
</Link>
)
}
In this example, when the link is clicked, the user will be navigated to the /en/sign-up page.
If you want to dynamically set the locale based on user preference, you can store the user's language preference in a state or a context and use that value for the locale prop.
Additionally, Next.js allows setting a NEXT_LOCALE=the-locale cookie, which takes priority over the accept-language header. This cookie can be set using a language switcher and then when a user comes back to the site it will leverage the locale specified in the cookie when redirecting from / to the correct locale location.
For more information, you can refer to the Next.js documentation on Internationalization Routing (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#transition-between-locales) and Link component (https://nextjs.org/docs/pages/api-reference/components/link#locale).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
elder burrow
@cedar gyro but it's kinda annoying to pass the locale language through multiple levels of children for example. Is there any way to get the lang from the html element on the page ?
cedar gyroBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you can access the current locale information via the Next.js router. You can use the useRouter() hook to get the current locale. Here's an example:
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
const { locale } = router
return (
<div>
Current locale: {locale}
</div>
)
}
In this example, locale contains the currently active locale. You can use this value to dynamically set the locale prop in the next/link component.
However, if you want to get the lang attribute from the html element, you can use the standard JavaScript document.documentElement.lang in the browser. But remember, this won't work on the server side because document is not defined there.
For more information, you can refer to the Next.js documentation on Accessing the Locale Information (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#accessing-the-locale-information).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
elder burrow
@cedar gyro will this works on both server and client component ?
cedar gyroBOT
Let me check the knowledge base for you. One moment! :books:
The useRouter() hook from Next.js can be used in any React component, but it's important to note that it's not available during server-side rendering. It only provides values on the client side after a component is mounted.
If you try to use useRouter() in a server component, you'll get an error because server components are rendered on the server, where there's no concept of a router.
As for accessing the lang attribute from the html element using document.documentElement.lang, this will only work in client-side code. The document object is part of the Browser API and is not available in Node.js, which is the environment where server-side code runs.
So, to answer your question, these methods will not work in server components. They are meant to be used in client components or in functions that are only executed on the client side.
For more information, you can refer to the Next.js documentation on Accessing the Locale Information (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#accessing-the-locale-information) and Next.js documentation on Server and Client Composition Patterns (https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
elder burrow
@cedar gyro how would approach it to have a link component which can do both ?
cedar gyroBOT
Let me check the knowledge base for you. One moment! :books:
To create a link component that works both on the server and the client, you can use a combination of Next.js's Link component and the useRouter hook. The useRouter hook can be used to access the current locale on the client side, while the Link component can be used to create the link itself.
Here's an example of how you can create such a component:
import { useRouter } from 'next/router'
import Link from 'next/link'
export default function LocalizedLink({ to, children }) {
const router = useRouter()
const { locale } = router
return (
<Link href={to} locale={locale}>
{children}
</Link>
)
}
In this example, LocalizedLink is a component that accepts a to prop (the URL to navigate to) and children (the content of the link). It uses the useRouter hook to get the current locale and passes it to the Link component.
You can use this component like this:
<LocalizedLink to="/sign-up">Sign Up</LocalizedLink>
When this link is clicked, the user will be navigated to the /sign-up page with the current locale.
Please note that the useRouter hook is not available during server-side rendering, so the locale will be undefined on the server. However, this is not a problem because the Link component handles this gracefully: if no locale prop is provided, the currently active locale is used during client-side transitions.