Learning to Read the Project Folder Structure

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Get familiar with the main folders and config files
Understand route file conventions
Organize your project so it's easy to grow

When you open a new project, you'll see a lot of files, but you don't need to memorize all of them at once. You can get started just by first understanding the three you'll touch every day: app, public, and package.json.

The key idea

The app folder holds your routes and UI. Static files like images and icons in public can be referenced as /logo.png. package.json lists your dependencies and scripts, and next.config.ts holds the framework configuration. page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx, and route.ts only get their special meaning from Next.js when their names match exactly. components and lib, on the other hand, are just your own organizational choice — they don't produce URLs.

Let's try it together

text

myanmar-notes/
├─ app/
│  ├─ layout.tsx
│  ├─ page.tsx
│  ├─ globals.css
│  └─ notes/
│     ├─ page.tsx
│     └─ [id]/page.tsx
├─ components/
├─ lib/
├─ public/
├─ next.config.ts
└─ package.json

How the code works

In this tree, app/notes/page.tsx becomes /notes, and app/notes/[id]/page.tsx becomes the dynamic note detail route. lib/data.ts isn't treated as a route — it's just a data access helper.

You should see

You end up with a clear project structure containing two routes: / and /notes.

5-Minute Try-It

Create new components/ui and lib folders, and write a short README noting what you'll keep in each one.

Next.js — Project Structure — Next.js

Easy traps

Expecting a route to work just because you used your own filename instead of page.tsx
Referring to an image in public as /public/logo.png

Exercise

Create new components/ui and lib folders, and write a short README noting what you'll keep in each one.

You'll know it worked when: You end up with a clear project structure containing two routes: / and /notes.