Tips for maintaining i18n locale slugs and ensuring i18n consistency when reloading in Next.js

Question

Tips for maintaining i18n locale slugs and ensuring i18n consistency when reloading in Next.js

I'm currently utilizing next-translate. The default recognition of my routes is as follows:

/about         <---
/de/about
/es/about

However, I would like to set a specific locale for all paths:

/en/about      <---
/de/about
/es/about

Below is the configuration I am using:

next.config.js

const nextTranslate = require('next-translate');

module.exports = nextTranslate({
    ...
    i18n: {
        localeDetection: false,
        locales: ['en', 'de', 'es'],
        defaultLocale: 'en',
    }
});

i18n.js

module.exports = {
    locales: ['en', 'de', 'es'],
    defaultLocale: 'en',
    pages: {
        '*': ['common']
    },
    interpolation: {
        prefix: '${',
        suffix: '}',
    },
    loadLocaleFrom: (locale, namespace) =>
        import(`./translations/${locale}/${namespace}`).then((m) => m.default),
}

It's important to note that I have a language change component that stores the NEXT_LOCALE cookie. Despite this, when I visit /about with a previously set cookie value of de, the router does not redirect me to /de/about. Instead, it remains at /about and changes the cookie value to en...

The current structure of my pages folder is as follows:

...
pages/
  _app.tsx
  _document.tsx
  about.tsx
  ...

Should I reorganize it to look like this?

pages/
  _app.tsx
  _document.tsx
  [lang]/         <---
    about.tsx
    ...

If yes, what steps should I take next?

Extract the preferred locale using useRouter()
Retrieve the NEXT_LOCALE cookie value
Analyze the lang slug

and then decide on the priority? Where should these processes be implemented? In _app.tsx or in a Higher Order Component?

Are there any necessary rewrites or redirects in my next.config.js, or should I handle these dynamically through Router.push?

javascript internationalization next.js

Answer 1

Answer №1

When the persisted NEXT_LOCALE cookie doesn't automatically redirect based on its value, it's because you have specifically disabled it by setting localeDetection: false. This disables both header-based and cookie-based redirection.

To resolve this issue, simply remove the setting from your next.config.js.

There isn't a built-in method to enforce the default locale on all paths. However, there are some workarounds that can help in prefixing the default locale on the URL.

Workaround #1: Set default locale to `default`, and perform a redirect in middleware

As described in the i18n Routing documentation, create a dummy locale named default and set it as the default. This doesn't actually use the locale but allows us to always have the en locale prefixed on paths.

// next.config.js
module.exports = {
    i18n: {
        locales: ['default', 'en', 'de', 'es'],
        defaultLocale: 'default'
    }
}

Next, implement a middleware file to redirect to the /en prefix when a request is made to the default locale.

// middleware.js
import { NextResponse } from 'next/server'

const PUBLIC_FILE = /\.(.*)$/

export function middleware(request) {
    const shouldHandleLocale = !PUBLIC_FILE.test(request.nextUrl.pathname)
        && !request.nextUrl.pathname.includes('/api/') 
        && request.nextUrl.locale === 'default'

    if (shouldHandleLocale) {
        const url = request.nextUrl.clone()
        url.pathname = `/en${request.nextUrl.pathname}`
        return NextResponse.redirect(url)
    }

    return undefined
}

Workaround #2: Implement shallow routing with a prefixed path on the client-side

Alternatively, you can check for the default locale and explicitly set it in the URL on initial mount using router.push.

For example, consider using a custom hook like useDefaultLocale to streamline this logic for reuse.

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

export const useDefaultLocale = () => {
    const router = useRouter();

    useEffect(() => {
        if (router.locale === router.defaultLocale) {
            router.push(`/${router.locale}${router.asPath}`, undefined, {
                locale: false,
                shallow: true // Include this if data fetching methods shouldn't be rerun
            });
        }
    }, [router.asPath]);
};

This hook could then be applied in your pages or _app.js.

import { useDefaultLocale } from '<path-to>/use-default-locale';

const AboutPage = () => {
    useDefaultLocale()

    return <>About Page</>;
};

Answer 2

When the persisted NEXT_LOCALE cookie doesn't automatically redirect based on its value, it's because you have specifically disabled it by setting localeDetection: false. This disables both header-based and cookie-based redirection.

To resolve this issue, simply remove the setting from your next.config.js.

There isn't a built-in method to enforce the default locale on all paths. However, there are some workarounds that can help in prefixing the default locale on the URL.

Workaround #1: Set default locale to `default`, and perform a redirect in middleware

As described in the i18n Routing documentation, create a dummy locale named default and set it as the default. This doesn't actually use the locale but allows us to always have the en locale prefixed on paths.

// next.config.js
module.exports = {
    i18n: {
        locales: ['default', 'en', 'de', 'es'],
        defaultLocale: 'default'
    }
}

Next, implement a middleware file to redirect to the /en prefix when a request is made to the default locale.

// middleware.js
import { NextResponse } from 'next/server'

const PUBLIC_FILE = /\.(.*)$/

export function middleware(request) {
    const shouldHandleLocale = !PUBLIC_FILE.test(request.nextUrl.pathname)
        && !request.nextUrl.pathname.includes('/api/') 
        && request.nextUrl.locale === 'default'

    if (shouldHandleLocale) {
        const url = request.nextUrl.clone()
        url.pathname = `/en${request.nextUrl.pathname}`
        return NextResponse.redirect(url)
    }

    return undefined
}

Workaround #2: Implement shallow routing with a prefixed path on the client-side

Alternatively, you can check for the default locale and explicitly set it in the URL on initial mount using router.push.

For example, consider using a custom hook like useDefaultLocale to streamline this logic for reuse.

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

export const useDefaultLocale = () => {
    const router = useRouter();

    useEffect(() => {
        if (router.locale === router.defaultLocale) {
            router.push(`/${router.locale}${router.asPath}`, undefined, {
                locale: false,
                shallow: true // Include this if data fetching methods shouldn't be rerun
            });
        }
    }, [router.asPath]);
};

This hook could then be applied in your pages or _app.js.

import { useDefaultLocale } from '<path-to>/use-default-locale';

const AboutPage = () => {
    useDefaultLocale()

    return <>About Page</>;
};

Tips for maintaining i18n locale slugs and ensuring i18n consistency when reloading in Next.js

Answer №1

Workaround #1: Set default locale to `default`, and perform a redirect in middleware

Workaround #2: Implement shallow routing with a prefixed path on the client-side

Similar questions

merge two structures to create a unified entity

Is there a way to order the execution of two functions that each produce promises?

Bringing in a script and invoking a function on a specific variable

What is the standard error function used for jQuery promises?

The JSX component. 'ReactSVG' is not allowed for use

Simple solution for storing key-value pairs temporarily in a form using JQuery

Receive a response in fragments from express on the browser

Discover the most affordable price from an array in Vue Js

Leverage ESlint for optimal code quality in your expressjs

Upgrade the jQuery code from version 1.4.2 min to version 1.10.2 min

Tips for testing an API that relies on an external library such as "<script src="http://stripe[...]"

Is it possible to send the value of "this" as an argument to a different function in JavaScript?

Executing Basic Calculations Instantly with Live Data in Qualtrics

Upon Login, No API Requests are Initiated in Next.js Application

Devices such as CAC cards and smart cards are not being recognized by Chrome's WebUSB feature

How come outerHTML retrieves  comments?

What is the best way to test the Express router catch branch in this specific scenario with Jest?

Is it possible to dynamically add and remove items using React state?

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

How come the method $.when().pipe().then() is functioning properly while $.when().then().then() is not working as expected

Tips for maintaining i18n locale slugs and ensuring i18n consistency when reloading in Next.js

Answer №1

Workaround #1: Set default locale to default, and perform a redirect in middleware

Workaround #2: Implement shallow routing with a prefixed path on the client-side

Similar questions

merge two structures to create a unified entity

Is there a way to order the execution of two functions that each produce promises?

Bringing in a script and invoking a function on a specific variable

What is the standard error function used for jQuery promises?

The JSX component. 'ReactSVG' is not allowed for use

Simple solution for storing key-value pairs temporarily in a form using JQuery

Receive a response in fragments from express on the browser

Discover the most affordable price from an array in Vue Js

Leverage ESlint for optimal code quality in your expressjs

Upgrade the jQuery code from version 1.4.2 min to version 1.10.2 min

Tips for testing an API that relies on an external library such as "<script src="http://stripe[...]"

Is it possible to send the value of "this" as an argument to a different function in JavaScript?

Executing Basic Calculations Instantly with Live Data in Qualtrics

Upon Login, No API Requests are Initiated in Next.js Application

Devices such as CAC cards and smart cards are not being recognized by Chrome's WebUSB feature

How come outerHTML retrieves  comments?

What is the best way to test the Express router catch branch in this specific scenario with Jest?

Is it possible to dynamically add and remove items using React state?

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

How come the method $.when().pipe().then() is functioning properly while $.when().then().then() is not working as expected

Workaround #1: Set default locale to `default`, and perform a redirect in middleware