Next.js v14 | Issue with intercepting and parallel routes

Hello. I'm working on social media app. Here's file/folder structure of my app directory:

app
│   favicon.ico
│   globals.css
│   layout.tsx
│   page.tsx
│   
├───@dialog
│   │   default.tsx
│   │   
│   └───(.)post
│       └───[id]
│               page.tsx
│               
└───post
    ├───new
    │       page.tsx
    │       
    └───[id]
            page.tsx

app
│   favicon.ico
│   globals.css
│   layout.tsx
│   page.tsx
│   
├───@dialog
│   │   default.tsx
│   │   
│   └───(.)post
│       └───[id]
│               page.tsx
│               
└───post
    ├───new
    │       page.tsx
    │       
    └───[id]
            page.tsx

As you can see I'm using intercepting routes to display post details in dialog instead of redirecting user to separate page. You can also notice I have /post/new route (which takes me to form to create new post). Well I'm facing issue with that /post/new route. When I try to go to that route, I get 404 Not Found error. However hard-reload successfully takes me to the form, so I'm guessing issue is I don't have intercepting route for /post/new route. Would it be possible to let intercepting routes that I also have /post/new page that doesn't need intecepting? Has anyone faced this issue before? And how to fix it?

4 Replies

ἔρως•3mo ago

instead of this:

└───post
    ├───new
    │       page.tsx
    │       
    └───[id]
            page.tsx

└───post
    ├───new
    │       page.tsx
    │       
    └───[id]
            page.tsx

can you try this?

└───post
    ├───new.tsx
    └───[id].tsx

└───post
    ├───new.tsx
    └───[id].tsx

Tenkes•3mo ago

No, that's not how routing works in Next.

missymae#2783•3mo ago

Maybe your problem is because the intercept is not on the same level as post. Instead of (.)post you might need (..)post

missymae#2783•3mo ago

https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

Routing: Intercepting Routes | Next.js

Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals.

Gaming

Programming

Next.js v14 | Issue with intercepting and parallel routes