Next.js Intercepting Routes Example

This is a demo blog application showcasing Next.js App Router features, specifically Intercepting Routes and Parallel Routes.

Live Demo

https://nextjs-intercepting-routes-example-igz0.vercel.app/articles

Features

• Article list page with responsive design
• Desktop: Articles open in a sidebar (using Parallel Routes)
• Mobile: Articles open as a full page
• Parallel Routes for sidebar implementation (@sidebar)

Project Structure

src/app/
├── _constants/
│   └── articles.ts         # Article data
├── articles/
│   ├── (list)/            # Article list page
│   │   ├── @sidebar/        # Sidebar implementation
│   │   │   └── (...)articles/[id]/
│   │   └── page.tsx       # List view
│   └── (details)/         # Article detail page
│       └── [id]/
│           └── page.tsx   # Detail view

Technical Details

• Built with Next.js App Router
• Demonstrates modern routing patterns:
  • Intercepting Routes: Sidebar views on desktop
  • Parallel Routes: Sidebar implementation
  • Dynamic Routes: Article pages