Localized pathnames don't typecheck dynamic URLs

[DjebbZ]

Description

When using localized pathnames -- the pathnames mappings in i18n/navigation.ts --, next-intl's Link component types doesn't accept dynamic URLs, i.e. urls with a dynamic segment in it.

/some-page works and typecheck correctly.
/some-page/1 works but doesn't typecheck.

Note: the problem exists for both v3 (latest) and v4 (latest).

Complete error (from the reproduction repo):

~ npx tsc --noEmit                                         0 [17:57:38]
src/app/[locale]/page.tsx:9:13 - error TS2322: Type '"/some-page/1"' is not assignable to type '"/" | ({ pathname: "/"; } & Omit<UrlObject, "pathname">) | ({ pathname: "/some-page/[id]"; params: { id: ParamValue; }; } & Omit<UrlObject, "pathname">)'.

9       <Link href={"/some-page/1"}>Go to some-page/1</Link>
              ~~~~

  node_modules/next-intl/dist/types/navigation/react-client/createNavigation.d.ts:302:9
    302         href: [AppPathnames] extends [never] ? string | import("url").UrlObject : keyof AppPathnames extends infer T ? T extends keyof AppPathnames ? T extends `${string}[[...${string}` ? T | ({
                ~~~~
    The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & Omit<{ slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; locale?: string | undefined; ... 290 more ...; href: "/" | ... 1 more ... | ({ ...; } & Omit<...>); }, "ref"> & RefAttributes<...>'

src/app/[locale]/page.tsx:11:13 - error TS2322: Type '"/some-page/1"' is not assignable to type '"/" | ({ pathname: "/"; } & Omit<UrlObject, "pathname">) | ({ pathname: "/some-page/[id]"; params: { id: ParamValue; }; } & Omit<UrlObject, "pathname">)'.

11       <Link href={`/some-page/${1}`}>Go to some-page/[1]</Link>
               ~~~~

  node_modules/next-intl/dist/types/navigation/react-client/createNavigation.d.ts:302:9
    302         href: [AppPathnames] extends [never] ? string | import("url").UrlObject : keyof AppPathnames extends infer T ? T extends keyof AppPathnames ? T extends `${string}[[...${string}` ? T | ({
                ~~~~
    The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & Omit<{ slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; locale?: string | undefined; ... 290 more ...; href: "/" | ... 1 more ... | ({ ...; } & Omit<...>); }, "ref"> & RefAttributes<...>'


Found 2 errors in the same file, starting at: src/app/[locale]/page.tsx:9

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/DjebbZ/next-intl-localized-bug-repro

Reproduction description

Steps to reproduce:

1. Open reproduction
2. npm install
3. npm run dev: the website works fine, links work
4. npx tsc --noEmit: TS errors. : /some-page/1 is not a valid URL for the Link component
5. Delete the pathnames entry in i18n/routing.ts
6. npx tsc --noEmit OK, no TS error.

Expected behaviour

It should typecheck whether we use pathnames or not.

[amannn]

Please check the docs for Link when using pathnames:

<Link href={{
  pathname: '/some-page/[id]',
  params: {id: '1'}
}}>Go to some-page/1</Link>

[DjebbZ]

Oh I completely missed this... Thanks for the pointer!