NextJS Parallel Routes & Intercepting Routes

  1. Setup Nextjs
  • npx create-next-app@latest ./ √ Would you like to use TypeScript with this project? ... No
    √ Would you like to use ESLint with this project? ... No
    √ Would you like to use Tailwind CSS with this project? ... No
    √ Would you like to use src/ directory with this project? ... No
    √ Use App Router (recommended)? ... Yes √ Would you like to customize the default import alias? ... No

  • next: "13.4.19" or Later

  1. Nav & Home Page

  2. Photo/[slug] Page

  3. Modal Component

  4. Auth (login/register) Page

  5. Parallel Routes

  6. Intercepting Routes

  • (.) to match segments on the same level
  • (..) to match segments one level above
  • (..)(..) to match segments two levels above
  • (...) to match segments from the root app directory
  1. Deploy Vercel

📚 Materials/References: