使用Next.js建立博客

本文将指导您使用 Next.js 构建一个静态博客框架，其设计和结构灵感源自 Jekyll。Jekyll 以其易于上手和高度可控性而闻名，本文旨在利用 Next.js 和 React 的优势，提供一种全新的静态博客构建方案。Next.js 基于文件系统，简化了静态网站的构建过程。

典型的 Jekyll 博客目录结构如下：

<code>.
├─── _posts/          ...Markdown 格式的博文
├─── _layouts/        ...不同页面的布局
├─── _includes/       ...可复用的组件
├─── index.md         ...主页
└─── config.yml       ...博客配置</code>

我们的框架将尽可能遵循此目录结构，以便于从 Jekyll 迁移博客，只需复用博文和配置即可。

如果您不熟悉 Jekyll，它是一个静态站点生成器，可以将纯文本转换为静态网站和博客。请参考 Jekyll 快速入门指南了解详情。

本文假设您具备 React 的基础知识。如果没有，请参考 React 入门指南。

安装

Next.js 基于 React 并使用 Node.js 编写。因此，在添加 Next.js、React 和 React-DOM 之前，需要先安装 npm。

<code>mkdir nextjs-blog && cd $_
npm init -y
npm install next react react-dom --save</code>

为了在命令行运行 Next.js 脚本，我们需要将 next 命令添加到 package.json 的 scripts 部分。

<code>"scripts": {
  "dev": "next"
}</code>

现在，第一次运行 npm run dev 命令，看看会发生什么。

<code>$ npm run dev
> [email protected] dev /~user/nextjs-blog
> next

ready - started server on https://www.php.cn/link/4a914e5c38172ae9b61780ffbd0b2f90
Error: > Couldn't find a `pages` directory. Please create one under the project root</code>

编译器提示缺少项目根目录下的 pages 目录。我们将在下一节学习 pages 的概念。

pages 概念

Next.js 基于 pages 概念构建。每个页面都是一个 React 组件（.js 或 .jsx），根据文件名映射到路由。例如：

<code>                            路由
----                            -----
/pages/about.js                 /about
/pages/projects/work1.js        /projects/work1
/pages/index.js                 /</code>

让我们在项目根目录下创建 pages 目录，并用基本的 React 组件填充第一个页面 index.js。

<code>// pages/index.js
export default function Blog() {
  return <div>欢迎来到 Next.js 博客</div>
}</code>

再次运行 npm run dev 启动服务器，并在浏览器中访问 https://www.php.cn/link/4a914e5c38172ae9b61780ffbd0b2f90 查看您的博客。

开箱即用，我们获得：

• 热重载，无需为每次代码更改刷新浏览器。
• /pages/** 目录下所有页面的静态生成。
• /public/** 目录中资源的静态文件服务。
• 404 错误页面。

访问 localhost 上的任意路径以查看 404 页面的实际效果。如果您需要自定义 404 页面，请参考 Next.js 文档。

动态页面

静态路由页面用于构建主页、关于页面等。但是，为了动态构建所有博文，我们将使用 Next.js 的动态路由功能。例如：

<code>                        路由
----                        -----
/pages/posts/[slug].js      /posts/1
                            /posts/abc
                            /posts/hello-world</code>

任何路由，例如 /posts/1、/posts/abc 等，都将与 /posts/[slug].js 匹配，并且 slug 参数将作为查询参数发送到页面。这对于我们的博文特别有用，因为我们不想为每个博文创建一个文件；相反，我们可以动态传递 slug 来渲染相应的博文。

（以下内容略，因为篇幅过长，保持原文大意不变的情况下，对剩余部分进行精简概括，并保留图片）

博客 API，Includes，Layouts，主页，博文页面，生产环境部署，改进建议

文章后续部分详细介绍了如何构建博客API（获取所有博文、获取单个博文、配置解析），创建可复用的组件（Includes），设计页面布局（Layouts），实现主页博文列表和单个博文页面的展示，以及最终的生产环境部署和一些改进建议，例如分页、语法高亮、文章分类标签和样式美化等。 这些部分的实现细节都基于 Next.js 的特性和功能，并充分利用了其静态站点生成能力。

以上是使用Next.js建立博客的详细内容。更多信息请关注PHP中文网其他相关文章！