next.js: Parallel / Intercepting Routes rendering 404 on page load

Intercepting and parallel routes seem completely broken to me… or the docs are completely wrong. Either way, this is a very frustrating issue. The group solution did not work for me.

I agree with @jscul on this one, so much of this seems completely broken and half baked. The docs are not correct.

I updated to v13.5.4 and all is still well (running the ‘nextgram’ example).

I removed the “experimental” section from 'next.config.js'.

Now I’ll try adding back in the MUI behavior (piece by piece).

The “trick” to this is to use default.tsx to cover non-matching slots. Adapting the example app worked for my use case

I am having this issue also.

OMG — I think I’ve figured this out!

I was running into the same problem: the intercepted route would load fine when clicking a <Link />; but when I refreshed the page on the intercepted route, it would 404.

Here’s the problem: if the layout slot isn’t filled based on the current path, it will 404. You can test this by removing the slot from the layout file, and then doing a full-page load on the intercepted route path. The full-page load should work just fine now. Then, when you add the slot back to the layout file, it’ll 404 again.

To fix this, you need to use a route group. Remove the slot from your root layout, and create a new layout inside your route group that just renders children and your slot:

// src/app/(home)/layout.tsx
import { ReactNode } from 'react'

export default function Layout({
  children,
  slotNameHere,
}: {
  children: ReactNode
  slotNameHere: ReactNode
}) {
  return (
    <>
      {children}
      {slotNameHere}
    </>
  )
}

Move your homepage and your intercepted routes underneath your route group:

- src
  - app
    - (home)
      - @slotNameHere
        - (.)routeName
          - page.tsx
          - ...etc

Note that, if your intercepted route is a few levels down (e.g., src/app/(home)/@slotNameHere/(.)routeName/foo/bar/page.tsx, you may need to create a page.tsx at the level right under the root of the intercepted route to prevent the same 404 issue (i.e., at src/app/(home)/@slotNameHere/(.)routeName/page.tsx). This can just be an empty component that returns null.

@feedthejim I think there is still something wrong with the (.) selector (https://github.com/vercel/next.js/pull/48276): If you check out this repo: https://codesandbox.io/p/sandbox/nextjs-intercepting-routes-s9j6mo You will see that if you open the blog post, there are two things happening that are off:

1. It also loads the intercepted page als main page (it replaces the blog page with the item page)
2. If you have the blog post modal open and refresh the page, it will give you a 404

I modified this repo to use the old (…) syntax here: https://codesandbox.io/p/sandbox/nextjs-intercepting-routes-forked-bfuitc If you try this version (only change is (.) became (..)blog and I also placed everything into a (group)), then everything works as expected.