光速体验一下 Next.js

德育处主任
0 阅读8分钟

点赞 + 关注 + 收藏 = 学会了

本文简介

Next.js 是一个基于 React 的开源全栈框架，它可以帮你快速创建全栈应用（前后端通吃）。

Next.js 主要用于构建高性能、动态、全栈的Web应用。它的核心优势在于可以提供服务器端渲染（SSR）、静态网站生成（SSG）、自动代码拆分、热更新等功能，极大地提高了开发效率和用户体验。由于它封装了很多常见的开发任务，开发者无需关注低级的配置和优化，能够专注于应用的开发。

在 GitHub 上，Next.js 已经有 129k start 了（在写本文时的数据），用它来搭建你的项目完全不需要担心。

对于 React 开发者来说，学习 Next.js 是一个不错的选择，它能让你低成本地成为全栈工程师。

我打算开个新坑介绍一下 Next.js 的用法。本文是 《Next.js 中文教程》 的第一篇，先介绍一下 Next.js 的基础用法，通过本文可以让你快速了解 Next.js 以及看看这个框架适不适合你。

安装 Next.js

在终端运行下面这条命令就可以开始创建 Next.js 项目。

npx create-next-app@latest

运行完这条命令后，会让你输入项目名称以及项目需要用到的相关依赖和配置，按需选择即可。

01.jpg

运行项目

在终端进入刚刚创建好的 Next.js 项目。

根据项目中 package.json 文件里的 scripts 可以得知，要在开发环境运行项目，只需要在终端输入这条命令。

npm run dev

02.png

运行成功后，在浏览器访问 http://localhost:3000 就可以看到上面这个界面了。

如果你不想项目运行在 3000 端口，可以在上面的命令中加上一个 -- -p，后面跟着端口号。

npm run dev -- -p 8888

又或者用 next 运行

next dev -p 8888

在代码编辑器打开刚刚创建好的项目。

插播一句，我正在使用 Trae 这款 AI IDE，是字节旗下的一款 AI 编辑器，暂时所有 AI 相关的功能都是免费使用的，量大管饱。

回到编辑器，可以看到刚刚创建的这个项目包含以下文件。

03.png

文件/文件夹说明
.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.mjsNext.js 的配置文件（使用 ES Modules 语法），用于自定义构建行为。例如，修改 Webpack 配置、添加环境变量等。
package-lock.json锁定依赖版本号，确保团队协作或部署时安装的依赖版本完全一致（由 npm 自动生成，不要手动修改）。
package.json定义项目元数据和依赖项。
postcss.config.mjsPostCSS 的配置文件（与 Tailwind CSS 配合使用），定义 CSS 处理插件。
README.md项目说明文档，通常包含如何运行、构建、部署的指南。
tailwind.config.mjsTailwind CSS 的配置文件。

创建基础的路由

前面我们访问 http://localhost:3000 看到的主页内容，是在创建 Next.js 项目后自动给我们创建好的内容，这个页面位于 app/page.js。

04.png

在 app/ 目录里包含了 favicon.ico 文件，这是网站的图标文件。globals.css 是全局的样式文件。layout.js 是全局布局文件。page.js 是这个网站的根页面，我们访问 http://localhost:3000 不加其他路径时就会展示 app/page.js 里的内容。

试试修改一下 app/page.js 的代码。

// app/page.js

export default function Home() {
  return <div>雷猴</div>;
}

把代码精简后，回到浏览器刷新一下页面可以看到下图的内容。

05.png

在普通的 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

在 page.js 里编写页面内容，然后在浏览器访问 http://localhost:3000/about

07.png

// app/about/page.js

export default function About() {
  return <div>这是 about 页面</div>;
}

很简单吧。

总结一下，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

创建动态路由

前面创建的是基础路由，每个页面一个路由目录和 page.js 文件。但有些时候是一个页面的布局需要重复使用，但内容不一样。比如博客页面，布局都是一样的，只是文章内容不一样，这种情况如果要给每篇博客都手动创建一个路由和对应的文件，博客内容多了就很难维护。

应对这种情况，我们可以使用动态路由。例如 blogs/[id]，这里的 [id] 就是博客的 id，每篇博客都有自己的 id，这个 id 值是动态的。而前面那段 blogs 就是博客固定的页面。

这种情况只需在文件夹中使用方括号给文件命名即可。

09.png

然后在浏览器访问 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

// app/blogs/[id]/page.js

export default function Blogs({params}) {
  return <div>博客id：{params.id}</div>;
}

上面这个例子主要想展示一下怎么获取到这个动态id，在真实项目中通常是将获取到的动态id通过ajax的方式发送给后端，后端拿着id去数据库里查对应的数据再返回给前端渲染。

比如这么做：

// 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 <div>博客内容：{data}</div>;
}

app/blogs/[id] 这个 [id] 文件夹不一定要这么命名的，你也可以将其改成 [blogId]。在其 page.js 文件中如果要访问对应的动态地址内容，params 参数里要通过 params.blogId 才能读取，也就是说，想获取到动态内容，params 后面就需要跟着对应的文件夹名称。

综上所述，动态路由非常适合数据需要经常变化，但页面布局和样式保持一致的情况。

布局

了解完 Next.js 的路由基础使用方法后，再看看 Next.js 的布局文件。

在 app/ 目录下还有一个 layout.js 文件。

11.png

Next.js 的布局文件（layout.js）给项目中需要使用相同布局UI的页面提供一个共享UI的方式。

app/layout.js 是项目的根布局文件，它是在创建项目时就已经自动生成好的。它写好了一些布局相关的元素和配置。

12.png

在这个文件的布局代码中可以看到有个 children 参数，这个参数是 React 的组件基础知识了，类似于 Vue 的插槽那样，可以在组件里渲染子组件。不了解这个知识点的工友可以看看 『React』认识组件 这篇文章的介绍。

如果你的网站所有页面都有页头、页脚或者其他的一些固定元素，可以在 children 外面写一些布局代码。

比如这样。

// app/layout.js

// 省略部分代码

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <header>这是页头</header>
        <div>{children}</div>
        <footer>这是页脚</footer>
      </body>
    </html>
  );
}

此时，访问首页是这样的。

13.png

访问 http://localhost:3000/about 是这样的。

14.png

布局文件适用于上面这种多个页面需要统一风格的情况。

创建API

在现代项目中流行前后端分离的开发方式，简单来说，前端负责页面呈现的工作，后端负责处理业务逻辑以及和数据库交互。前端需要让页面加载动态数据，通过接口（API）的方式和后端交互。

在 Next.js 中想写 API接口，需要在 app/ 目录下创建一个 api/ 文件夹，在这个文件夹下可以再创建其他文件夹来规划不同接口的名字。

比如我创建一个博客相关的接口 app/api/blogs/route.js，这个接口可以创建 RESTful 规范的各种请求方法。

15.png

我先创建一个 GET 方法用来查询所有博客。

// 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

如果想试试 POST 等其他的请求方式，同样的在 route.js 文件里创建 POST 方法即可。

以上就是本文的全部内容啦，想了解更多 Next.js 用法的工友欢迎关注 👉《Next.js 中文教程》

avatar
文章
阅读
粉丝