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.


Last Edited on October 26th 2020