Intercepting routes nextjs not rendering Modal

Question

When trying to use the intercepting routes feature of nextjs' new app router to use it with a Modal, the Modal never gets rendered and only the url changes.

My project structure looks like this:

/app
- @modal
  - (.)user
    - [id]
      - page.js
- user
  - [id]
    - page.js
- page.js

The root page.js contains a component that links to /user/someUUID. When clicking on that link only the URL changes and the Modal never gets rendered.

I used this example code as a reference: https://github.com/vercel-labs/nextgram

Which works perfectly fine. I use the exact same Modal component from the example.

My /@modal/(.)user/[id]/page.js:

'use client'

import Modal from "../../../../components/modal"

export default function UserModal({ params: { id: userId } }) {
    alert("in modal page")

    return (
        <Modal>
            <p>{userId}</p>
        </Modal>
    )
}

My /user/[id]/page.js:

'use client'

export default function UserPage({ params }) {

    return (
        <p>{params.id}</p>
    )
}

The alert in the Modal page never triggers but the page does get compiled. I got no warnings or errors or whatsoever. Does anyone know what am I missing here?

score 2 · Answer 1 · answered Jun 21 '23 at 03:10

if you look at the vercel example here, that model is passed to the layout file as prop

export default function Layout(props) {
  return (
    <html>
      <body>
        <GithubCorner />
        {props.children}
        {props.modal}
      </body>
    </html>
  );
}

Intercepting routes nextjs not rendering Modal

1 Answers1