看了就會的Next.js SSR/SSG 實戰(zhàn)教程

Next.js是基于React的服務(wù)端渲染工具。在傳統(tǒng)的React項目中，例如使用Create-React-App創(chuàng)建的項目，最終build生成的靜態(tài)文件，是基于瀏覽器渲染的，即所謂的CSR（Client-side Rendering）。CSR往往都是單頁面應(yīng)用，即一個HTML文件和若干個js、css文件。打開build后的HTML文件，發(fā)現(xiàn)代碼很簡單，頁面和組件的元素都是放在了js里，由js動態(tài)渲染到HTML中。CSR模式是目前前端開發(fā)項目中應(yīng)用最為廣泛的。但有些也場景，特別是需要SEO優(yōu)化的時候，CSR就不太合適了，所以服務(wù)端（Server-side Rendering）渲染應(yīng)運而生，SSR是由服務(wù)器將用戶請求的頁面DOM組裝好后，再返回給瀏覽器，因此通過“查看網(wǎng)頁源代碼”，是可以看到完整的頁面DOM的。而SSG（Static Site Generation），顧名思義就是靜態(tài)網(wǎng)站生成，也就是常說的“網(wǎng)頁靜態(tài)化”，除了適合SEO，還很方便CDN加速，比較適合內(nèi)容相對比較固定的資訊發(fā)布類網(wǎng)站。

以下是關(guān)于CSR、SSR、SSG的簡單對比：

本教程基于Next.js技術(shù)框架，通過一個簡單的實戰(zhàn)項目，將工程搭建、開發(fā)、部署、自動化等環(huán)節(jié)完整講述。如果你正在做類似CMS的項目，并且需要將網(wǎng)頁內(nèi)容靜態(tài)化。那本教程將非常適合你。SSR與SSG在開發(fā)過程中幾乎是完全一樣的，只是最終部署的環(huán)境有所不同。掌握了SSG，那SSR也同樣不在話下。

以我的個人經(jīng)驗來講，從零基礎(chǔ)學習一個新的框架，最佳的方法是結(jié)合項目邊做邊學，官方技術(shù)文檔比較適合做手冊來查閱。脫離了實戰(zhàn)項目，只看官方技術(shù)手冊，很難掌握。因此，本教程就是以實戰(zhàn)項目的角度，把官網(wǎng)技術(shù)文檔的主要內(nèi)容串起來。相信按照本教程操作一遍之后，就能快速掌握Next.js。再回過頭去系統(tǒng)地看一遍官方技術(shù)手冊，那就會更加深入理解。

先睹為快

先看下目錄了解本教程都有哪些內(nèi)容。

1 創(chuàng)建Next.js項目

? 1.1 安裝Next.js

? 1.2 設(shè)置項目目錄

? 1.3 項目入口文件

? 1.4 精簡項目

2 配置項目

? 2.1 設(shè)置路徑別名

? 2.2 配置SourceMap（不建議設(shè)置）

? 2.3 設(shè)置頁面title

? 2.4 設(shè)置HTML框架代碼

? 2.5 以SSR模式運行項目

? 2.6 設(shè)置404/500頁面

3 CSS預(yù)處理及使用

? 3.1 集成Sass/Scss

? 3.2 集成Less（選讀）

? 3.3 集成Stylus（選讀）

? 3.4 關(guān)于樣式命名規(guī)范

? 3.5 配置全局樣式

? 3.6 配置頁面（pages）樣式

4 頁面路由

? 4.1 優(yōu)化index頁面和樣式文件的存放位置

? 4.1.1 方法一：通過next.config.js配置

? 4.1.2 方法二：通過組件引入（推薦）

? 4.2 創(chuàng)建About頁面

? 4.3 使用next/router和next/link構(gòu)建導(dǎo)航組件

5 圖片引用

? 5.1 方法一：使用原生<img>標簽引入圖片

? 5.2 方法二：使用next/image引用圖片

6 生成靜態(tài)化網(wǎng)站（SSG）

? 6.1 設(shè)置SSG的export命令

? 6.2 設(shè)置靜態(tài)資源的basePath

? 6.3 設(shè)置SSG export輸出的目錄名稱

7 接口請求

? 7.1 CSR/SSR/SSG 三種API請求方式

? 7.2 搭建服務(wù)端API服務(wù)

? 7.3 構(gòu)建Profile頁面

? 7.4 getServerSideProps和getStaticProps小節(jié)

? 7.5 搭建Next.js API Routers服務(wù)（選讀）

8 動態(tài)路由

9 使用CLI命令動態(tài)生成目錄

10 其他說明

11 項目Git源碼

本次分享Demo的主要依賴包版本：

Node.js 16.16.0next 12.2.5react 18.2.0react-dom 18.2.0axios 0.27.2

※注：

代碼區(qū)域每行開頭的：

"+" 表示新增

"-" 表示刪除

"M" 表示修改

1 創(chuàng)建Next.js項目

1.1 安裝Next.js

找個合適的目錄，執(zhí)行：

npx create-next-app next-ssg

next-ssg是項目名稱，可根據(jù)需要自行更改。

安裝完成后，進入next-ssg，運行：

yarn dev

瀏覽器打開http://localhost:3000/，項目運行成功。

1.2 設(shè)置項目目錄

Next.js官方腳手架初始目錄結(jié)構(gòu)如下：

├─ /.next              <-- 用于SSR運行的工程，執(zhí)行yarn dev或yarn build后才會出現(xiàn)├─ /node_modules├─ /pages              <-- Next.js指定的頁面目錄|  ├─ /api             <-- Next.js指定的API服務(wù)目錄，可以刪除|  |  └─ hello.js      <-- API服務(wù)的hello接口|  ├─ _app.js          <-- Next.js指定的項目入口文件|  └─ index.js         <-- 項目首頁├─ /public             <-- 靜態(tài)目錄，放在這里的文件可通過"/"直接訪問（沒有public這一層級）|  ├─ favicon.ico|  └─ vercel.svg├─ /styles             <-- 項目全局樣式|  ├─ globals.css|  └─ Home.module.css  <-- Home組件樣式├─ .eslintrc.json├─ .gitignore├─ next.config.js      <-- Next.js配置文件├─ package.json├─ README.md└─ yarn.lock

以上目錄結(jié)構(gòu)并沒有看到src目錄，這與日常項目的開發(fā)習慣不一致。如果希望保持一致的開發(fā)體驗，仍然可以使用src做為開發(fā)目錄。

按照以下步驟重新組織目錄結(jié)構(gòu)：

1. 停止項目運行

2. 在項目根目錄新建src目錄

3. 把pages、styles兩個目錄放到src目錄里

4. 刪除pages里的api目錄（后續(xù)章節(jié)講到API請求時再創(chuàng)建）

再執(zhí)行yarn dev，項目依然正常運行。

為什么變更了目錄結(jié)構(gòu)，項目還可以正常運行？

Next.js的官方腳手架雖然沒有src目錄，但考慮到src目錄是普遍存在于大多數(shù)腳手架工程中，所以Next.js也對src目錄做了支持。當然，如果新建的不是src目錄，把pages、styles放進去是無法被正確識別的。

關(guān)于src目錄，官方的規(guī)則如下：

1. 如果根目錄下有pages，則src/pages將被忽略。

2. public目錄以及next.config.js、jsconfig.json、tsconfig.json不能放到src目錄里。

官方說明：https://nextjs.org/docs/advanced-features/src-directory

1.3 項目入口文件

按以上目錄設(shè)置后，項目的入口文件變?yōu)榱藄rc/pages/_app.js。稍后將結(jié)合演示項目進行具體講解。

1.4 精簡項目

修改src/pages/index.js，最簡化頁面：

function Index() {    return (        <h1>This is Index Page.</h1>    )}
export default Index

修改src/pages/_app.js，刪除首行的全局樣式引用：

-   import '../styles/globals.css'
    function MyApp({ Component, pageProps }) {        return <Component {...pageProps} />    }
    export default MyApp

對src目錄及文件進行以下調(diào)整：

   /src+  ├─ /common              <-- 公用目錄+  |  ├─ /images           <-- 公用圖片目錄+  |  └─ /styles           <-- 公用樣式目錄+  ├─ /components      <-- 公用組件目錄   ├─ /pages               <-- Next.js指定的頁面目錄+  |  ├─ /api              <-- Next.js指定的API服務(wù)目錄（不會生成api頁面目錄）   |  ├─ _app.js           <-- Next.js指定的項目入口文件（不會生成_app.html）   |  └─ index.js          <-- index頁面（會生成index.html）-  └─ /styles        <-- Next.js初始的樣式目錄（刪除）-     └─ globals.css       <-- Next.js初始的公用樣式（刪除）

現(xiàn)在，src目錄結(jié)構(gòu)如下，非常精簡了：

/src├─ /common            <-- 公用目錄|  ├─ /images         <-- 公用圖片目錄|  └─ /styles         <-- 公用樣式目錄├─ /components      <-- 公用組件目錄└─ /pages             <-- Next.js指定的頁面目錄   ├─ /api            <-- Next.js指定的API服務(wù)目錄（不會生成api頁面目錄）   ├─ _app.js         <-- Next.js指定的項目入口文件（不會生成_app.html）   └─ index.js        <-- index頁面（會生成index.html）

執(zhí)行yarn dev，效果如下：

2 配置項目

2.1 設(shè)置路徑別名

為了避免使用相對路徑的麻煩，可以設(shè)置路徑別名。

在項目根目錄下創(chuàng)建jsconfig.json，代碼如下：

{  "compilerOptions": {    "baseUrl": ".",    "paths": {      "@/*": ["src/*"],    }  }}

路徑別名官方說明：https://nextjs.org/docs/advanced-features/module-path-aliases

這樣在js代碼開頭的import路徑中，直接使用@表示“src目錄”，不用去數(shù)有多少個"../"了。

修改jsconfig.json需要重啟項目才能生效。

2.2 配置SourceMap（不建議設(shè)置）

development環(huán)境是開啟sourceMap的，production環(huán)境默認不開啟sourceMap。

如果需要在production環(huán)境開啟sourceMap，在next.config.js進行以下配置：

module.exports = {  productionBrowserSourceMaps: true,}

為了不暴露項目源碼，不建議進行以上設(shè)置。

2.3 設(shè)置頁面title

設(shè)置頁面的title很簡單。

修改src/pages/_app.js：

src/_app.js：

+   import Head from 'next/head'
    function MyApp({ Component, pageProps }) {M       return (+           <>+               <Head>+                   <title>My Next App</title>+               </Head>+               <Component {...pageProps} />+           </>+       )    }
    export default MyApp

運行項目，發(fā)現(xiàn)頁面的title已經(jīng)修改成功。

2.4 設(shè)置HTML框架代碼

在Next.js項目里有個public目錄，但是里面并沒有看到類似Create-React-App項目的index.html。那如何設(shè)置HTML的<head>內(nèi)容呢？

新建src/pages/_document.js，代碼如下：

import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {    return (        <Html>            <Head>                <link rel="icon" href="/favicon.ico" />                <meta name="description" content="Next.js演示項目" />            </Head>            <body>                <Main />                <NextScript />            </body>        </Html>    )}

_document.js也是Next.js的指定文件名，且必須在pages目錄下才可生效。

你可能會好奇，既然_document.js可以設(shè)置<head>的內(nèi)容，那為什么<title>卻在第2.3章節(jié)的_app.js中設(shè)置呢？

這是因為_document.js只會在初始時進行預(yù)渲染。官方不建議把<title>放到_document.js中。如果你在_document.js中的<head>里設(shè)置了<title>，在build的時候會收到warning。

title規(guī)則官方說明：https://nextjs.org/docs/messages/no-document-title

執(zhí)行yarn dev，在http://localhost:3000中打開瀏覽器調(diào)試工具，但是并沒有看到_document.js設(shè)置的內(nèi)容。

這是因為_document.js設(shè)置的內(nèi)容在build后才會生效。dev模式是看不到剛剛設(shè)置的內(nèi)容的。

2.5 以SSR模式運行項目

執(zhí)行以下命令，build項目：

yarn build

執(zhí)行后，在項目根目錄下會生成一個.next的目錄。這個目錄就是用于運行SSR的代碼，僅能運行在服務(wù)端，不能被瀏覽器直接運行。

然后再執(zhí)行以下命令，以SSR模式運行項目：

yarn start

 ※注：每次代碼更新，在執(zhí)行yarn start之前，一定要先執(zhí)行yarn build。否則運行的并不是最新build的項目。

現(xiàn)在打開http://localhost:3000，看到是SSR模式運行的項目。打開調(diào)試工具，看到_document.js設(shè)置的代碼已生效：

yarn start默認是運行在3000端口，如果想運行在4000端口，可以執(zhí)行以下命令：

yarn start -p 4000

更多Next.js CLI命令，可參閱官方說明。

Next.js CLI官方說明：https://nextjs.org/docs/api-reference/cli

2.6 設(shè)置404/500頁面

繼續(xù)回到dev模式，運行yarn dev。

現(xiàn)在打開一個并不存在的頁面路徑，例如http://localhost:3000/test，頁面顯示如下：