Implement support for localized channels using Next.js internationalized routing in your frontend application.
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.
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, `
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 `
# 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 `
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
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:
pages/[[...route]].tsx`, adapt `
Index.getInitialProps` to use the `
locale` and pass it into the call to `
pages/_error.tsx`, do the same for `