# Introduction
## Goal
Implement support for localized channels using Next.js internationalized routing in your frontend application.
## Background
Next.js has built-in support for [internationalized (i18n) routing](🔗). You can provide a list of locales, the default locale, and domain-specific locales and Next.js will automatically handle the routing.
This page shows how to implement Next.js i18n routing in your Bloomreach Content frontend application using the [Reference SPA](🔗) as an example.
## Prerequisites
You are familiar with the Bloomreach Content [development environment](🔗).
Your frontend application is (based on) the [Reference SPA](🔗).
The easiest way to get started is to create your channels using the [Reference SPA](🔗) [channel template](🔗) in the _Experience manager_ and clone the [Reference SPA frontend application from Github](🔗).
# Set Up Localized Channels in Bloomreach Content
Set up your channels in Bloomreach Content using a naming pattern that includes a channel's locale. For example, `<name>-<locale>
`:
`
mychannel-en
``
mychannel-fr
`
Your frontend application will rely on this naming pattern to match the selected locale to the correct channel and corresponding [Delivery API](🔗) endpoint.
# Configure Endpoint Environment Variables
In your frontend application's `.env
` file, add environment variables for each localized channel's [Delivery API](🔗) endpoint as in the following snippet (replace "mycontent" and "mychannel" with the relevant names):
If you don't have an `
.env
` file yet, you can create one by copying the provided `.env.dist
` file.
# Configure Locales
Add the `i18n
` configuration to your frontend application's `next.config.js
` file. Provide a list of `locales
` that matches the endpoints you configured, as well as the `defaultLocale
`:
The above configuration uses sub-path routing by default. You may also add domains configuration in order to use domain routing. See [Locale Strategies](🔗) in the Next.js i18n documentation for details.
# Update Your Frontend Code
In `src/utils.ts
`, find the `buildConfiguration
` function and adapt it so it accepts a `locale
` parameter and uses it to select the correct endpoint environment variable:
In `pages/[[...route]].tsx
`, adapt `Index.getInitialProps
` to use the `locale
` and pass it into the call to `buildConfiguration
`:
In `pages/_error.tsx
`, do the same for `Error.getInitialProps
`: