next/link from pages to appDir url results in 404

[captbaritone]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.7.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 6.34.0
    Relevant packages:
      next: 13.0.3-canary.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next build; next start

Describe the Bug

I have a link from a page (old stye) which uses next/link and it points to a page defined using app dir. When I click the link in dev mode it works fine, but when I click the link using next build; next start I get a 404 page. Loading the URL via a link from within the app dir pages (using next/navigation's Link) works fine. Loading the URL directly (no client-side navigation) also works.

Expected Behavior

Clicking the link in the legacy part of my app opens the new page.

8ff964e89c6b34adc60b63be91a3570197c26d0e

Link to reproduction

https://github.com/captbaritone/jordaneldredge.com/

To Reproduce

Check out the repo, checkout hash 8ff964e89c6b34adc60b63be91a3570197c26d0e.

yarn
yarn build
yarn start

Click "Notes" in the nav bar.

Expected

Notes page loads

Actual

404 page renders

[balazsorban44]

This might be related to the fact that trailingSlash: true is not yet supported as per the docs: https://beta.nextjs.org/docs/app-directory-roadmap#planned-features.

Although I tried to create a minimal reproduction but it works fine: https://github.com/balazsorban44/nextjs-42513

Could you narrow down the reproduction so I can easily clone/build it? Currently, it requires some API keys for Notion, but it would be beneficial to cut down everything irrelevant for the reproduction anyway. :pray:

[timneutkens]

The underlying reason is probably this: https://github.com/captbaritone/jordaneldredge.com/blob/master/pages/%5Bslug%5D.js#L10-L12, keep in mind that the pages router has a list of dynamic routes in pages so next/link will end up matching that instead of the app route. This is intentional as app is set up to not ship a manifest of routes to the browser.

[captbaritone]

Here's a branch which removes everything that's not needed (including trailingSlash: true.

https://github.com/captbaritone/jordaneldredge.com/tree/42513-repro

To repro:

[clone]
yarn
yarn build # NOTE: Not yarn dev
yarn start

• Open http://localhost:3000
• Click the link "notes"

Expected

The page defined in app/notes/page.js renders.

Actual

The page defined in pages/[slug].js renders, but if you hit refresh it reverts the expected behavior (above).

Also Note

If you use yarn dev we also get the expected behavior.

[timneutkens]

Yeah it's just what I said in https://github.com/vercel/next.js/issues/42513#issuecomment-1304835777. You'll want to change that link to a normal <a> instead.

[captbaritone]

Thanks for clarifying. Is it a bug that this behavior is different in dev mode than in build mode?

[timneutkens]

Potentially yeah, the production behavior is "correct", can't do much about this unfortunately, dev behavior always hits the dev server on navigation so might be that does navigate between pages<->app

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.