Native Support for URL Aliases for App Router Pages (Essential for full and intuitive i18n)

[JaimeHyland]

Goals

1. Allow automated generation of metadata from json text resources simultaneously with correctly localized urls.
2. Facilitate localization of text resources by ensuring metadata texts are found and can be edited close to inline texts for use on an app's UI

Non-Goals

1. Provide a single one-size-fits-all workflow for i18n developers to fully internationalize urls and metadata

Background

Most developers of internationalized websites, aside from the need to store localized text resources by locale (usually in more or less easily accessible json files), will also want to localize (a) metadata and (b) UX-facing URLs.
Personally, I'm attempting to internationalize the metadata for a next.js website. The site supports 3 locales: de, en and es.
My file structure for pages is logically app/[locale]/page.tsx for the homepage with child pages being organized into sub-folders under the [locale] folder. For example, my CV page is located at app/[locale]/cv/page.tsx, so that the default URL for that page in en is ... /en/cv.
I have redirected the URLs for de (from .../de/cv to .../de/lebenslauf) and for es (from .../de/cv to .../en/curriculum).

´´´
const nextConfig = {
async redirects() {
return [
...
{ source: "/es/cv", destination: "/es/curriculum", permanent: true },
...
{ source: "/de/cv", destination: "/de/lebenslauf", permanent: true },
...
]
}
´´´

My strategy for internationalizing the metadata per page is to create a per-page layout.tsx containing a generateMetadata() function, which gathers metadata content and inserts it into the appropriate page head.

app/[locale]/cv/page.tsx
app/[locale]/cv/layout.tsx

This strategy works fine where there is no redirection (i.e. on the homepage and the en child pages), but causes issues in de and es when redirections are in place:

• The redirections (in next.config.js) break the mapping to the layout.tsx file (next looks for a layout file at the redirected address rather than the canonical address) and as a result the generateMetadata() function contained in that file is never invoked, so the localized metadata are never generated for that page and language.

Using redirects (via middleware or next.config.js) causes:
- generateMetadata() in app/[locale]/cv/layout.tsx to stop executing

• Translations (e.g., useTranslations(), with or without a parameter like 'cv') to resolve incorrectly or break
• Incorrect routing decisions due to altered pathname
• Next.js assuming any child layout file either lives under the rewritten path or does not exist at all
• Next.js assuming under some circumstances the relevant page lives under the rewritten path instead of the actual route directory

To put a long story short localizing URLs using redirects breaks metadata, layout rendering, and translations of metadata and internationalized URLs.

Yet internationalized sites routinely need localized URLs and Metadata.

I'm currently keeping my fingers crossed that I can work around this issue using slugs, but I had hoped I wouldn't have to do so. It'd certainly be nice if such fiddly manipulations as fiddling about with slugs were

Proposal

Apart from early-stage rerouting (which takes effect before middleware logic kicks in), Next.js should also offer native route aliasing so that:

/es/curriculum
/es/cv
/de/lebenslauf

…can all resolve to: `app/[locale]/cv/``

so that:
. generateMetadata() runs as expected when required
. The correct layout.tsx is used
. Translation namespaces work as expected
. SEO metadata is correctly generated for each locale
. No file duplication is needed

With the current architecture, the only obvious options are:
. Duplicate identical directories (cv/, curriculum/, lebenslauf/)
. Break metadata/layout functionality
. Avoid localized URLs entirely

Such workarounds are not scalable for most SEO-heavy multilingual sites.

Possible solution
One option would be to make a distinction between fully functional ('early') redirects and public facing ('late') aliases.

Among the ways of implementing this from the app developer point of view would be providing the option of creating a structure like this (in, say, a file at this address app/[locale]/cv/route.config.ts:

export const aliases = [
  '/:locale/curriculum',
  '/:locale/lebenslauf'
];

Next.js would:

• Treat all aliases as pointing to the same logical route
• Render the same layout.tsx and page.tsx without worrying about aliases
• Run generateMetadata() consistently
• Preserve clean internationalized user-facing URLs
• Avoid the need for rewrites that break the routing tree

Closing notes

This draft change request is a common requirement for production-grade internationalized sites.
Native support for URL aliases in the App Router would significantly improve:

. Developer experience
. SEO
. Performance
. Development overhead maintainability of i18n apps

Thanks very much for considering this improvement — and for all your work on Next.js.