本文將指導(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)建過程。

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

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

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

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

本文假設(shè)您具備React 的基礎(chǔ)知識(shí)。如果沒有，請(qǐng)參考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>

為了在命令行運(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://www.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è)頁面都是一個(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è)頁面index.js。

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

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

開箱即用，我們獲得：

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

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

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

靜態(tài)路由頁面用於構(gòu)建主頁、關(guān)於頁面等。但是，為了動(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ù)將作為查詢參數(shù)發(fā)送到頁面。這對(duì)於我們的博文特別有用，因?yàn)槲覀儾幌霝槊總€(gè)博文創(chuàng)建一個(gè)文件；相反，我們可以動(dòng)態(tài)傳遞slug 來渲染相應(yīng)的博文。

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

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

文章後續(xù)部分詳細(xì)介紹瞭如何構(gòu)建博客API（獲取所有博文、獲取單個(gè)博文、配置解析），創(chuàng)建可複用的組件（Includes），設(shè)計(jì)頁面佈局（Layouts），實(shí)現(xiàn)主頁博文列表和單個(gè)博文頁面的展示，以及最終的生產(chǎn)環(huán)境部署和一些改進(jìn)建議，例如分頁、語法高亮、文章分類標(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)文章！