Pages router - Localized pathnames

[rafalkazik]

Hello! 👋

I'm working on a Next.js project using Pages router, and I'm trying to create localized pathnames for static subpages based on locales. Currently, I have a very simple setup where I want to handle just the about page.

I've tried to follow the documentation for both next-intl and Next.js. Accordingly, I added an i18n object in the next.config.js file:

module.exports = {
  i18n: {
    locales: ['en', 'pl'],
    defaultLocale: 'en',
    localeDetection: false,
  },

Then, in the src folder, I added middleware.ts and navigation.ts files.

navigation.ts:

import { createLocalizedPathnamesNavigation } from 'next-intl/navigation'
import { Pathnames } from 'next-intl/navigation'

export const locales = ['en', 'pl'] as const

export const pathnames = {
  '/': '/',
  '/about': {
    en: '/about',
    pl: '/o-nas',
  },
} satisfies Pathnames<typeof locales>

export const { Link, redirect, usePathname, useRouter } = createLocalizedPathnamesNavigation({ locales, pathnames })

middleware.ts:

import createMiddleware from 'next-intl/middleware'
import { locales, pathnames } from './navigation'

export default createMiddleware({
  defaultLocale: 'en',
  locales,
  pathnames,
})
export const config = {
  matcher: [],
}

Here's my question: could I ask for your advice on what I might be doing wrong? I'm currently trying to access the local subpage at http://localhost:3000/pl/o-nas, but I'm getting a 404 error. I still have to go to http://localhost:3000/pl/about.

Thank you in advance for any tips! 🙌

[amannn]

Thanks for the question! The localized pathnames are in fact a newer feature that has been added as part of the App Router support. To be honest, I never experimented with how it works with the Pages Router.

There is, however, an example that illustrates how the Pages Router and App Router can be used side-by-side: App Router Migration. In that example, the i18n feature from the Pages Router is not used and routing is being handled by the middleware.

Maybe that puts you in a better position where localized pathnames could work in the Pages Router?

[rafalkazik]

@amannn, sure thing, I'll try to resolve it in a different way. Thanks for the clarification! :)

[0xyy]

@rafalkazik any updates how you handled it ? I am also trying to do localized pathnames with pages router and I can't find any info

[rafalkazik]

@0xyy unfortunately I had to solve this problem a bit roundabout using rewrites and redirects in next.config.js.

[0xyy]

@rafalkazik thanks for fast response! So it comes out that localized pathnames aren't supported for pages router, I also found this fresh question about the same topic and the issue https://stackoverflow.com/questions/79093850/next-js-pages-router-with-next-intl-is-it-possible-to-localize-pathnames but there are no answers.

[rafalkazik]

@0xyy from what I understood from @amannn words, localized pathnames are a new feature and were not supported in older next.js structures like pages router. So I had to solve it differently. 😄
But if you come up with something else, I’d be grateful if you could share your solution! 🙌

[amannn]

Has anyone tried the approach I've mentioned above in #1004 (comment)? Would be curious if that works or if there are any challenges.