I'm working on a Next project find on Youtube and I'm stuck using modal, I implemented the logic and it seems to work but it doesn't show on the screen.

I have a list of items (posts) on the profile page. When I click on a post, it should navigate to the post's page (posts/[id]), but I want the modal to intercept this action (which it does). However, the content inside the modal is not showing up on the screen.

This is the page profile

When I click on a post I get this, the url change and the console.log work that's nothing appear from the modal

What I get on inspect

The code of the modal and the structure

The layout file.

I hope you could help me on this one, I'm new to next so please I need your help.

I tried to verify if the modal exists in the layout but it doesn't seems, I add a console.log to be sure that the route is working, and it seems to be. Just the html doesn't not display.

(Sorry if my English is bad)

I'm working on a Next project find on Youtube and I'm stuck using modal, I implemented the logic and it seems to work but it doesn't show on the screen.

I have a list of items (posts) on the profile page. When I click on a post, it should navigate to the post's page (posts/[id]), but I want the modal to intercept this action (which it does). However, the content inside the modal is not showing up on the screen.

This is the page profile

When I click on a post I get this, the url change and the console.log work that's nothing appear from the modal

What I get on inspect

The code of the modal and the structure

The layout file.

I hope you could help me on this one, I'm new to next so please I need your help.

I tried to verify if the modal exists in the layout but it doesn't seems, I add a console.log to be sure that the route is working, and it seems to be. Just the html doesn't not display.

(Sorry if my English is bad)

• reactjs
• next.js
• parallel-route

1 Answer 1

Let me help you implement the modal correctly using Next.js App Router's parallel and intercepting routes.

app/@modal/(.)posts/[id]/page.tsx

'use client'

import { useRouter } from "next/navigation"
import { Dialog, DialogContent } from "@/components/ui/dialog"

export default function PostModal({ params }: { params: { id: string } }) 
{
  const router = useRouter()

  return (
    <Dialog open onOpenChange={() => router.back()}>
      <DialogContent className="sm:max-w-[425px]">
        <div className="grid gap-4">
          <h2 className="text-lg font-semibold">Post ID: {params.id}</h2>
          <p>This is the modal content for post</p>
        </div>
      </DialogContent>
    </Dialog>
  )
}

app/posts/[id]/page.tsx

export default function PostPage({ params }: { params: { id: string } }) {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Post {params.id}</h1>
      <div className="prose">
        <p>This is the full page view of the post.</p>
      </div>
    </div>
  )
}

Here's what's happening:

1. We're using the @modal parallel route to handle the modal view
2. The (.) in the path means it's an intercepting route - it will intercept the regular post route when navigating
3. We're using the shadcn/ui Dialog component for the modal
4. The modal automatically closes when clicking outside or pressing escape thanks to the Dialog component
5. We use router.back() to close the modal, which will return to the previous route

To use this modal:

1. Link to the post normally using <Link href="/posts/123">View Post</Link>
2. When clicked, the modal will intercept and show the post content
3. If users refresh or directly visit /posts/123, they'll see the full page version
4. The modal state is handled through the URL, making it bookmarkable and maintaining browser history

Make sure you have the shadcn/ui Dialog component installed. If you don't, you can install it using:

npx shadcn@latest add dialog