Next.js Project Structure

A scalable and maintainable folder structure for Next.js applications

File Structure

src
- app
  - layout.tsx
  - page.tsx
  - loading.tsx
  - error.tsx
- components
  - Navbar.tsx
  - Footer.tsx
- styles
  - globals.css
  - variables.css
next.config.js
package.json
README.md

Directory Structure Explanation

src/

This folder contains the main application logic, including routes, components, styles, and utilities. It is recommended for better project organization, ensuring a clear separation between source code and configuration files.

src/app/

This folder is a fundamental feature of Next.js 13+, where every folder inside it corresponds to a route. This directory follows the file-based routing system, meaning each folder and file structure reflects the application's URL paths.

app/layout.tsx

A special file in the App Router that acts as the root layout for all pages inside app/.

app/page.tsx

This file represents the main entry point of the application, typically corresponding to the home page (/).

app/loading.tsx

This file is a special feature in Next.js App Router that allows you to create a custom loading screen while a page or component is fetching data.

app/error.tsx

This file is used to handle errors at the route level.

src/components

This folder is used to store reusable UI components that can be used across multiple pages and layouts.

components/Navbar.tsx

This file is typically included inside the layout.tsx file to provide consistent navigation across all pages.

components/Footer.tsx

This file is used to display important information such as copyright details, links, and contact information at the bottom of every page.

src/styles

This folder contains global stylesheets that apply consistent styling across the entire application.

styles/globals.css

This file contains CSS rules that apply to all pages and components.

styles/variables.css

This file defines custom CSS variables for things like colors, fonts, spacing, and themes.

next.config.js

This file is used to configure Next.js settings, such as custom redirects, rewrites, environment variables, and image optimizations.

package.json

This file contains metadata about the project, such as project name, version, dependencies, and scripts.

README.md

This file serves as project documentation, providing instructions on how to set up and run the application.