Websites with audiences in different countries may need to show content in users’ preferred languages. Robinson distinguishes routing between locales from translating page text, then uses a recreation of CERN’s World Wide Web anniversary page as his example.
Internationalization (i18n) with Next.js!
Lee Robinson (LeeRob, a developer advocate at Vercel) explains how to use Next.js 10 for internationalized routing and localized page text.
In `next.config.js`, the example defines English and French locales, with English as the default. Next.js supports subpath routing, such as `/fr`, and can also use subdomains. Both language versions can be statically generated, which enables fast transitions without a full page reload.
Next.js can use the browser’s `Accept-Language` header to redirect visitors to a matching locale; Robinson demonstrates this by setting French as his browser’s preferred language. For page text, his simple example keeps English and French strings in separate JavaScript objects and selects one using the current locale from `useRouter`.
A language selector calls the Next.js router with the selected locale, changing languages without a full page reload. Robinson also uses Next Image for responsive images and lazy loading. Server rendering and static generation remove the loading state and layout shift seen on the original page.
Takeaways
- Set supported locales and a default in Next.js configuration to enable internationalized routes.
- Keep translations separate from route handling; select localized strings using the current locale.
- Use the router for client-side locale changes to avoid full page reloads.
- Static generation can serve localized pages quickly, while Next Image can improve responsiveness and lazy-load images.
Mentioned in this talk
Search inside this talk
What was claimed 8
- feature
Next.js: Built-in internationalized routing supports locale configuration, subpath or subdomain routing, and browser-language redirects“With the built-in support for internationalized routing in Next.js 10, we can do just that.”
YouTube Unverified1 source· Talk
- usescern-next uses Tailwind CSS
“I went ahead and recreated this page using Next.js and Tailwind.”
YouTube Unverified1 source· Talk
- uses
“I went ahead and recreated this page using Next.js and Tailwind.”
YouTube Unverified1 source· Talk
- featureNext.js: Internationalized pages can be statically generated at build time
“The French variation as well as the English variation are both statically generated at build time”
YouTube Unverified1 source· Talk
- integrates withNext.js integrates with Accept-Language
“The reason this happens is due to the Accept-Language”
YouTube Unverified1 source· Talk
- featureNext.js: Can redirect visitors to a locale based on the Accept-Language header
“it's automatically redirected to the French locale.”
YouTube Unverified1 source· Talk
- featureNext.js: Router can change locales client-side without a full page reload
“prevent a full page reload”
YouTube Unverified1 source· Talk
- featureNext.js Image component: Supports lazy loading and helps fix nonresponsive image aspect ratios
“using Next Image allowed me to fix that weird, nonresponsive image”
YouTube Unverified1 source· Talk
