How to implement Default Language without URL Prefix in Next.js 14 for Static Export?

Question

I am currently working on a website using Next.js 14, with the aim of exporting it as a static site for distribution via a CDN (Cloudflare Pages). My site requires internationalization (i18n) support for multiple languages. I have set up a folder structure for language support, which looks like this:

- [language]
  -- layout.tsx  // generateStaticParams with possible languages
  -- page.tsx
  -- ...

This setup allows me to access pages with language prefixes in the URL, such as /en/example and /de/example.

However, I want to implement a default language (e.g., English) that is accessible at the root path without a language prefix (/example). Importantly, I do not wish to redirect users to a URL with the language prefix for SEO purposes. Nor can I use the rewrite function because I'm using static export.

Here are my specific requirements:

1. Access the default language pages directly via the root path (e.g., /example for English).
2. Avoid redirects to language-prefixed URLs (e.g., not redirecting /example to /en/example).
3. Maintain the ability to access other languages with their respective prefixes (e.g., /de/example for German).

I am looking for guidance on:

How to realise this with Next.js 14 to serve the default language pages at the root path without a language prefix. Ensuring that this setup is compatible with the static export feature of Next.js.

Any insights, code snippets, or references to relevant documentation would be greatly appreciated.

Answer 1

If I understand your question, Nextjs is a file routing system every page.js/ts or route.js/ts files are standing for a page in the web app. So, if you going with the structure you provided in you question, you will need to structure your folders and files this way and to avoid duplicate in your code.

components
  - HomePage.ts // Shared component for languages
  - AboutPage.ts
App
 - layout.tsx
 - page.ts // for default language pages
 - about
   -- page.ts
 - contactus
   -- page.ts
 - [language]
   -- layout.tsx
   -- page.ts  // for other languages pages
   -- about
      --- page.ts
   -- contactus
      --- page.ts

The other approach you can follow is to manage the language by state managements like Redux or Zustand and translate/fetch the data the current language in the state, this way you do not need to create about pages files.

- layout.tsx
  - page.ts // for all language pages
- about
  -- page.ts
- contactus
  -- page.ts

additionally you can configure you next.config.js this way:

module.exports = {
  i18n: {
    locales: ['en', 'de'], // Add your default language and other languages
    defaultLocale: 'en', // Set the default language
  },
};

Answer 2

I have in one of my repo that shows default english lang on root just like www.example.com will serve english lang by default no need to add www.example.com/en to checkout eng lang page but for other pages the prefix will handle all the things, www.example.com/de will serve german lang page and so on. I have used react-i18n and next-i18n packages to acheive this functionality,

I hope this link will help you i18n in Next js v14