Overview | Notion

Project Setup

Initialization:

npx create-next-app@latest

Recommended Options:

Option	Selection	Default
TypeScript	Yes	Yes
ESLint	Yes	No
Tailwind CSS	Yes	Yes
`src/` directory	Yes	No
App Router	Yes	Yes
Turbopack (`next dev`)	Yes	Yes
*Custom import alias (`@/`)**	No	No

File Structure

my-app/
├── public/                   # Static assets (images, fonts, icons)
├── node_modules/             # Project dependencies installed via npm
├── src/                      # Application source code
│   └── app/                  # Next.js App Router structure
│       ├── layout.tsx        # Root layout component
│       └── page.tsx          # Entry page component
├── eslint.config.mjs         # ESLint configuration (Flat Config)
├── postcss.config.mjs        # PostCSS configuration for Tailwind CSS
├── next.config.ts            # Next.js custom configuration (routing, images)
├── tsconfig.json             # TypeScript compiler options
├── package.json              # Dependencies, scripts, project metadata
├── package-lock.json         # Locked dependency versions
├── next-env.d.ts             # Type declarations for Next.js
├── README.md                 # Project documentation and description
└── .gitignore                # Specifies intentionally untracked files

Core Dependencies

Package	Purpose
`next`	React Framework
`react`	UI Library
`react-dom`	DOM Renderer
`tailwindcss`	Utility-first CSS
`eslint`	Code Linting
`typescript`	Static Typing

Configuration Highlights

next.config.ts: Routing rules, image optimization, experimental features.
tsconfig.json: Compiler options, strict mode, and path aliases.
eslint.config.mjs: ESLint rules (flat config), Next.js recommended guidelines.
postcss.config.mjs: PostCSS configuration for Tailwind CSS integration.