Next.js
/Beginner
File-Based Routing
Definition
A routing paradigm where the physical folder structure of the file system perfectly mirrors the URLs in the application.
Explain Like I'm New
You don't write a giant file mapping URLs to components. If you want a webpage at `/about/team`, you literally create a folder called `about`, put a folder called `team` inside it, and drop a `page.tsx` file in there.
Real World Example
Building a standard marketing site with `/`, `/pricing`, and `/contact` routes just by creating three folders.
Common Use Cases
- •Rapid application structuring
- •Intuitive route management
Terminal Output
bash / terminal
/*
Next.js File-Based Routing Map:
app/page.tsx ---> mywebsite.com/
app/about/page.tsx ---> mywebsite.com/about
app/contact/page.tsx ---> mywebsite.com/contact
app/pricing/page.tsx ---> mywebsite.com/pricing
app/pricing/Button.tsx ---> (NO URL. Just a React component!)
*/
Interview Questions
basic
- What specific file name MUST be used to make a folder publicly accessible as a route in the App Router?
intermediate
- If you create a file named `components.tsx` inside the `app/about` folder, what is the URL to access it?