慧见

NextJS最佳实践项目结构

—

由

慧见
于 
my-nextjs-app/
├── public/                     # 公共静态资源（图片、favicon、robots.txt 等），文件路径直接映射到根路径
│   ├── images/
│   └── favicon.ico
├── src/                        # 源码目录，便于区分项目源码与配置文件
│   ├── app/                    # Next.js App Router 目录（核心路由部分）
│   │   ├── layout.js           # 根布局组件（全局布局、头部、页脚等，可在此引入全局样式）
│   │   ├── error.js            # 全局错误处理组件（可选）
│   │   ├── loading.js          # 全局加载状态组件（可选）
│   │   ├── page.js             # 根页面（首页）
│   │   ├── about/              # 静态页面示例：关于页面
│   │   │   └── page.js         # 关于页面组件
│   │   ├── blog/               # 模块化页面示例：博客模块
│   │   │   ├── layout.js       # 博客区域局部布局（仅作用于博客页面）
│   │   │   ├── page.js         # 博客列表页
│   │   │   └── [slug]/         # 动态路由目录，用于处理博客文章详情
│   │   │       └── page.js     # 博客详情页（根据 URL 参数获取对应内容）
│   │   └── ...                 # 其他路由目录或页面
│   ├── components/             # 全局可复用组件（UI 组件、导航、按钮等）
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── ... 
│   ├── lib/                    # 辅助函数、API 客户端、数据处理逻辑等
│   │   └── api.js
│   ├── hooks/                  # 自定义 React Hook
│   │   └── useAuth.js
│   ├── contexts/               # 全局状态或上下文管理（如 React Context、Redux 等）
│   │   └── AuthContext.jsx
│   ├── styles/                 # 全局样式和 CSS 模块
│   │   ├── globals.css         # 全局样式（例如 Tailwind 的引入、重置样式）
│   │   └── ... 
│   └── utils/                  # 工具函数集合（日期处理、格式化函数等）
│       └── formatDate.js
├── .env                        # 环境变量文件（可选，根据需求配置）
├── next.config.js              # Next.js 配置文件
├── package.json
├── tailwind.config.js          # Tailwind CSS 配置文件（如果使用 Tailwind）
└── README.md

结构说明

  • public/
    用于存放不会经过 Webpack 处理的静态资源。所有资源都可以通过根路径直接访问，如 /images/logo.png。
  • src/
    将所有源码放在 src 下，可以使项目结构更清晰，将业务代码与配置文件区分开来。
  • src/app/
    • 这是 App Router 的核心目录，基于文件系统自动生成路由。
    • layout.js：定义全局布局，通常包含头部、页脚、全局样式引入等。
    • error.js、loading.js：用于全局错误和加载状态的处理（可选）。
    • page.js：根页面，对应网站首页。
    • 其它目录（如 about/、blog/）对应不同的页面或模块，其中动态路由文件夹使用中括号，如 [slug]。
  • src/components/
    存放项目中常用的、可复用的 UI 组件，如导航栏、按钮、卡片等。这样有助于组件复用和项目维护。
  • src/lib/ 和 src/utils/
    存放辅助函数、API 请求封装、数据处理逻辑等。根据项目规模可以灵活拆分，保持业务逻辑和视图组件的分离。
  • src/hooks/ 和 src/contexts/
    分别用于存放自定义 Hook 和全局状态或上下文管理组件，这有助于组织项目中的逻辑代码。
  • src/styles/
    存放全局样式文件（如 globals.css），并且可以包含针对特定组件或页面的 CSS 模块文件。
  • next.config.js 和 tailwind.config.js
    配置文件，前者用于 Next.js 的全局配置，后者用于 Tailwind CSS 的定制（如扩展断点、颜色等）。

这种结构能够帮助我们清晰地组织项目代码，使不同功能模块分离，方便协作和维护，同时充分利用 Next.js App Router 的特性（如服务器组件、嵌套路由和布局）以及 Tailwind CSS 的响应式设计能力。