Project structure

This page explains the structure of a typical Next.js project.

Files

package.json: Contains project dependencies and scripts
- Dependencies: next@15, react@19, react-dom@19 - These are the core packages required to run a Next.js application
- Optional dependencies: TypeScript for type safety, Tailwind CSS for styling, ESLint for code quality
- Scripts: dev (runs development server with hot reloading), build (creates production bundle), start (runs production server), lint (checks code quality)
Configuration files:
- next.config.ts: Customizes Next.js behavior, including routing, image optimization, and environment variables
- tsconfig.json: Defines TypeScript compiler options and project settings for type checking
- eslintrc.json: Configures code style rules and patterns that ESLint will enforce
- tailwind.config.ts and postcss.config.mjs: Define custom styles, themes, and PostCSS plugins for Tailwind CSS
Supporting files:
- package-lock.json: Ensures consistent dependency versions across all installations of your project
- .gitignore: Tells Git which files and directories to ignore when tracking changes
- README.md: Provides project documentation, setup instructions, and other important information
- next-env.d.ts: Contains TypeScript type definitions specific to Next.js features and APIs

.next/: Contains the compiled application
- Created automatically when running development or build commands
- Includes optimized JavaScript bundles, static pages, and server components
- Excluded from version control
node_modules/: Houses project dependencies
- Contains all installed npm packages and their dependencies
- Generated automatically when running npm install
- Excluded from version control
public/: Static asset directory
- Stores files that need to be publicly accessible like images, fonts, and SVGs
- Files are served directly at the root path (e.g., /image.png)
src/: Application source code
- app/: App Router directory (primary development area)
  - favicon.ico: The icon displayed in browser tabs and bookmarks for your site
  - globals.css: Contains CSS styles that apply to every page in your application
  - layout.tsx: Defines the common UI elements (like navigation or footer) that wrap all pages
  - page.tsx: The default home page component that renders at the root URL (/) of your application. This file defines what users see when they first visit your site.

When you run npm run dev, Next.js:

Loads the RootLayout component from layout.tsx, which provides the common structure for all pages
Renders the Home component from page.tsx within the layout when accessing the root URL, displaying your homepage content