Route modalsRoute modals

Closing is a history operation

Open a photo, close it, then press Back.

// components/modal.tsx
'use client'
import { useRouter } from 'next/navigation'

export function Modal({ children }: { children: React.ReactNode }) {
  const router = useRouter()
  const close = () => router.back()

  return (
    <div
      className="overlay"
      onClick={(e) => e.target === e.currentTarget && close()}
      onKeyDown={(e) => e.key === 'Escape' && close()}
    >
      <div role="dialog" aria-modal="true">
        <button onClick={close}>Close</button>
        {children}
      </div>
    </div>
  )
}

Reload skips the intercept

Open a photo, press Refresh, then untick default.tsx.

// app/layout.tsx
export default function RootLayout({ children, modal }: {
  children: React.ReactNode
  modal: React.ReactNode
}) {
  return (<html><body>{children}{modal}</body></html>)
}

// app/@modal/default.tsx
export default function Default() {
  return null
}

Matchers count segments

Pick a slot and a matcher.

Why it matters, pros and cons