Next.js项目目录结构详解：从入门到精通的最佳实践指南

Next.js项目目录结构详解：从入门到精通的最佳实践指南

本文全面解析Next.js项目目录结构，深入讲解每个核心目录的作用和最佳实践，帮助开发者构建高效、可维护的Next.js应用。

一、Next.js目录结构全景图

一个标准的Next.js项目包含以下核心目录和文件：

my-next-app/
├── .next/# 构建输出目录（自动生成）
├── public/# 静态资源目录
├── src/# 源代码目录（推荐使用）
│├── app/# App Router（Next.js 13+）
│├── pages/# Pages Router（传统路由）
│├── components/# 通用组件
│├── lib/# 工具函数和库
│├── hooks/# 自定义Hooks
│├── contexts/# Context API
│├── styles/# 全局样式
│├── types/# TypeScript类型定义
│└── utils/# 辅助函数
├── node_modules/# 依赖包目录
├── .env.local# 本地环境变量
├── .eslintrc.json# ESLint配置
├── .gitignore# Git忽略配置
├── next.config.js# Next.js配置文件
├── package.json# 项目依赖和脚本
├── tsconfig.json# TypeScript配置
└── README.md# 项目文档

二、核心目录详解

2.1 public/ - 静态资源目录

作用：存放无需构建处理的静态文件

public/
├── favicon.ico# 网站图标
├── robots.txt# 搜索引擎爬虫规则
├── sitemap.xml# 网站地图
└── images/# 图片资源
├── logo.png
└── banner.jpg

最佳实践：

1. 使用子目录分类管理资源（images/, fonts/, docs/）
2. 通过绝对路径访问：/images/logo.png
3. 不要存放需要构建处理的脚本和样式
4. 对于需要优化的图片，考虑存放在src/assets

2.2 src/ - 源代码目录（推荐）

作用：存放所有源代码文件，使根目录更整洁

src/
├── app/# App Router (Next.js 13+)
├── pages/# Pages Router
├── components/# 可复用UI组件
├── lib/# 第三方库封装
├── hooks/# 自定义Hooks
├── contexts/# Context API
├── styles/# 全局样式
├── types/# TypeScript类型
└── utils/# 工具函数

最佳实践：

1. 使用src目录所有源代码文件
2. 通过jsconfig.json或tsconfig.json配置路径别名：

{
   
   
"compilerOptions": {
   
   
"baseUrl": ".",
"paths": {
   
   
"@/*": ["src/*"]
}
}
}

3. 在导入时使用别名：import Button from '@/components/Button'

2.3 app/ - App Router目录（Next.js 13+）

作用：基于React Server Components的新路由系统

src/app/
├── layout.jsx# 根布局组件
├── page.jsx# 首页组件
├── dashboard/# 仪表板路由
│├── layout.jsx# 仪表板布局
│├── page.jsx# 仪表板页面
│└── settings/# 设置子路由
│└── page.jsx
├── blog/
│├── [slug]/# 动态路由
││└── page.jsx
│└── layout.jsx
└── api/# API路由
└── hello/
└── route.js

文件命名约定：

• layout.jsx - 布局组件
• page.jsx - 页面组件
• loading.jsx - 加载状态
• error.jsx - 错误边界
• not-found.jsx - 404页面
• route.js - API路由处理程序

最佳实践：

1. 每个路由目录必须有page.jsx文件
2. 使用嵌套布局组织页面结构
3. 对于数据获取：