nextjs-modals-fix.md

A fix for Next.js modals (intercepted routes) not closing when navigating away with <Link> or router.push()

app
├─ @photoModal
│  ├─ (.)photo
|  |  └─ [id]
│  │  |  └─ page.tsx <----- a modal with links to home, /profile, and /login
│  └─ [...catchAll]
│  │  └─ page.tsx <----- returning null here is supposed to cause modal to hide when
│  │  │                  navigating away, as this should match all other routes, doesn't work though.
│  │  │                  So we create dummy pages to match the specific routes below.
│  └─ profile             
│  │  └─ page.tsx <----- page that returns null, causing modal to hide when navigating to /profile
│  └─ login
│  │  └─ page.tsx <----- page that returns null, causing modal to hide when navigating to /login
|  └─ page.tsx <----- page that returns null, causing modal to hide when navigating to /
|  └─ default.tsx
├─ photo
|  └─ [id] 
|  |  └─ page.tsx 
├─ profile
│  └─ page.tsx
|  login
|  └─ page.tsx
└─ page.tsx
└─ layout.tsx

Dummy page looks like this:

export default function Page() {
  return null
}