Setting Up a Next.js Project
One command creates a full Next.js app — let us meet the command and the folders it makes.
What you will learn
- Create an app with create-next-app
- Run the dev server
- Recognise the key folders
Create an app in one command
Next.js gives you a setup tool called create-next-app. It asks a few questions (project name, TypeScript yes/no, Tailwind yes/no) and builds everything for you.
npx create-next-app@latest my-app
cd my-app
npm run dev
# open http://localhost:3000Note: Output: ▲ Next.js 15 - Local: http://localhost:3000 ✓ Ready in 1.8s The dev server is running. Open the address in your browser and you will see the starter page. It reloads automatically every time you save a file.
The folders that matter
Modern Next.js uses the App Router, where everything lives in an app folder. Here are the parts you will use most:
| Path | What it is for |
|---|---|
app/page.js | The home page (the / route) |
app/layout.js | The shared shell (html, body, header) around every page |
app/about/page.js | A page at /about (one folder = one route) |
public/ | Static files like images, served as-is |
package.json | Your scripts and dependencies |
The most important idea to remember: a folder becomes a URL, and a page.js file becomes the page you see. We dig into that next.
Tip: Run npm run dev while you learn. Keep the browser open beside your editor — every save shows instantly, so you can experiment freely.
Watch out: A file must be named exactly page.js (or page.jsx) to become a visible page. A file called home.js inside app will not show up as a route.
Q. In the App Router, which file becomes the visible page for a route?
✍️ Practice
- Create a new Next.js app and open it at
localhost:3000. - Edit the text in
app/page.js, save, and watch the browser update.
🏠 Homework
- Create an app, then explore the
appfolder and write a one-line note for each file you find.