From version 10, Next.js has built-in support for internationalized routing. This feature allows you to support multilanguage versions of your application just by providing a list of locales.
Start with changing your Next.js configuration, which is inside next.config.js:
module.exports = {
i18n: {
/**
* Provide the locales you want to support in your application
*/
locales: ['en-US', "pl"],
/**
* This is the default locale you want to be used when visiting
* a non-locale prefixed path e.g. `/hello`
*/
defaultLocale: "pl"
},
}
Accessing the locale information
After configuring the supported locales, you can access the locale information with the Next.js built-in router. The router has the following properties inside:
-
locale
, which contains the currently active locale, -
locales
, which includes all configured locales, -
defaultLocale
, which provides for the configured default locale.
Router is accessible from the functional components by the useRouter
hook:
const { locale, locales, defaultLocale } = useRouter()
When doing SSR with getStaticProps
or SSG with getServerSideProps
, the locale information is provided in the function's context.
Transition between locales
You can use the built-in Link
component along with the useRouter
hook to transition between locales:
import Link from "next/link";
/**
* Inside your component
*/
const { asPath, locale } = useRouter();
return (
<>
<Link active={locale === "pl"} href={asPath} locale="pl">
PL
</Link>
<Link active={locale === "en-US"} href={asPath} locale="en-US">
ENG
</Link>
</>
);
Presenting multilanguage data
Now you can define an object in which we will store multi-language data for our components. After reading the current locale
value, we can get translated texts just by accessing the property on an object:
/**
* Define your multi-language data
*/
const data = {
pl: {
title: "CzeΕΔ!",
},
"en-US": {
title: "Hello!",
},
};
/**
* Inside your component
*/
const { locale } = useRouter();
const title = data[locale].title;
What about type safety?
When reading the value of locale
from the useRouter
hook, you may notice that your IDE identifies the type of the locale
as a string. Unfortunately, at this moment, Next.js does not provide typescript support for locales.
If you want to get full type safety, you may want to introduce your own custom hook for reading the value from of locale
After defining your own type for supported locales and reading the current locale's value from the router, let's return this value with a simple as
type assignment.
Thanks for reading! If you are interested in the latest tech news, you can follow my account since I plan to post here regularly. I also tweet on a regular basis so that you can follow My Twitter account as well!
Top comments (3)
Unfortunetly this doesnβt work if you export your app as SSG. Next export doesnβt support i18n :(
As far as I can tell, SSG pages don't support internationalized routing. But Next.js generates a different version for each locale. π
nextjs.org/docs/advanced-features/...
Property 'active' does not exist on Link