🌟 We are Open Source! Check out our repository on GitHub

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
      • dashboard
        • page.tsx
        • layout.tsx
        • loading.tsx
        • error.tsx
    • components
      • Navbar.tsx
      • Footer.tsx
    • hooks
      • useAuth.ts
      • useFetch.ts
    • lib
      • api.ts
      • auth.ts
    • styles
      • globals.css
      • variables.css
    • assets
    • providers
      • ThemeProvider.tsx
      • AuthProvider.tsx
    • middleware.ts
  • prisma
    • schema.prisma
    • migrations
  • test
    • __mocks__
    • components
    • pages
  • .env
  • .eslintrc.json
  • .prettierrc
  • next.config.js
  • tsconfig.json
  • 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.

app/dashboard

This folder represents a nested route (/dashboard).

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/hooks

This folder is used to store custom React hooks, which encapsulate logic that can be reused across components.

hooks/useAuth.ts

This hook manages user authentication

hooks/useFetch.ts

A reusable data fetching hook that helps manage API requests efficiently.

src/lib

This folder contains helper functions, API utilities, and configuration files.

lib/api.ts

Handles API requests to backend services.

lib/auth.ts

Manages authentication logic, including token management and user sessions.

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.

src/assets

This folder contains images, fonts, and other static assets.

src/providers

This folder contains React context providers (e.g., ThemeProvider, AuthProvider) that manage global state and data.

src/middleware.ts

This file is used to define middleware logic for authentication, security, and redirects.

src/prisma

This folder contains Prisma ORM schema and database migration files for database management.

tests

This folder contains unit tests, integration tests, and mock data for testing the application.

tests/__mocks__/

This folder contains mock data and utilities for testing purposes.

tests/components/

This folder contains unit tests for React components and UI elements.

tests/pages/

This folder contains integration tests for Next.js pages and routes.

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.