Website Internationalization with Next.js: The Ultimate Guide

In a globalized market, limiting your site to a single language is leaving money on the table. Creating a multilingual site allows you to reach new markets and customers.

Recently, I refactored this portfolio to support Portuguese, English, and Spanish. Here's how I did it.

1. Sub-path Routing

The best strategy for SEO is to have dedicated URLs for each language:

• mysite.com/pt
• mysite.com/en
• mysite.com/es

This allows Google to index each version independently.

2. Folder Structure in App Router

In Next.js 13+, we use Dynamic Folders ([lang]) to capture the language in the URL:

src/app/[lang]/
  layout.tsx
  page.tsx (Home)
  about/
    page.tsx

3. Translation Dictionaries

Instead of hardcoding text, we create JSON files for each language:

// en.json
{
  "welcome": "Welcome to my portfolio",
  "contact": "Contact Me"
}

And a utility function to load the correct dictionary based on the lang parameter from the URL.

4. Middleware for Redirection

We use a Middleware (now Proxy) to detect the user's browser language preference and automatically redirect them if they access the root /.

Conclusion

Internationalizing a Next.js project requires initial planning, but the result is a scalable architecture ready for the world.

Want to expand your business to the international market? Let's talk.