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:

Access the default language pages directly via the root path (e.g., /example for English).
Avoid redirects to language-prefixed URLs (e.g., not redirecting /example to /en/example).
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.

"I do not wish to redirect users to a URL with the language prefix for SEO purposes" - but do you want to redirect users from /en/example to /example then? For SEO purposes, you should not serve the same content twice. (Or if you really have to, use a canonical link) — Bergi
– Bergi, Commented Jan 15, 2024 at 19:24
Were you able to get this working as expected? I am having a similar requirement right now — nonybrighto
– nonybrighto, Commented Mar 24, 2024 at 12:52
Same problem here. Before I did it with page router, but with app router it's complicated — Alex
– Alex, Commented Jun 15, 2024 at 21:04

Khalif · Accepted Answer · 2024-01-27 11:27:53Z

3

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
  },
};

answered Jan 27, 2024 at 11:27

Khalif

463 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Islam Y- Over a year ago

can you make a full example on it? the nature of server and client components makes this over complicated

dodov · Accepted Answer · 2024-08-19 21:30:55Z

3

You obviously can't use middleware (because it's a static site and you need output: "export"), so you have to play around with the Next.js router and its folder structure. This means:

/app/[locale]/example/page.tsx for /de/example
/app/example/page.tsx for /example

In /app/[locale]/example/page.tsx you put your page as usual:

export default function Page({ params: { locale } }) {
  const t = getTranslations(locale || "en");
  return (
    <div>
      {t.content}
    </div>
  );
}

…and in /app/example/page.tsx you just import the page from the other file:

export { default as default } from "../[locale]/example/page";

I've made a post that explains this and more issues relating to static Next.js sites with output: "export". I've also made a repo where you can check a working setup of this.

edited Aug 19, 2024 at 21:30

answered Aug 19, 2024 at 21:14

dodov

6,0044 gold badges46 silver badges84 bronze badges

2 Comments

heqingbao Over a year ago

What if there are Dynamic Routes? For example, app/blog/[slug]/page.tsx

dodov Over a year ago

@heqingbao it's the same — you'd need to have /app/[locale]/blog/[slug]/page.tsx for the different locales, which is then "copied" (i.e. export { default as default } from '...') in /app/blog/[slug]/page.tsx for the main language. I haven't done that specifically, though. But I think it should work.

Bergi · Accepted Answer · 2024-07-01 13:44:45Z

2

I think that there is a more elegant way how to default to / instead of /en for default locale and it is included into the next-intl documentation already, although it is not easy to find it: https://next-intl-docs.vercel.app/docs/routing#locale-prefix

Don't use a locale prefix for the default locale

If you only want to include a locale prefix for non-default locales, you can configure your routing accordingly.
// config.ts
import {LocalePrefix} from 'next-intl/routing';
 
export const localePrefix = 'as-needed' satisfies LocalePrefix;
 
// ...
In this case, requests where the locale prefix matches the default locale will be redirected (e.g. /en/about to /about). This will affect both prefix-based as well as domain-based routing.

Note that:

If you use this strategy, you should make sure that your middleware matcher detects unprefixed pathnames.

If you use the Link component, the initial render will point to the prefixed version but will be patched immediately on the client once the component detects that the default locale has rendered. The prefixed version is still valid, but SEO tools might report a hint that the link points to a redirect.

Here is my middleware config for the languages i use

import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  // A list of all locales that are supported
  locales: ["en", "es", "es-419", "it", "pt", "tr"],

  // Used when no locale matches
  defaultLocale: "en",
  localePrefix: "as-needed",
});

export const config = {
  // Match only internationalized pathnames
  matcher: [
    // Match all pathnames except for
    // - … if they start with `/api`, `/_next` or `/_vercel`
    // - … the ones containing a dot (e.g. `favicon.ico`)
    "/((?!api|_next|_vercel|.*\\..*).*)",
  ],
};

edited Jul 1, 2024 at 13:44

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Jul 1, 2024 at 13:21

roundrobine

371 silver badge3 bronze badges

4 Comments

Lars Flieger Over a year ago

But does this work with export static?

roundrobine Over a year ago

it does not use rewrites give it a try. I have not tested it with static exports but if you do please share the outcome with us.

Eugene P. Over a year ago

You can't use the middleware with output: 'export', that's the whole point of the question, how to do it without the middleware.

Eugene P. Over a year ago

The sad truth is that you cannot do it properly, it's a limitation of Next.js, as it stated here: next-intl-docs.vercel.app/docs/routing/…. You can either duplicate your code, as suggested in another answer, or make your peace with the default prefix.

heqingbao · Accepted Answer · 2024-10-22 08:04:01Z

I just solved this problem. My static website is deployed on cloudflare pages. The core idea is:

Remove localePrefix: 'as-needed' and continue to use always
Configure redirection in cloudflare pages:

# public/_redirects
/blog/*        /en/blog/:splat    200
/about         /en/about          200
/              /en                200

(Optional) Configure redirection in nextjs for local debugging convenience

// next.config.mjs

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',

    async rewrites() {
        if (process.env.NODE_ENV === 'development') {
            return [
                {
                    source: '/',
                    destination: '/en',
                },
                {
                    source: '/about',
                    destination: '/en/about',
                },
                {
                    source: '/blog',
                    destination: '/en/blog',
                },
                {
                    source: '/blog/:path*',
                    destination: '/en/blog/:path*',
                },
                // add others here
            ];
        }
        return [];
    }
};

export default withNextIntl(nextConfig);

Hope it helps you

Saurabh Kumar · Accepted Answer · 2024-09-30 07:57:40Z

I have used a seprate wrapper for using Link conditionally here is my Link component

import { Link as I18Link } from "@/i18n/routing";
import { useLocale } from "next-intl";
import Link from "next/link";
import React, { HTMLAttributes } from "react";

interface MyLinkProps extends HTMLAttributes<HTMLAnchorElement> {
  href: string;
  children?: React.ReactNode;
}
const MyLink: React.FC<MyLinkProps> = ({ href, children, ...props }) => {
  const loca = useLocale();
  if (loca === "en") {
    return (
      <Link href={href} {...props}>
        {children}
      </Link>
    );
  } else {
    return (
      <I18Link href={href} {...props}>
        Link
      </I18Link>
    );
  }
};

export default MyLink;

and i also have a changeLanguage component in my header that also do this with useRouter

"use client";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { usePathname, useRouter as useRouterI18 } from "@/i18n/routing";

import { Locale } from "@/types/Types";
import { Globe } from "lucide-react";
import { Button } from "./ui/button";
import { useTranslations } from "next-intl";
import { useRouter as useRouterNext } from "next/navigation";

export const LangSelect = () => {
  const t = useTranslations();
  const routerNext = useRouterNext();
  const routerI18 = useRouterI18();
  const pathname = usePathname();
  const changeLanguage = ({ locale }: Locale) => {
    if (locale === "en") {
      console.log("Pathname:", pathname);
      routerNext.replace(pathname);
    } else {
      routerI18.replace(pathname, { locale });
    }
  };
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" aria-label={t("changeLanguage")}>
          <Globe className="h-5 w-5 text-green-600 dark:text-green-400" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => changeLanguage({ locale: "en" })}>
          English
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => changeLanguage({ locale: "hi" })}>
          हिन्दी (Hindi)
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

This works for static Rendering

by runnning npm run build the files are in diffent folder for the specified locale so i have extracted the default local i.e. en in the root directory

and localePrefix: "as-needed",

Here is how my folder look likes, "en" folder is empty

Joni Vainio-Kaila · Accepted Answer · 2024-12-26 20:56:43Z

0

Check out the next-globe-gen package. It supports output: "export" mode since it is not using any cookies or headers for adding i18n support for Next.js.

The basic idea of the package is to generate all locale routes so that there is no need for [locale] dynamic route segment at all.

It also has a configuration option prefixDefaultLocale: false which allows default locale content to be served from / and others from /[locale].

answered Dec 26, 2024 at 20:56

Joni Vainio-Kaila

12 bronze badges

Comments

Jack Tsin · Accepted Answer · 2025-02-27 04:33:56Z

For anyone looking for an efficient solution that can be used in large and complex apps and doesn't involve the use of middleware on every request, you can:

generateStaticParams as dynamic routes (statically generated) as explained here: use generateStaticParams() in layout.tsx NextJS 14 app directory to get dynamic rotes prerendered (PPR)
rewrite the paths dynamically if you want to get the default locale at "/" (instead of "en/" for example if your default locale is English):

    const nextConfig = {
      ...
      async rewrites() {
        return [
          // Handle all paths that don't start with a locale 
          // and point them to the default locale static param: (en)
          {
            source: '/:path((?!(?:de|fr|es|it|el|pl|nl|en)(?:/|$)).*)',
            destination: '/en/:path*',
          },
          {
            source: '/de/uber-uns',
            destination: '/de/about',
            locale: false // Use `locale: false` so that the prefix matches the desired locale correctly
           },
           {
             source: '/es/nosotros',
             destination: '/es/about',
             locale: false
            },
          ...
        ];
      },
    };

Olena Hrynykha · Accepted Answer · 2024-04-16 06:33:29Z

-2

Please modify the value of the localePrefix from "always" to "as-needed" in the middleware.ts or in navigation.ts if you use it

answered Apr 16, 2024 at 6:33

Olena Hrynykha

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Jorge Sotomayor · Accepted Answer · 2024-04-20 10:37:02Z

-3

I had this issue, I did not want to use the url to set/change the language (ex: /en, /fr, /es), and also be able to read the language on server side components.

What I did was use the cookies to set the language, so the logic is something like this:

If language cookie doesn't exist, use next internationalization strategy to get the language, and pass it to the page in the header response.

Then in pages you can add some logic to read cookies and header, and language should be something like:

const lang = languageCookie.value ?? headerCookie

So my middleware looks something like:

const getLocale = (request: NextRequest) => {
  const languageInCookie = request.cookies.get('language')

  if (languageInCookie) {
    console.log('---> Returning language from cookie', languageInCookie)
    return languageInCookie.value
  }
  
  const headers = { 'accept-language': 'en-US,en;q=0.5' }
  const languages = new Negotiator({ headers }).languages()
  const locales = ['en', 'es', 'pt']
  const defaultLocale = 'pt'
  
  return match(languages, locales, defaultLocale)
}

export function middleware(request: NextRequest) {
  const locale = getLocale(request)

  console.log('-----> Locale from middleware', locale)

  // Set header in middleware
  return NextResponse.next({ 
    headers: {
      'x-language': locale
    }
  })
}

Now, in the page, it's important to set the cookie with expiration time, this will allow the cookie to be kept even when the browser is closed.

I used a server action:

'use server'
 
import { cookies } from 'next/headers'
 
export async function setLanguage(lang: string) {
  cookies().set('language', lang, {
    // Set cookie for 1 year
    expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000),
  })
}

The cookie also can be changed in server components.

Now you can use a provider to allow use this language in client components, passing the server language within the main layout.

edited Apr 20, 2024 at 10:37

answered Apr 20, 2024 at 9:19

Jorge Sotomayor

11 bronze badge

2 Comments

Lars Flieger Over a year ago

The question is only to solve websites which are "exporting it as a static site". Your solution works with cookies and a server. So it is not an answer to this question.

Simon Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review

Collectives™ on Stack Overflow

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

9 Answers 9

1 Comment

2 Comments

Don't use a locale prefix for the default locale

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

2 Comments

Don't use a locale prefix for the default locale

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related