--- theme: smartblue --- **点赞 + 关注 + 收藏 = 学会了** # 本文简介 Next.js 是一个基于 React 的开源全栈框架，它可以帮你快速创建全栈应用（前后端通吃）。 * Next.js官网： * Next.js仓库： Next.js 主要用于构建高性能、动态、全栈的Web应用。它的核心优势在于可以提供服务器端渲染（SSR）、静态网站生成（SSG）、自动代码拆分、热更新等功能，极大地提高了开发效率和用户体验。由于它封装了很多常见的开发任务，开发者无需关注低级的配置和优化，能够专注于应用的开发。在 GitHub 上，Next.js 已经有 **129k start** 了（在写本文时的数据），用它来搭建你的项目完全不需要担心。对于 React 开发者来说，学习 Next.js 是一个不错的选择，它能让你低成本地成为全栈工程师。我打算开个新坑介绍一下 Next.js 的用法。本文是 [《Next.js 中文教程》](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzAwMjU3ODU5Ng==\&action=getalbum\&album_id=3846015608148213760#wechat_redirect) 的第一篇，先介绍一下 Next.js 的基础用法，通过本文可以让你快速了解 Next.js 以及看看这个框架适不适合你。 # 安装 Next.js 在终端运行下面这条命令就可以开始创建 Next.js 项目。 ```bash npx create-next-app@latest ``` 运行完这条命令后，会让你输入项目名称以及项目需要用到的相关依赖和配置，按需选择即可。 ![01.jpg](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e4a8832b415346dda916924ac42206d8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=wG3w%2FqzNc4ZMIKRa6a07XNCl0Co%3D) # 运行项目在终端进入刚刚创建好的 Next.js 项目。根据项目中 `package.json` 文件里的 `scripts` 可以得知，要在开发环境运行项目，只需要在终端输入这条命令。 ```bash npm run dev ``` ![02.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b977809e19d04299bb5a5612a786ceda~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=kpi8Se0kkDVCTxEEBK4eWhw91Gs%3D) 运行成功后，在浏览器访问 `http://localhost:3000` 就可以看到上面这个界面了。如果你不想项目运行在 `3000` 端口，可以在上面的命令中加上一个 `-- -p`，后面跟着端口号。 ```bash npm run dev -- -p 8888 ``` 又或者用 `next` 运行 ```bash next dev -p 8888 ``` 在代码编辑器打开刚刚创建好的项目。插播一句，我正在使用 Trae 这款 AI IDE，是字节旗下的一款 AI 编辑器，暂时所有 AI 相关的功能都是免费使用的，量大管饱。回到编辑器，可以看到刚刚创建的这个项目包含以下文件。 ![03.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8939eb48fbc24cf2b46efc878c85459c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=2mCuBK4JjhdlCpy%2F8zZlNUuysJY%3D) | 文件/文件夹 | 说明 | | ------------------- | ----------------------------------------------------------------------- | | .next/ | 是运行 `nom run dev` 后产生的，是 Next.js 构建生成的文件夹，用于存放编译后的文件。 | | app/ | 这个文件夹是我们工作的地方，用于存放页面、布局（layout.js）、模板、加载状态（loading.js）、错误处理（error.js）等。 | | node\_modules/ | 存储项目依赖的所有 npm 包。 | | public/ | 存放静态资源的地方，比如图片、字体等。 | | .gitignore | 指定 Git 版本控制忽略的文件/目录。 | | jsconfig.json | 配置 JavaScript 项目的路径别名和编译选项，增强编辑器（如 VS Code）的智能提示。 | | next.config.mjs | Next.js 的配置文件（使用 ES Modules 语法），用于自定义构建行为。例如，修改 Webpack 配置、添加环境变量等。 | | package-lock.json | 锁定依赖版本号，确保团队协作或部署时安装的依赖版本完全一致（由 npm 自动生成，不要手动修改）。 | | package.json | 定义项目元数据和依赖项。 | | postcss.config.mjs | PostCSS 的配置文件（与 Tailwind CSS 配合使用），定义 CSS 处理插件。 | | README.md | 项目说明文档，通常包含如何运行、构建、部署的指南。 | | tailwind.config.mjs | Tailwind CSS 的配置文件。 | # 创建基础的路由前面我们访问 `http://localhost:3000` 看到的主页内容，是在创建 Next.js 项目后自动给我们创建好的内容，这个页面位于 `app/page.js`。 ![04.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1fd1f0df3b784958b057fe95021e0b5d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=%2F0qikdVXjYDti%2B%2BPgdaUSd29mS0%3D) 在 `app/` 目录里包含了 `favicon.ico` 文件，这是网站的图标文件。`globals.css` 是全局的样式文件。`layout.js` 是全局布局文件。`page.js` 是这个网站的根页面，我们访问 `http://localhost:3000` 不加其他路径时就会展示 `app/page.js` 里的内容。试试修改一下 `app/page.js` 的代码。 ```js // app/page.js export default function Home() { return

雷猴

; } ``` 把代码精简后，回到浏览器刷新一下页面可以看到下图的内容。 ![05.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f020680ca5af41fb84853712a3d5a39f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=a5R32VPJs7F6nsRW6oU4g3O0Kwk%3D) 在普通的 React 项目中我们配置路由通常需要下载额外的工具来实现，比如 react-router。在 Next.js 配置路由地址非常简单，Next.js 是通过文件夹来定义路由的。`app/` 目录就是项目的根路由，在前面我们通过 App Router 方式创建项目，在这套规则下，`app/` 目录里的任何文件夹下的 `page.js` 都是页面文件。所以当我们访问 `http://localhost:3000` 时，就会读取 `app/page.js`。那么，如果我们想创建一个 `about` 页面，通过 `http://localhost:3000/about` 访问它，应该怎么做呢？只需在 `app/` 目录下创建一个 `about/` 文件夹，然后在里面创建一个 `page.js` 文件即可。 ![06.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/73d624f940bb4cc3ad299c16e82f795d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=%2Fd9HkfwLRMPXrynQZBSXKXeLwNo%3D) 在 `page.js` 里编写页面内容，然后在浏览器访问 `http://localhost:3000/about` ![07.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/64472554279c485cb216f9130e2efd66~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=4l20d2CFw7CtAaxcOmAZoWltV5k%3D) ```js // app/about/page.js export default function About() { return

这是 about 页面

; } ``` 很简单吧。总结一下，`app/` 目录下的文件夹代表你在 URL 路径中看到的“名称”，而 `page.js` 文件则提供页面要展示的内容。 `page` 这个文件名是 Next.js 的保留关键文件名，页面内容必须是以这个名字来命名。如果你在 `about/` 目录下创建其他名字的 `.js` 文件则被认为是组件，而不是路由对应的页面。如果你想在 `about/` 目录中添加更多的潜逃路由，比如 `localhost:3000/about/author` 和 `localhost:3000/about/projects `，按照之前的逻辑，只需在 `app/about/` 目录下创建 `author` 和 `projects` 两个文件夹，并分别在它们里创建自己的 `page.js` 文件即可。 ![08.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/132cd46ca1f64111a61b3b2752ba60ec~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=z3S7DXsew65vXwBIczQTPibwBnI%3D) # 创建动态路由前面创建的是基础路由，每个页面一个路由目录和 `page.js` 文件。但有些时候是一个页面的布局需要重复使用，但内容不一样。比如博客页面，布局都是一样的，只是文章内容不一样，这种情况如果要给每篇博客都手动创建一个路由和对应的文件，博客内容多了就很难维护。应对这种情况，我们可以使用动态路由。例如 `blogs/[id]`，这里的 `[id]` 就是博客的 `id`，每篇博客都有自己的 `id`，这个 `id` 值是动态的。而前面那段 `blogs` 就是博客固定的页面。这种情况只需在文件夹中使用方括号给文件命名即可。 ![09.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7cfee568e44b40a3ae81a773b4a39738~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=yiZI8na0Sjjd%2BjYlab4vfDX2Okc%3D) 然后在浏览器访问 `localhost:3000/blogs/123` 就能访问到 `app/blogs/[id]/page.js` 这个文件的内容了。这个 URL 的 “123” 可以是任意内容，这是你设置的博客id。在 `app/blogs/[id]/page.js` 这个文件里如果想拿到 URL 上的 `id`，可以在 `params` 参数里拿到。`params` 对象用于捕获 Next.js 中的动态路由参数。比如下面这个情况，`params.id` 是 URL 动态路由的部份。 ![10.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9783a3d1b1314ba78e0260e759a9d97a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=ipXTQbXjaT8Lu5wc%2Bg9a8IBEoa8%3D) ```js // app/blogs/[id]/page.js export default function Blogs({params}) { return

博客id：{params.id}

; } ``` 上面这个例子主要想展示一下怎么获取到这个动态id，在真实项目中通常是将获取到的动态id通过ajax的方式发送给后端，后端拿着id去数据库里查对应的数据再返回给前端渲染。比如这么做： ```js // app/blogs/[id]/page.js export default async function Blogs({params}) { const res = await fetch(`/api/blogs/${params.id}`); const data = await res.json(); return

博客内容：{data}

; } ``` `app/blogs/[id]` 这个 `[id]` 文件夹不一定要这么命名的，你也可以将其改成 `[blogId]`。在其 `page.js` 文件中如果要访问对应的动态地址内容，`params` 参数里要通过 `params.blogId` 才能读取，也就是说，想获取到动态内容，`params` 后面就需要跟着对应的文件夹名称。综上所述，动态路由非常适合数据需要经常变化，但页面布局和样式保持一致的情况。 # 布局了解完 Next.js 的路由基础使用方法后，再看看 Next.js 的布局文件。在 `app/` 目录下还有一个 `layout.js` 文件。 ![11.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/75d86705862d401cbbf68bd7f1e53149~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=d65OO2akjBcLeEIBn9FUU7iBLoY%3D) Next.js 的布局文件（layout.js）给项目中需要使用相同布局UI的页面提供一个共享UI的方式。 `app/layout.js` 是项目的根布局文件，它是在创建项目时就已经自动生成好的。它写好了一些布局相关的元素和配置。 ![12.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8cf280bc0c184271876215eda4cc9512~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=I7OliZ4U2a49QekGifTTvkONmLU%3D) 在这个文件的布局代码中可以看到有个 `children` 参数，这个参数是 React 的组件基础知识了，类似于 Vue 的插槽那样，可以在组件里渲染子组件。不了解这个知识点的工友可以看看 [『React』认识组件](https://mp.weixin.qq.com/s/h8TplOiGqN9Pcf_CZ8qfsA) 这篇文章的介绍。如果你的网站所有页面都有页头、页脚或者其他的一些固定元素，可以在 `children` 外面写一些布局代码。比如这样。 ```js // app/layout.js // 省略部分代码 export default function RootLayout({ children }) { return (

这是页头

{children}

); } ``` 此时，访问首页是这样的。 ![13.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ae82f6df107544e7bbc63e1730eaadfa~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=pCW2YCXFw1TXwG1MjsFVg4qTaQA%3D) 访问 `http://localhost:3000/about` 是这样的。 ![14.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4b9010b668fd4efba2dd1d9e0eafd674~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=NsXU%2FdlOx88LxGgAclqCxj5ulzA%3D) 布局文件适用于上面这种多个页面需要统一风格的情况。 # 创建API 在现代项目中流行前后端分离的开发方式，简单来说，前端负责页面呈现的工作，后端负责处理业务逻辑以及和数据库交互。前端需要让页面加载动态数据，通过接口（API）的方式和后端交互。在 Next.js 中想写 API接口，需要在 `app/` 目录下创建一个 `api/` 文件夹，在这个文件夹下可以再创建其他文件夹来规划不同接口的名字。比如我创建一个博客相关的接口 `app/api/blogs/route.js`，这个接口可以创建 RESTful 规范的各种请求方法。 ![15.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d8a113a6b75b46ac8e2ce2476b5affd0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=GGH9I8lUWzKte%2BL6Hy8owXb1ZNo%3D) 我先创建一个 `GET` 方法用来查询所有博客。 ```js // app/api/blogs/route.js import { NextResponse } from "next/server" // 获取博客列表 export async function GET() { const data = { total: 2, list: [ { id: 1, title: "第一篇博客", content: "第一篇博客的内容", createTime: "2025-01-01", updateTime: "2021-01-01", }, { id: 2, title: "第二篇博客", content: "第二篇博客的内容", createTime: "2021-01-01", updateTime: "2021-01-01", } ] }; return NextResponse.json(data); } ``` 直接在 `app/api/blogs/route.js` 文件里写一个名为 `GET` 的方法，对应的请求方式就是 `GET` 了，非常简单。这个例子的数据是我写死的，本文的重点是快速体验 Next.js，不打算写数据库相关的操作。在 Postman 或者浏览器访问 `http://localhost:3000/api/blogs` 可以看到这个接口返回的数据。 ![16.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0eecdc158ddf4747a9678c6e3c718759~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b636IKy5aSE5Li75Lu7:q75.awebp?rk3s=f64ab15b&x-expires=1759797684&x-signature=0gbQ%2BnfSbwMByVIAjBmhRpVNyL0%3D) 如果想试试 `POST` 等其他的请求方式，同样的在 `route.js` 文件里创建 `POST` 方法即可。 *** 以上就是本文的全部内容啦，想了解更多 Next.js 用法的工友欢迎关注 [👉《Next.js 中文教程》](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzAwMjU3ODU5Ng==\&action=getalbum\&album_id=3846015608148213760#wechat_redirect)