"How do I build a multilingual Sitecore JSS application with Next.js?"

That’s the question that haunted Alex, our fictitious Sitecore developer.

As he sipped his coffee, staring at the project backlog. The client, a global brand, needed their website in multiple languages, with seamless switching, SEO-friendly URLs, and localized content served efficiently.

"Challenge accepted!" Alex thought, opening his Sitecore instance and setting up his JSS Next.js app. In this blog, we’ll look at how Alex tackled the challenge of building a multilingual Sitecore JSS application with Next.js.

Step 1: Setting up the Sitecore JSS project

Before diving into multilingual setup, Alex had to ensure his JSS project was up and running.

Install JSS with Next.js

He configured the JSS App to work with Sitecore, setting up the connection:

At this point, Alex had a working Sitecore JSS Next.js app.

Step 2: Configuring multilingual support in Sitecore

Now, Alex needed to configure multiple languages in Sitecore. He navigated to /sitecore/system/Languages/ and added the required languages:

• en (English)
• fr-FR (French)
• es-ES (Spanish)

Then, he set up the content tree with localized versions under /sitecore/content/MyApp/Home with language versions for each item.

Important Configurations in sitecore/config/*.config

He added allowed languages in the Sitecore configuration:

Step 3: Configuring Next.js for multilingual routing

Alex turned to i18n settings in Next.js to handle multiple languages. In next.config.js, he added:

 

This ensured that the Next.js app understood which languages were supported and how to handle language switching in URLs (e.g., /fr-FR/about for French).

Step 4: Fetching language-specific content from Sitecore

To make sure JSS pulled the right language version, Alex modified sitecore/api.ts to fetch content dynamically based on the active language:

 

Now, when a user switched languages, the app would dynamically pull the correct localized content.

Step 5: Implementing language switcher component

To allow users to switch languages easily, Alex created a LanguageSwitcher component:

📁 components/LanguageSwitcher.js

 

This allowed the user to switch languages without losing the current page context.

Step 6: Handling server-side rendering for multilingual pages

Since Next.js supports both static and server-side rendering, Alex wanted to make sure the localized pages were built correctly.

📁 pages/[...slug].js

 

This setup ensured each page dynamically fetched content based on language.

Step 7: Testing the multilingual setup

After deploying everything, Alex tested the implementation:

• http://localhost:3000/en/about → English version

• http://localhost:3000/fr-FR/about → French version

• http://localhost:3000/es-ES/about → Spanish version

Success! The content changed dynamically based on language, and the URLs were SEO-friendly.

Step 8: Deploying to production

Finally, Alex pushed everything to Vercel for deployment:

And with one simple command, he deployed:

The final takeaway

Alex sat back and admired his work. His Sitecore JSS app with Next.js now had:

• Multilingual support
• SEO-friendly localized URLs
• Dynamic content fetching
• A seamless language switcher

"On to the next challenge!" he thought, as he grabbed another coffee. And that’s how you build a multilingual Sitecore JSS app with Next.js.

What’s Next?

If you’re looking to implement a multilingual Sitecore JSS app or optimize your existing setup, we’d love to help. Whether it’s configuring language routing, setting up dynamic content fetching, or fine-tuning performance, our team has the expertise to guide you.

Contact us for a personalized, no-obligation consultation and let’s fast-track your digital strategy to achieve your business goals