[NEXT-1165] [App Router]: Group routes with parallel routes as a page slot, nested route will render NEXT_NOT_FOUND in server side.

[Innei]

Verify canary release

• 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 22.4.0: Mon Mar  6 21:01:02 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8112
    Binaries:
      Node: 18.15.0
      npm: 8.17.0
      Yarn: 1.22.19
      pnpm: 8.1.0
    Relevant packages:
      next: 13.4.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/Innei/nextjs-group-routes-reproduction

To Reproduce

1. Start dev
2. Go to home page /
3. Click posts, nav to /posts
4. Refresh page, got NEXT_NOT_FOUND

CleanShot.2023-05-10.at.1.14.14.mp4

Describe the Bug

Render nested route in the server will be got NEXT_NOT_FOUND, but it works fine on the client side.

This error will happen in this file structure.

├── (root)
│   ├── (site)
│   │   ├── @footer
│   │   ├── @head
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── posts
│   ├── @headxx
│   │   └── page.tsx
│   ├── error.tsx
│   ├── layout.tsx
│   ├── page.tsx
│   └── providers.tsx
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx

Expected Behavior

No error.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1165

[mkarajohn]

I am experiencing this error as well.

I am using a @modal slot for a modal which uses route interception (pretty much like the example in https://github.com/vercel-labs/nextgram)

I tried to move the @modal inside a (slots) group which was created at the same level as @modal was originally and route interception and the slot itself stops working, with the error

Unhandled Runtime Error
Error: NEXT_NOT_FOUND

Call Stack
Next.js
notFound
node_modules/next/dist/client/components/not-found.js (26:18)
NoopParallelRouteDefault
node_modules/next/dist/client/components/parallel-route-default.js (13:26)
type
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1447:17)
attemptResolveElement
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1759:20)
resolveModelToJSON
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1249:13)
stringify
<anonymous>
stringify
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (181:13)
processModelChunk
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (2062:25)
retryTask
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (2109:6)
performWork
node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1544:13)
listOnTimeout
node:internal/timers (564:17)
process.processTimers
node:internal/timers (507:7)

before:

after:

[jiwooIncludeJeong]

I encountered same issue.
And i resolve this issue by using intercepting-routes.

Following is my example:

• if you navigate by using soft navigation, @modals/half-self/(.)find-expert will intercept your localhost:3000/half-self/find-expert url.
• if you navigate by using hard navigation, /half-self/find-expert will intercept your localhost:3000/half-self/find-expert url.

I hope this comment will help you 😄

[ztanner]

Based on the unmatched routes section of the parallel routes docs, it looks like what's happening is expected -- since your slots (@footer, @head, @headxx) don't contain a posts page, when navigating to /posts from the root, it will use the previously matched slots. On a reload, it will attempt to use the default.js file in your slot (if you have one). Otherwise it will 404.

So to fix your repro, you could either add default.tsx to each of your slots, or create a posts/page.tsx for each slot

[dennis3124]

@jiwooIncludeJeong hey jiwool, I'm trying to implement something similar. In my layout.js i have

.....
{children}
{modal}
......

When my parallel page is rendered, children is no longer displayed. I am trying to implement a Modal component which should render the modal above the children component. Any ideas how to solve this?

[phelanma]

Possible workaround is have the default.tsx and page.tsx in the @slot directory
And then import page.tsx into default.tsx.

// default.tsx

import AppHeader from "./page";
export default function AppHeaderDefault() {
  return <AppHeader />;
}

*Advance use cases are not tested but in the simple case for hard-navigation rendering seems to work

[kachkaev]

I have just reported a similar bug, which manifests itself when using route groups, parallel routes and route interception. Sharing here for context: #53170.

[ztanner]

Going to close this out as the original reproduction appears to be behaving correctly, but has several errors in how the application is structured:

• /app/(root)/page.tsx and /app/(root)/(site)/page.tsx refer to the same path (/) which is not supported. We now properly will throw an error when conflicting pages are detected.
• All of the slots defined in the app are missing a default segment. This means that if you load /posts but there's no specific page component for that slot (ie, @headxx/posts/page, @footer/posts/page), it will fall back to the nearest default. Since no default is defined, it 404s. This is documented here.

If you think there's still a bug with this specific scenario, please open a new issue with a reproduction and we'll take a look!

[github-actions]

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