使用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</code>歡迎來到Next.js 博客
}

再次運行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中文網其他相關文章！