📁 Next.js Folder Structure

Next.js uses a specific folder structure to organize your code. Understanding this structure helps you know where to place files and how the framework finds your pages and components.


my-app/
├── app/           # Your pages and routes
├── public/        # Static files
└── package.json   # Project dependencies

Main Folders

📂

app/

Contains all your pages, layouts, and routes

app/
├── page.js
└── layout.js

🖼️

public/

Static assets like images and fonts

public/
├── logo.png
└── favicon.ico

🎨

components/

Reusable React components (optional)

components/
├── Header.js
└── Footer.js

⚙️

Config Files

Project configuration and settings

next.config.js
package.json

🔹 The app/ Directory

The app directory is the heart of your Next.js application. Every folder inside app can become a route, and special files like page.js define what users see when they visit that route.

app/
├── page.js              # Home page (/)
├── layout.js            # Root layout
├── globals.css          # Global styles
├── about/
│   └── page.js          # About page (/about)
└── contact/
    └── page.js          # Contact page (/contact)

Special Files in app/:

page.js - Defines a page/route
layout.js - Shared layout wrapper
loading.js - Loading UI
error.js - Error handling
not-found.js - 404 page

🔹 Creating a Page

To create a new page, simply add a folder with a page.js file inside the app directory. The folder name becomes the URL path automatically.

// app/about/page.js
export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our about page!</p>
    </div>
  )
}

// This creates the route: /about

Output at /about:

About Us

Welcome to our about page!

🔹 The public/ Directory

Files in the public folder are served as static assets. You can reference them directly in your code using a forward slash, making it perfect for images, fonts, and other media files.

// Accessing files from public/
export default function Logo() {
  return (
    <div>
      <img src="/logo.png" alt="Logo" />
      <img src="/images/hero.jpg" alt="Hero" />
    </div>
  )
}

public/ folder structure:

public/
├── logo.png           # Access as /logo.png
├── favicon.ico        # Browser icon
└── images/
    ├── hero.jpg       # Access as /images/hero.jpg
    └── banner.png     # Access as /images/banner.png

🔹 Root Layout

The root layout wraps all pages in your application. It's perfect for adding common elements like navigation, footers, or global providers that should appear on every page.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>My Website</header>
        {children}
        <footer>© 2025</footer>
      </body>
    </html>
  )
}

🔹 Nested Routes

Create nested routes by adding folders inside folders. This helps organize related pages and creates clean URL structures for your application.

app/
├── blog/
│   ├── page.js              # /blog
│   ├── [slug]/
│   │   └── page.js          # /blog/my-post
│   └── categories/
│       └── page.js          # /blog/categories

🔸 Example Nested Page:

// app/blog/categories/page.js
export default function CategoriesPage() {
  return (
    <div>
      <h1>Blog Categories</h1>
      <ul>
        <li>Technology</li>
        <li>Design</li>
      </ul>
    </div>
  )
}

🔹 Complete Project Structure

Here's what a typical Next.js project looks like with all common folders and files organized properly for a real-world application.

my-nextjs-app/
├── app/
│   ├── page.js
│   ├── layout.js
│   ├── globals.css
│   ├── about/
│   │   └── page.js
│   └── api/
│       └── hello/
│           └── route.js
├── components/
│   ├── Header.js
│   ├── Footer.js
│   └── Button.js
├── public/
│   ├── logo.png
│   └── images/
│       └── hero.jpg
├── styles/
│   └── custom.css
├── lib/
│   └── utils.js
├── node_modules/
├── package.json
├── next.config.js
└── README.md

🔹 Best Practices

Follow these conventions to keep your Next.js project organized and maintainable as it grows larger and more complex.

Use lowercase for folder names (about, contact, blog)
Group related pages in folders (blog/posts, blog/categories)
Keep components separate in a components/ folder
Store utilities in a lib/ or utils/ folder
Use descriptive names for files and folders

Folder Structure