next.js

next.js copied to clipboard

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

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:

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.

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.

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.

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

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

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.