My Tech Blog

用最新的 pnpm dlx create-next-app@latest --typescript . 生成 Nextjs 项目, 发现 Nextjs 15 在目录结构上多了一些新特性, 这里记录一下.

目录结构变化

Next.js 15 默认生成的项目目录结构如下：

my-next-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── node_modules/
├── package.json
├── next.config.js
├── tsconfig.json
├── .env.local
├── .gitignore
└── README.md

主要变化

1. app/ 目录

app/ 目录已成为默认推荐的路由目录，替代了传统的 pages/ 目录。
支持嵌套路由、布局（layout）、模板（template）、loading、error、not-found 等文件。
每个子目录都可以有自己的 layout.tsx，实现局部布局复用。

2. globals.css 位置

全局样式文件 globals.css 默认放在 app/ 目录下，便于与路由结构统一管理。

3. next.config.js 默认开启新特性

默认启用 appDir，支持 React Server Components（RSC）。
支持 Edge Runtime、Middleware、Image Optimization 等新特性。

4. TypeScript 支持

默认生成 tsconfig.json，项目即开即用 TypeScript。
所有模板文件均为 .tsx 后缀。

5. 环境变量文件

默认生成 .env.local，便于本地环境变量管理。

新特性简述

1. React Server Components (RSC)

组件默认在服务端渲染，提升性能和安全性。
通过 use client 指令声明客户端组件。

2. Layouts & Templates

layout.tsx 用于定义页面布局，可嵌套。
template.tsx 用于动态生成页面模板。

3. Loading、Error、Not-found

loading.tsx：页面加载时的占位内容。
error.tsx：页面级错误处理。
not-found.tsx：404 页面自定义。

4. 新的路由与数据获取方式

支持 generateStaticParams、generateMetadata 等新 API。
支持并发数据获取、流式渲染。

5. Assets 和静态资源

public/ 目录依然用于存放静态资源。
支持更灵活的图片优化和 CDN 配置。

App Router 项目结构

App Router 相比 Pages Router 的进步

1. 更强的布局能力（Layouts）

Pages Router：只有 _app.tsx 和 _document.tsx，全局布局不易做嵌套，页面间复用布局很麻烦。 App Router：支持任意层级嵌套路由布局，每个路由分支都可以有自己的 layout.tsx，灵活实现多级嵌套和复用。

2. React Server Components（RSC）

App Router：原生支持 React Server Components，可以让页面和组件在服务端渲染，提升性能、减少前端 bundle 体积。 Pages Router：只能用传统的 SSR/SSG，无法用 RSC。

3. 更灵活的数据获取方式

App Router：支持 async 组件、fetch 直接写在组件里，天然支持并发和流式渲染。 Pages Router：只能用 getServerSideProps、getStaticProps 等 API，写法受限且不够灵活。

4. 更现代的路由和文件结构

App Router：路由和文件夹结构一一对应，支持嵌套、分区、分组（如 (group) 文件夹）、动态路由等，组织大型项目更清晰。 Pages Router：只能一层一层地写页面，嵌套和分组不直观。

5. 更好的错误处理和 loading 体验

App Router：每个路由分支都可以有自己的 error.tsx 和 loading.tsx，局部错误和加载状态处理更优雅。 Pages Router：只能全局处理错误和 loading，粒度较粗。

6. 更好的并发和流式渲染支持

App Router：天然支持 React 18 的并发特性和流式渲染（Streaming），用户体验更好。 Pages Router：不支持这些新特性。

为什么要推 App Router？

顺应 React 18 新特性：如 Server Components、并发、Suspense 等，App Router 能更好地利用这些能力。
提升大型项目开发体验：多级布局、分区、分组、局部 loading/error 处理，让大型项目结构更清晰、可维护性更高。
性能优化：更灵活的数据获取和服务端渲染方式，能显著提升页面加载速度和 SEO。
更现代的开发范式：让 Next.js 更贴近 React 官方推荐的最佳实践。

参考文档：Next.js 官方文档

Nextjs 15+ 新特征