Can pathnames dictionary, locales and default locale be dynamic(using an api) in Next.js 14?

[GetWrecked99]

Hey there.
Just wondering to know that how can we make those settings dynamic?
I was thinking maybe we can pass them through the header and set them inside the middleware but actually have no idea how to share them to the "createLocalizedPathnamesNavigation" utility function.

[amannn]

Have you seen this section in the navigation strategy docs?

Note: The terms "shared" and "localized" pathnames are used to refer to pathnames that are created via the file-system based routing in Next.js. If you're using an external system like a CMS to localize pathnames, you'll typically implement this with a catch-all route like [locale]/[[...slug]].

[GetWrecked99]

Yes but there are still some uncertainties for me. i don't wanted to use catch-all routes for all of my routes. let me give you some examples.
I have some pages that all of my applications gonna supports. such as products, blogs, about us and so on . . .
I wants to to define as a file system(folder routing) statically for the pages that are predefined, and use catch all segment for the pages that are not defined. (CMS decides to add extra pages per application)

CMS will choose what the products, blogs and ... page names be in different langs. so If I'm not mistaken, I should follow something like this syntax :
export const pathnames = {
'/about': {
en: '/about',
de: '/ueber-uns'
},
} satisfies Pathnames
and use it inside 1-createMiddleware and 2-createLocalizedPathnamesNavigation

The values of about route is dynamic and i don't have any idea how to pass it through the createLocalizedPathnamesNavigation to use inside my components.

I feel that I have been completely misunderstood :p

[amannn]

Ok I see! So createLocalizedPathnamesNavigation is really intended to be run with static strings, with the main benefit being strict types across your code base (e.g. enabling autocomplete).

So I think you have these options:

1. Use createLocalizedPathnamesNavigation and define at least some segments there (easiest)

export const pathnames = {
  '/products/[slug]': {
    en: '/products/[slug]',
    de: '/produkte/[slug]'
  }
}

2. Fetch base pathnames during the build of the app and provide them via an env param
3. Use a catch-all segment

// [locale]/[[...slug]]
async function Page({params: {slug}}) {
  const page = await getPageFromCMS(slug);
  if (page.type === 'products') {
    return <ProductsPage />;
  } else if (...) { ... }
}

4. Build your own custom routing layer (middleware + navigation APIs, see e.g. Using a custom middleware instead of the supplied #609)

1 + 2 have the benefit that next-intl can do more for you (e.g. providing alternate links), the other options require more work on your side.

[GetWrecked99]

Appreciated mate.