在上一节我们完成了 Next.js 的环境搭建，接下来让我们 Next.js 项目的结构。初学者打开项目往往会被众多文件夹和文件吓到——“这是干嘛的？我到底需要哪些，”别担心，下面这份结构图和说明将方便你理清思路。按理说，

项目结构概览

my-nextjs-app/
├── app/ # App Router
│ ├── / # 路由组
│ │ ├── login/
│ │ │ └── page.tsx
│ │ └── register/
│ │ └── page.tsx
│ ├── api/ # API 路由
│ │ └── users/
│ │ └── route.ts
│ ├── blog/
│ │ ├── /
│ │ │ └── page.tsx
│ │ └── page.tsx
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页
│ ├── loading.tsx # 加载状态 UI
│ ├── error.tsx # 错误处理 UI
│ ├── not-found.tsx # 404 页面 UI
│ └── globals.css # 全局样式
├── components/ # 可复用组件
│   ├── ui/ # 基础 UI 组件
│   └── layout/ # 布局组件
├── lib/ # 工具函数、API 客户端、常量等辅助代码
├── hooks/ # 自定义 React Hooks
├── types/ # TypeScript 类型声明
├── public/ # 静态资源
├── styles/ # 可选样式文件夹
├─ .env.local # 环境变量文件
├─ .eslintrc.json # ESLint 配置
├─ .gitignore # Git 忽略列表
├─ next.config.js # Next.js 配置文件
├─ package.json # npm 包管理文件
├─ tsconfig.json # TypeScript 编译配置
└─ README.md # 项目说明文档

主要目录详解

.app 目录 - App Router

app/ 是 Next.js 推荐的新路由程序。基于 React Server Components。大部分页面与路由都放在这里是你日常开发的主战场。

文件表格

示例结构

 app /
/
about /
page .tsx // /about
layout .tsx // 营销共享布局
page .tsx // /
/
account /
page .tsx // /account
layout .tsx // 商店共享布局
products /
/
page .tsx // 动态段 `/products/:id`
page .tsx // `/products`
api /
users /
route .ts // `/api/users`
layout .tsx // 根布局
page .tsx // 首页
/>

当同一段 UI 在多个页面重复出现时把它抽取成一个组件放在这里让代码更易维护。因为项目增大，一个良好的组件层级能极大提高开发效率。

 components /
ui / // 基础 UI 元素
Button .tsx
Input .tsx
Modal .tsx
layout / // 布局相关
Header .tsx
Footer .tsx
features / // 功能特定组件，如 UserProfile、ProductCard 等
UserProfile .tsx
forms /
LoginForm .
/>

把不属于业务逻辑但被多处调用的通用代码集中放在这里例如格式化工具、API 封装或常量定义。老实说，这样可以避免代码重复，而且更易测试与维护。

 lib /
utils /
format .
validation .
helpers .
api /
client .
users .
constants .
/>

如果你发现某段状态逻辑需要在多个组件里复用，就把它封装为自定义 Hook 并存放在此处。例如身份验证 Hook、数据获取 Hook 或本地存储 Hook。

 hooks /
useAuth .
useData .
/>

图片、字体和 favicon 等静态资源放在此处。可直接通过 URL 引入，无需 import。例如这方面，

 public /
images /
logo.png
fonts /
custom-font.wfop
favicon.ico
/>

图片调整、安全重定向及环境变量等全局配置都写在此处。下面给出一个典型示例：

 /** @type {import.NextConfig} */
const nextConfig = {
reactStrictMode : true,swcMinify : true。// 图片调整配置 images : {
domains :,formats :
},env : {
CUSTOM_KEY : process.env.CUSTOM_KEY,},async redirects { return }
}
module.exports = nextConfig;
/>

TypeScript 的编译选项集中管理，包括方法别名和 JSX 保留等设置：

 {
"compilerOptions": {
"target": "ES2017","lib":,"allowJs": true,"skipLibCheck": true,"strict": true,"forceConsistentCasingInFileNames": true。"noEmit": true,"esModuleInterop": true,"module": "esnext","moduleResolution":"bundler",...
},...
}
/>

•  – 将功能相近但 URL 不同的页面归类，提高可读性，而不改变访问方法。怎么说呢，例如将所有营销页放入 `` 文件夹。

• • 例如：/blog//page.jsx 可以匹配 /blog/a/b/c。'

  痛点这方面，很多人遇到过 “如何让同一段代码既能在首页又能在详情页使用？” 的困惑 —— 把共用的渲染逻辑抽成子组件。再配合 useRouter 获取动态参数，即可解决。'

  diff

  痛点新手经常被 “为什么要使用 app/layout 和 app/page？” 所困惑，实际是为了实现 "SSR + CSR 混合渲染"`。理解这一点后你就能顺利搭建层级布局而不会出现重叠。

  ---

  痛点不熟悉 layout。loading,error,not-found 等特殊文件，很容易误认为它们是普通页面而导致错误跳转。

  ---

  痛点忘记把 .env.local 加进 .gitignore造成敏感信息泄露。