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

ἔρως•9mo 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

TenkesOP•9mo ago

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

missymae•9mo ago

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

missymae•9mo 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