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
CleanShot.2023-10-18.at.12.59.09.mp4
CleanShot.2023-10-18.at.13.01.36.mp4
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
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.
git clone https://github.com/jasonsilberman/nextgram13-root-path.git
cd nextgram13-root-path/
yarn
yarn dev