Changing the URL locale using Next.js router.push is unsuccessful

Question

Changing the URL locale using Next.js router.push is unsuccessful

I am attempting to switch the locale by connecting the onClick event to two separate <div> elements:

import { useRouter } from 'next/router'
// other codes

const router = useRouter()

const changeLocale = (locale) => {
    router.push({
        router: router.pathname,
        query: router.query
    }, router.asPath, { locale })
}

return <div>
    <div onClick={() => changeLocale('en')}>EN</div>
    <div onClick={() => changeLocale('ru')}>RU</div>
</div>

The issue I'm facing is that the URL is not updating. For example, when I am at /en/about and click on the "RU" option, the URL remains as /en/about.

I would like to understand why the router.push function is not behaving as expected in this scenario.

javascript next.js

Answer 1

Answer №1

Notice that when using router.push({}), the router property is not accessible!

To manage routing, specify a list of supported locales and the default locale in Next.js for automatic routing handling.

// next.config.js
module.exports = {
  i18n: {
    // List all the locales to be supported in your application
    locales: ['en', 'ru'],
    // Set the default locale to be used when accessing non-locale prefixed paths like `/hello`
    defaultLocale: 'en',
  },
}

If you are using Next.js 12, to add a prefix to the default locale, update the next config as follows:

// next.config.js

module.exports = {
  i18n: {
    locales: ['default', 'en', 'ru'],
    defaultLocale: 'default',
    localeDetection: false,
  },
  trailingSlash: true,
}

Furthermore, to implement custom routing rules, create a new file named middleware.js within your pages directory:

// middleware.js

import { NextRequest, NextResponse } from 'next/server'

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

export async function middleware(req: NextRequest) {
  if (
    req.nextUrl.pathname.startsWith('/_next') ||
    req.nextUrl.pathname.includes('/api/') ||
    PUBLIC_FILE.test(req.nextUrl.pathname)
  ) {
    return
  }

  if (req.nextUrl.locale === 'default') {
    return NextResponse.redirect(new URL(`/en${req.nextUrl.pathname}`, req.url))
  }
}

For further information on locale strategies, refer to the Next.js documentation.

Answer 2

Notice that when using router.push({}), the router property is not accessible!

To manage routing, specify a list of supported locales and the default locale in Next.js for automatic routing handling.

// next.config.js
module.exports = {
  i18n: {
    // List all the locales to be supported in your application
    locales: ['en', 'ru'],
    // Set the default locale to be used when accessing non-locale prefixed paths like `/hello`
    defaultLocale: 'en',
  },
}

If you are using Next.js 12, to add a prefix to the default locale, update the next config as follows:

// next.config.js

module.exports = {
  i18n: {
    locales: ['default', 'en', 'ru'],
    defaultLocale: 'default',
    localeDetection: false,
  },
  trailingSlash: true,
}

Furthermore, to implement custom routing rules, create a new file named middleware.js within your pages directory:

// middleware.js

import { NextRequest, NextResponse } from 'next/server'

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

export async function middleware(req: NextRequest) {
  if (
    req.nextUrl.pathname.startsWith('/_next') ||
    req.nextUrl.pathname.includes('/api/') ||
    PUBLIC_FILE.test(req.nextUrl.pathname)
  ) {
    return
  }

  if (req.nextUrl.locale === 'default') {
    return NextResponse.redirect(new URL(`/en${req.nextUrl.pathname}`, req.url))
  }
}

For further information on locale strategies, refer to the Next.js documentation.

Answer 3

Answer №2

The problem I encountered stemmed from having a submenu, which resulted in the router.push with the default locale being triggered again, preventing the route from changing due to no change in locale. One way to address this is by incorporating a validation check in your changeLocale function to determine if a locale has been specified.

Answer 4

The problem I encountered stemmed from having a submenu, which resulted in the router.push with the default locale being triggered again, preventing the route from changing due to no change in locale. One way to address this is by incorporating a validation check in your changeLocale function to determine if a locale has been specified.

Changing the URL locale using Next.js router.push is unsuccessful

Answer №1

Answer №2

Similar questions

Selenium Webdriver experiencing issues with running JavaScript code

Issue with inline Javascript not functioning correctly when partial is rerendered in Ruby on Rails version 3.1

Organizing outcomes from a for each function into an array using javascript

Collaboratively utilizing resources among various NPM Workspaces

Rotating the camera around the origin in Three.js

What is the rationale behind allowing any type in TypeScript, even though it can make it more challenging to detect errors during compile time?

What is the best way to create a floating navigation bar that appears when I tap on an icon?

What is the process of compiling HTML code?

Blend the power of Node's CommonJS with the versatility of Typescript's ES modules

What is the process of passing a JavaScript variable to PHP with AJAX?

The error of "No 'Access-Control-Allow-Origin' header is present on the requested resource" persists even after implementing the Access-Control-Allow-Origin header

Open the overflow div within a table data cell

Using Javascript to initialize events based on a variable

Vue data set is displaying as undefined

Ways to include a CSS file path in a link tag from an npm package

Tips for incorporating the .click function with an overlay

Prisma query that selects categories only if they are linked to an item in a table relation

How can I link two separate webpages upon submitting a form with a single click?

Tips for presenting HTML source code with appropriate tag coloring, style, and indentation similar to that found in editors

Utilizing the nativescript-loading-indicator in a Vue Native application: Step-by-step guide