Next.js Folder Structure Explained

When you create a Next.js project, you get a set of folders and files that are already organized. Each folder has a specific purpose. Understanding this structure helps you know exactly where to put your code.

The Top-Level Structure

my-app/
├── app/
├── public/
├── node_modules/
├── .next/
├── package.json
├── next.config.js
└── tailwind.config.js

The app/ Folder

This is the most important folder. All your pages, layouts, and components live here. Next.js reads this folder to build your routes and pages.

app/
├── layout.js       ← Root layout (wraps all pages)
├── page.js         ← Homepage (shown at /)
├── globals.css     ← Global styles
└── favicon.ico     ← Browser tab icon

page.js

Every folder inside app/ that has a page.js file becomes a real URL route. The page.js in the root app/ folder is your homepage.

layout.js

The layout file wraps all pages inside that folder. Think of it as the shared outer shell — the navigation bar and footer live here so they appear on every page without repeating code.

Diagram: Folders as Pages

app/
├── page.js                 → yoursite.com/
├── about/
│   └── page.js             → yoursite.com/about
├── blog/
│   └── page.js             → yoursite.com/blog
└── contact/
    └── page.js             → yoursite.com/contact

Each folder name becomes the URL path. Each page.js inside that folder is what the user sees.

The public/ Folder

Files inside public/ are served directly to the browser. You put images, icons, and other static files here. A file at public/logo.png is accessible at yoursite.com/logo.png.

public/
├── logo.png        → yoursite.com/logo.png
├── banner.jpg      → yoursite.com/banner.jpg
└── robots.txt      → yoursite.com/robots.txt

The node_modules/ Folder

This folder holds all the third-party packages your project uses. You never edit files inside here. When you run npm install, packages get downloaded into this folder. It is often very large — over 200MB — which is normal.

The .next/ Folder

Next.js creates this folder when you run npm run dev or npm run build. It contains the compiled version of your app. You never edit files here either. If something behaves strangely, deleting this folder and running the build again often fixes the problem.

Key Configuration Files

package.json

This file lists all the packages your project depends on and the commands you can run (like dev, build, start). It is the project's identity card.

next.config.js

This file holds custom settings for Next.js. You can configure image domains, environment settings, and other options here. You only edit this file when you need to change how Next.js behaves.

tailwind.config.js

This file configures Tailwind CSS. You tell Tailwind where your files are so it can remove unused styles when building for production.

Where to Put Your Own Files

PAGES       → app/[folder-name]/page.js
LAYOUTS     → app/[folder-name]/layout.js
COMPONENTS  → app/components/ (create this folder yourself)
IMAGES      → public/images/ (create this folder yourself)
UTILITIES   → app/lib/ or app/utils/ (create these yourself)

A Real Example Structure

my-app/
├── app/
│   ├── layout.js
│   ├── page.js
│   ├── components/
│   │   ├── Navbar.js
│   │   └── Footer.js
│   ├── about/
│   │   └── page.js
│   └── blog/
│       ├── page.js
│       └── [slug]/
│           └── page.js
├── public/
│   └── images/
│       └── hero.jpg
└── package.json

Key Takeaway

The app/ folder is where you build your pages and components. The public/ folder stores your static assets. Everything else is configuration or auto-generated. You only need to create files inside app/ and public/ to build your site.