Next.js Discord

Discord Forum

Next 14 Intercepting route not working

Answered
Shy Albatross posted this in #help-forum
Open in Discord
Shy AlbatrossOP
I've added a modal intercepting route to my app, basically a 1:1 copy of the example:
https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#examples
which looks like on the screen shot, and it doesn't work. When a Link is clicked, the URL changes to /movie/12345, and... nothing happens. I added a console.log to the Modal render and I've only seen it log out to console once, ever, when it compiled the /movie/[movieId] page for the very first time.
I added a custom class to Modal (which is just a fixed div) and it doesn't appear in DOM, so the Modal doesn't get mounted.
Refreshing the page /movie/12345 takes me to the non-intercepted route aka full page, as expected.

Modal
export default function Modal({ children }: { children: React.ReactNode }) {
  return (
    <div className="fixed modalclass top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
      {children}
    </div>
  );
}

Intercepting page
import MovieAssetDetails from "@/components/MovieDetails";
import Modal from "@/components/Modal";

export default function MovieModal({
  params,
}: {
  params: { movieId: string };
}) {
  const { movieId } = params;
  console.log("### modal render");
  return (
    <Modal>
      <MovieAssetDetails movieId={movieId} />;
    </Modal>
  );
}

When any Link for /movie/[movieId] is clicked, there is GET request for that page (like movie/240?_rsc=1tgxz) and the response is
[
  "development",
  [
    [
      "modal",
      "children",
      "children",
      "(.)movie",
      "children",
      ["movieId", "240", "d"],
      [["movieId", "240", "d"], { children: ["__PAGE__", {}] }],
      null,
      null,
    ],
  ],
];

so it looks alright, but still, nothing happens. Any ideas? Is it just another of those things that broken with navigation in v14?
Answered by Shy Albatross
Okay, I'm stupid - forgot to add the modal slot to the layout :lolsob:

Case closed.
View full answer

3 Replies

Shy AlbatrossOP
I cloned https://github.com/vercel-labs/nextgram/tree/main
updated it to Next 14.0.1 and the @modal intercepting route works there. I have pretty much an identical setup and mine doesn't work.

I suspect it's due to suspended components in the layout, or something strange like that.
Shy AlbatrossOP
Okay, I'm stupid - forgot to add the modal slot to the layout :lolsob:

Case closed.
Answer
Shy AlbatrossOP
it doesn't appear in DOM, so the Modal doesn't get mounted.
foreshadowing much