RFC: Localization of pathnames

[amannn]

I'm planning on incorporating pathname localization into next-intl and would be really thankful about feedback!

Please see #402 to find links to the proposed docs which discuss the proposal in detail.

Let me know what you think! 🙌

EDIT: This was released in 3.0!

[aXenDeveloper]

That will be wonderful 😎

[zahitrios]

I would be very helpful to improve the urls SEO of the platforms

[agustif]

This landed on beta.12

Exciting work, I do hope we can manage to make it a bit more flexible before it reaches stable release!

[wscourge]

Great feature.

One suggestion is to prepare for importing the pathnames from a JSON file. Hardcoding the names in the configuration file makes it harder to maintain the translations, given their not all in one place, and this is what your documentation suggests at the moment.

It'd be easier to work with those the same way we work with all the translations, for example:

1. locales/en.json and locales/de.json: our default translations
2. locales/pathnames/en.json and locales/pathnames/de.json: new files with pathnames definitions

And in your new config:

import en from "@/locales/pathnames/en.json"
import de from "@/locales/pathnames/de.json"

export const pathnames = {
  "/about": {
    en: en.about,
    de: de.about
  }
}

Again, great work, and great feature. Keep it up.

[wscourge]

In fact I was just refactoring my codebase, and this is what I came up with (for the file-structure described above):

import {
  createLocalizedPathnamesNavigation,
  Pathnames,
} from "next-intl/navigation"

import ROUTES from "@/app/_data/routes"
import en from "@/locale/paths/en.json"
import pl from "@/locale/paths/pl.json"

export const DEFAULT_LOCALE = "en"
export const LOCALES = [DEFAULT_LOCALE, "pl"] as const
export type Locale = (typeof LOCALES)[number]
const PATHNAMES = [
  ROUTES.HOME,
  ROUTES.SIGN_IN,
  ROUTES.SIGN_UP,
  ROUTES.ONE_TIME_PASSWORD,
  ROUTES.FORGOT_PASSWORD,
  ROUTES.UPDATE_PASSWORD,
  ROUTES.ABOUT,
  ROUTES.BLOG,
  `${ROUTES.BLOG}/[slug]`,
  ROUTES.BLOG_AUTHORS,
  `${ROUTES.BLOG_AUTHORS}/[slug]`,
  ROUTES.BLOG_TAGS,
  `${ROUTES.BLOG_TAGS}/[slug]`,
  ROUTES.CONTACT,
  ROUTES.DOCS,
  `${ROUTES.DOCS}/[...slug]`,
  ROUTES.FAQ,
  ROUTES.NEWS,
  `${ROUTES.NEWS}/[slug]`,
  ROUTES.PRICING,
  ROUTES.PRIVACY,
  ROUTES.TERMS,
  ROUTES.SETTINGS,
  ROUTES.SETTINGS_BILLING,
  ROUTES.SETTINGS_MAILING,
  ROUTES.SETTINGS_SECURITY,
  ROUTES.SETTINGS_TEAMS,
] as const
type Pathname = (typeof PATHNAMES)[number]

const PATHNAMES_TRANSLATIONS: {
  [key in Locale]: {
    [key in Pathname]: string
  }
} = { en, pl }



export const pathnames = PATHNAMES.reduce(
  (acc, route) => ({
    ...acc,
    [route]: LOCALES.reduce(
      (locales, locale) => ({
        ...locales,
        [locale]: PATHNAMES_TRANSLATIONS[locale][route],
      }),
      {},
    ),
  }),
  {},
) satisfies Pathnames<typeof LOCALES>

feel free to use it if you find it useful.