{
  "id": 2951123,
  "title": "6 Pitfalls of Building a Multilingual Site with Next.js 15: From Query Strings to URL Paths",
  "url": "https://urgent.news/2026/08/24/6-pitfalls-of-building-a-multilingual-site-with-next-js-15-from-query",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-24T05:31:39.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/utlkit/6-pitfalls-of-building-a-multilingual-site-with-nextjs-15-from-query-strings-to-url-paths-51fh"
  },
  "original_language": "en",
  "account": "Building a multilingual website with Next.js 15 can be challenging, with several pitfalls to be aware of. This story covers the author's experience of tackling these issues while creating a 150+ tool website on Cloudflare Pages.\n\nThe first pitfall, Pitfall 1: Nested Root Layout, occurs when switching languages on a page leads to a crash or blank screen. The root cause is that Next.js 15 App Router renders both app/layout.tsx and app/[locale]/layout.tsx, which can cause double HTML rendering and hydration issues. The solution is to return only children in the root layout file.\n\nPitfall 2: redirect() Doesn't Work with Static Export is another issue faced by the author. The problem arises when redirecting the root path / to /en/ or /zh-CN/ based on the user's browser language, but the redirect() function does not work in static export mode. The fix involves using client-side JavaScript to handle the redirection, with a noscript fallback to ensure compatibility with non-JS environments.\n\nFinally, Pitfall 3: Passing Locale to generateMetadata is a mistake that causes all tool page titles to appear in English, regardless of the visitor's language preference. The root cause is that generateMetadata() receives params as an async promise, which can lead to undefined or error values. To fix this, the author uses the new Next.js 15 way of passing params, which resolves the issue and ensures the correct locale-specific metadata is displayed.",
  "summary": "I built a 150+ tool website with Next.js 15 on Cloudflare Pages (utlkit.com). Half the traffic was from China, half from elsewhere. Time to add i18n. I thought it would take a day. It took four, and I rewrote the approach three times. Why is i18n Harder Than You Think? A 100+ page tool site needs more than translated text. You need to handle: Layer Problem Routing Does the URL change on language…",
  "key_points": [
    "redirect() function doesn't work with static export for language-based redirection",
    "Pitfall 3: Passing locale to generateMetadata results in all tool page titles appearing in English"
  ],
  "editors_take": "Developers building multilingual sites with Next.js 15 must navigate specific pitfalls to avoid issues with layout rendering, redirects, and metadata localization that can undermine the user experience.",
  "illustration": null,
  "coverage": {
    "outlets": 2,
    "also_reported_by": [
      {
        "outlet": "Dev.to",
        "title": "Building PickTool with Next.js and Laravel: Lessons from Creating a Software Discovery Platform",
        "url": "https://urgent.news/2026/08/24/building-picktool-with-next-js-and-laravel-lessons-from-creating-a",
        "published": "2026-08-24T00:01:27.000Z"
      }
    ]
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}