Localization
Changing displayed content based on the user’s preferred locale, or localization, is not something specific to Next.js. The patterns described below would work the same with any web application.
Let’s assume we want to support both English and Dutch content inside our application. We might maintain two different “dictionaries”, which are objects that give us a mapping from some key to a localized string. For example:
dictionaries/en.json {
  "products": {
    "cart": "Add to Cart"
  }
}
dictionaries/nl.json {
  "products": {
    "cart": "Toevoegen aan Winkelwagen"
  }
}
We can then create a getDictionary function to load the translations for the requested locale:
app/[lang]/dictionaries.js import 'server-only'
 
const dictionaries = {