Explain the file-based routing system in Next.js

Beginner

Answer

Next.js uses a file-based routing system where the file structure in the pages directory (or app directory in App Router) automatically creates routes:

pages/
  index.js       → /
  about.js       → /about
  contact.js     → /contact
  blog/
    index.js     → /blog
    [slug].js    → /blog/:slug

Each file exports a React component as the default export, which becomes the page component for that route.