What is file-based routing in Next.js?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid Next.js basics — a prerequisite for any developer role.
Answer
Next.js uses the filesystem as the router — the directory structure automatically defines application routes. App Router routing (app/ directory): each folder represents a route segment. The URL path corresponds to nested folder names. A page.tsx file makes the route publicly accessible. Examples: app/page.tsx → / (home); app/about/page.tsx → /about; app/blog/[slug]/page.tsx → /blog/my-first-post (dynamic segment); app/shop/[...category]/page.tsx → /shop/electronics/phones (catch-all segment); app/shop/[[...category]]/page.tsx → /shop AND /shop/electronics (optional catch-all). Route groups: app/(marketing)/about/page.tsx — parentheses group routes without adding to URL. Used for shared layouts within a group. Parallel routes: app/@modal/(.)photo/[id]/page.tsx — render multiple pages simultaneously. Intercepting routes: (.)path, (..)path, (...)path — intercept routes without full page navigation. Private folders: _components/ — underscore prefix opts out of routing. Pages Router: pages/ directory with .js/.tsx files directly. Dynamic: pages/posts/[id].tsx.
Pro Tip
Back up your answer with a specific project or situation. Saying 'In my last Next.js project, I used this when...' immediately makes your answer more credible and memorable.
Previous
What is the difference between the Pages Router and App Router in Next.js?
Next
What are React Server Components (RSC)?