本文將指導(dǎo)您使用 Next.js 構(gòu)建一個(gè)靜態(tài)博客框架，其設(shè)計(jì)和結(jié)構(gòu)靈感源自 Jekyll。Jekyll 以其易于上手和高度可控性而聞名，本文旨在利用 Next.js 和 React 的優(yōu)勢(shì)，提供一種全新的靜態(tài)博客構(gòu)建方案。Next.js 基于文件系統(tǒng)，簡(jiǎn)化了靜態(tài)網(wǎng)站的構(gòu)建過(guò)程。

典型的 Jekyll 博客目錄結(jié)構(gòu)如下：

<code>.
├─── _posts/ ? ? ? ? ?...Markdown 格式的博文
├─── _layouts/ ? ? ? ?...不同頁(yè)面的布局
├─── _includes/ ? ? ? ...可復(fù)用的組件
├─── index.md ? ? ? ? ...主頁(yè)
└─── config.yml ? ? ? ...博客配置</code>

我們的框架將盡可能遵循此目錄結(jié)構(gòu)，以便于從 Jekyll 遷移博客，只需復(fù)用博文和配置即可。

如果您不熟悉 Jekyll，它是一個(gè)靜態(tài)站點(diǎn)生成器，可以將純文本轉(zhuǎn)換為靜態(tài)網(wǎng)站和博客。請(qǐng)參考 Jekyll 快速入門(mén)指南了解詳情。

本文假設(shè)您具備 React 的基礎(chǔ)知識(shí)。如果沒(méi)有，請(qǐng)參考 React 入門(mén)指南。

安裝

Next.js 基于 React 并使用 Node.js 編寫(xiě)。因此，在添加 Next.js、React 和 React-DOM 之前，需要先安裝 npm。

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

為了在命令行運(yùn)行 Next.js 腳本，我們需要將 next 命令添加到 package.json 的 scripts 部分。

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

現(xiàn)在，第一次運(yùn)行 npm run dev 命令，看看會(huì)發(fā)生什么。

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

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

編譯器提示缺少項(xiàng)目根目錄下的 pages 目錄。我們將在下一節(jié)學(xué)習(xí) pages 的概念。

pages 概念

Next.js 基于 pages 概念構(gòu)建。每個(gè)頁(yè)面都是一個(gè) React 組件（.js 或 .jsx），根據(jù)文件名映射到路由。例如：

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

讓我們?cè)陧?xiàng)目根目錄下創(chuàng)建 pages 目錄，并用基本的 React 組件填充第一個(gè)頁(yè)面 index.js。

<code>// pages/index.js
export default function Blog() {
? return <div>歡迎來(lái)到 Next.js 博客</div>
}</code>

再次運(yùn)行 npm run dev 啟動(dòng)服務(wù)器，并在瀏覽器中訪問(wèn) http://m.miracleart.cn/link/4a914e5c38172ae9b61780ffbd0b2f90 查看您的博客。

開(kāi)箱即用，我們獲得：

• 熱重載，無(wú)需為每次代碼更改刷新瀏覽器。
• /pages/** 目錄下所有頁(yè)面的靜態(tài)生成。
• /public/** 目錄中資源的靜態(tài)文件服務(wù)。
• 404 錯(cuò)誤頁(yè)面。

訪問(wèn) localhost 上的任意路徑以查看 404 頁(yè)面的實(shí)際效果。如果您需要自定義 404 頁(yè)面，請(qǐng)參考 Next.js 文檔。

動(dòng)態(tài)頁(yè)面

靜態(tài)路由頁(yè)面用于構(gòu)建主頁(yè)、關(guān)于頁(yè)面等。但是，為了動(dòng)態(tài)構(gòu)建所有博文，我們將使用 Next.js 的動(dòng)態(tài)路由功能。例如：

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

任何路由，例如 /posts/1、/posts/abc 等，都將與 /posts/[slug].js 匹配，并且 slug 參數(shù)將作為查詢(xún)參數(shù)發(fā)送到頁(yè)面。這對(duì)于我們的博文特別有用，因?yàn)槲覀儾幌霝槊總€(gè)博文創(chuàng)建一個(gè)文件；相反，我們可以動(dòng)態(tài)傳遞 slug 來(lái)渲染相應(yīng)的博文。

（以下內(nèi)容略，因?yàn)槠^(guò)長(zhǎng)，保持原文大意不變的情況下，對(duì)剩余部分進(jìn)行精簡(jiǎn)概括，并保留圖片）

博客 API，Includes，Layouts，主頁(yè)，博文頁(yè)面，生產(chǎn)環(huán)境部署，改進(jìn)建議

文章后續(xù)部分詳細(xì)介紹了如何構(gòu)建博客API（獲取所有博文、獲取單個(gè)博文、配置解析），創(chuàng)建可復(fù)用的組件（Includes），設(shè)計(jì)頁(yè)面布局（Layouts），實(shí)現(xiàn)主頁(yè)博文列表和單個(gè)博文頁(yè)面的展示，以及最終的生產(chǎn)環(huán)境部署和一些改進(jìn)建議，例如分頁(yè)、語(yǔ)法高亮、文章分類(lèi)標(biāo)簽和樣式美化等。 這些部分的實(shí)現(xiàn)細(xì)節(jié)都基于 Next.js 的特性和功能，并充分利用了其靜態(tài)站點(diǎn)生成能力。

以上是使用Next.js建立博客的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！