When serving visitors from all over the world, providing them with a version of your site that contains content in their preferred language is essential for an ideal user experience.
On Vercel, Next.js applications can take advantage of our built-in routing system that abstracts away the logic that you would normally have to implement yourself to direct users to different content based on the visitor's preferred language.
Setup
Once you've deployed your Next.js application to Vercel, setting up the internationalized routing is only a matter of adjusting your project's next.config.js
file to contain the necessary configuration properties.
Afterwards, all Production and Preview Deployments will automatically consider your internationalization configuration and start redirecting users to different versions of your page based on the visitor's detected locale.
Because you're using Next.js, even your Development Environment (next
or next dev
) will adapt accordingly, which lets you try out changes to localized content or a system for letting visitors switch the preferred language right on your own local device.
Automatic Edge Network Routing
On your local device, the next
or next dev
commands will simulate the entire internationalization routing system for you.
When deployed to Vercel, however, your Next.js application will take advantage of Vercel's globally distributed Edge Network for dynamically routing to the right Next.js page depending on the sub path or Domain.
Configuration
For a basic internationalization system, very little configuration (as described in the Setup section above) is required.
If you'd like to customize the behavior even further, however, please check out the detailed configuration specification in the Next.js documentation.