jasonsilberman / nextgram13-root-path

App reproducing incorrect behavior of parallel + intercepting routes for the root path in Next.js 13

NextGram with Root Path Bug Reproduction

This is a fork of the NextGram app built as a demo for Instagram style routes in Next.js 13 with Parallel and Intercepting routes.

The original has a / root page that shows the grid of photos and then individual /photos/:id pages. However, for my use case, I would like to have the individual pages be at /:id without the /photos route segment. This is not currently possible as of Next.js 13.5.5. I have recorded two videos below showing the correct and incorrect behavior (you can see the URL changes in the Arc browser below).

├── app
|  ├── @modal
|  |  ├── (.)
|  |  |  └── [id]
|  |  |     └── page.tsx
|  |  └── default.tsx
|  ├── [id]
|  |  └── page.tsx
|  ├── default.tsx
|  ├── layout.tsx
|  └── page.tsx

Working with /photos/:id pages

CleanShot.2023-10-18.at.12.59.09.mp4

Not working with /:id pages

CleanShot.2023-10-18.at.13.01.36.mp4

Other reports of this behavior

I found some other reports of this buggy behavior below:

• Next.js issue #52533 Intercepting parallel routes including dynamic route not working within the same directory
• Reddit thread: Root level dynamic routes with intercepting routes

Try it Yourself

I have also gone through and deployed this app to Vercel and updated the below instructions for this repo so you can see the issues for yourself.

Demo

https://nextgram.vercel.app

Locally

git clone https://github.com/jasonsilberman/nextgram13-root-path.git
cd nextgram13-root-path/
yarn
yarn dev