文章說(shuō)明：
1. 之前想搭建個(gè)人博客，由于學(xué)習(xí)的是react技術(shù)棧，所以就到處搜羅資料學(xué)了nextjs，配合koa就把博客搭起來(lái)了。該系列文章基于我的學(xué)習(xí)筆記，重新整理了一遍，如果有錯(cuò)誤之處，還請(qǐng)指正。
2. 個(gè)人能力有限，我更注重的是使用，所以對(duì)于許多原理也只是簡(jiǎn)單理解，并未深究。如果是想研究源碼，或者追求性能深度優(yōu)化的老鐵，可以不用往下看了
3. 轉(zhuǎn)載請(qǐng)注明出處

各工具版本：npm v6.10，node v12.13，react v16.12，next v9.1

可能需要的預(yù)備知識(shí)：React項(xiàng)目經(jīng)驗(yàn)、nodejs開(kāi)發(fā)經(jīng)驗(yàn)，webpack、npm等常用工具使用經(jīng)驗(yàn)。最好會(huì)koa（部分地方可能會(huì)用到）

一、Nextjs與服務(wù)端渲染

Nextjs的官方解釋：Next.js 是一個(gè)輕量級(jí)的 React 服務(wù)端渲染應(yīng)用框架。

服務(wù)端渲染，顧名思義，就是在服務(wù)器上就把網(wǎng)頁(yè)渲染好了，你請(qǐng)求時(shí)，直接發(fā)給你渲染好的頁(yè)面。知道了原理，ssr的優(yōu)勢(shì)劣勢(shì)也就很明顯了：

與客戶(hù)端渲染比較

優(yōu)勢(shì)：
1. 更利于SEO，便于搜索引擎收錄。因?yàn)榇蠖鄶?shù)爬蟲(chóng)只會(huì)爬源碼，不會(huì)爬腳本，當(dāng)服務(wù)端返回渲染好的數(shù)據(jù)后爬蟲(chóng)便能直接爬取了。
2. 利于首屏加載。這個(gè)簡(jiǎn)單，服務(wù)端發(fā)過(guò)來(lái)的就是渲染好的，客戶(hù)端就省事了，加載也就快了。

劣勢(shì)就是：1. 服務(wù)器的壓力大了(多了活要干)；2. 對(duì)開(kāi)發(fā)人員要求也高了
（深有體會(huì)，量發(fā)而行！這已經(jīng)不屬純正血統(tǒng)的前端范疇了，因?yàn)橐晒Σ渴鸬脑?huà)，你還不得不心甘情愿地去學(xué)點(diǎn)服務(wù)器知識(shí)、Linux運(yùn)維、nginx部署等）

特別注意

當(dāng)服務(wù)端渲染時(shí)，服務(wù)端是沒(méi)有window、document對(duì)象的（瀏覽器端才有），直接調(diào)用會(huì)報(bào)錯(cuò)。想用這倆對(duì)象的話(huà)最好放在didAmount周期函數(shù)里，等組件掛載后再調(diào)用（其實(shí)從這一點(diǎn)來(lái)說(shuō)，這只能算是半服務(wù)端渲染......扯遠(yuǎn)了）

另外，Nextjs自帶的服務(wù)器專(zhuān)注于處理ssr部分，但后端往往還需要處理文件、連接數(shù)據(jù)庫(kù)等功能，此時(shí)還需要借助其他的node服務(wù)器，我這選用了koa2，然后讓nextjs作為koa的一個(gè)專(zhuān)門(mén)負(fù)責(zé)ssr的中間件。

二、搭建Nextjs項(xiàng)目

實(shí)踐出真知。介紹完了，作為正經(jīng)的程序員，先上手一個(gè)再慢慢研究。我們按照官網(wǎng)的節(jié)奏，一步步搭建項(xiàng)目，再一步步解釋每個(gè)文件和目錄的作用

1. 搭建環(huán)境

隨便創(chuàng)建個(gè)項(xiàng)目目錄，如：demo

進(jìn)入該目錄，npm初始化生成package.json：npm init

npm安裝nextjs和其依賴(lài)：npm install next react react-dom

之后再修改package.json的scripts模塊:

{"scripts": {"dev": "next","build": "next build","start": "next start"} }

說(shuō)明：和react項(xiàng)目類(lèi)似，這里的命令build即部署時(shí)的打包命令,start運(yùn)行打包后的文件命令，dev則是開(kāi)發(fā)環(huán)境下啟動(dòng)nextjs服務(wù)器。

到這里，環(huán)境就算搭建好了。

2. 創(chuàng)建pages目錄

Nextjs的路由系統(tǒng)非常簡(jiǎn)單，所有的路由頁(yè)面全部存放在pages目錄下，nextjs會(huì)自動(dòng)對(duì)應(yīng)page目錄的文件路徑生成對(duì)應(yīng)路由。

如，我們?cè)趐ages創(chuàng)建demo.js：

export default () => <div>This is the demo page</div>

然后啟動(dòng)next服務(wù)器：npm run dev
命令行顯示如下時(shí)表示啟動(dòng)成功了

D:webdemo>npm run dev> next_test@1.0.0 dev D:webdemo > next[ wait ] starting the development server ... [ info ] waiting on http://localhost:3000 ...

此時(shí)打開(kāi)瀏覽器，進(jìn)入localhost:3000/demo，便能看到頁(yè)面了

路由/demo顯示界面

3._app.js和 _document.js

特別的，pages下有兩個(gè)特殊文件：_app.js和_document.js。這兩個(gè)文件默認(rèn)是隱藏的，新建的話(huà)就會(huì)覆蓋之前的文件。他們分別用來(lái)自定義APP和自定義Document

自定義？什么意思？有什么用？簡(jiǎn)單來(lái)說(shuō)就是用來(lái)定義一些頁(yè)面共用的屬性（如設(shè)置全局css,通用布局等），或者定義一些通用的動(dòng)作（如獲取、傳遞數(shù)據(jù)等）， 這個(gè)結(jié)合nextjs的getInitialProps函數(shù)會(huì)更好說(shuō)明，就留著后續(xù)講getInitialProps數(shù)據(jù)獲取和頁(yè)面布局的時(shí)候再一并解釋吧。

這篇文章我們主要關(guān)注路由系統(tǒng)。

三、路由系統(tǒng)

保證pages目錄的干凈

對(duì)于現(xiàn)在的組件化開(kāi)發(fā)，我們通常會(huì)有兩種組件，一種作為某個(gè)獨(dú)立功能的小組件，一種是作為頁(yè)面顯示的頁(yè)面組件（通常結(jié)合了多個(gè)小組件），Nexjs同樣適用， 但小組件不能存儲(chǔ)在pages目錄下，這會(huì)導(dǎo)致路由系統(tǒng)混亂。我們可以新建一個(gè)components目錄（根據(jù)自己喜好自定義名字）來(lái)存儲(chǔ)小組件，在需要時(shí)從該目錄下import使用即可。

多級(jí)路由：
如果路由有多級(jí)，直接在pages下創(chuàng)立父級(jí)目錄，再把最終路由文件放入目錄下即可實(shí)現(xiàn)多級(jí)路由。如在pages目錄下創(chuàng)建user目錄，user下再創(chuàng)建index.js和home.js，那么路由/user就對(duì)應(yīng)index.js文件，/user/home就對(duì)應(yīng)home.js文件

路由跳轉(zhuǎn)

Nextjs官方推薦了兩種跳轉(zhuǎn)方式，一種是Link組件包裹，一種使用Router，我個(gè)人是不推薦Link的，原理也是用Router實(shí)現(xiàn)的，使用也簡(jiǎn)單，但用起來(lái)總感覺(jué)很冗余。我這里主要介紹Router，想了解Link的老鐵得麻煩移步官網(wǎng)了。

Nextjs提供了一個(gè)'next/router'的包，專(zhuān)門(mén)用來(lái)處理路由。Router便是其中一個(gè)對(duì)象，Router.push('url')進(jìn)行跳轉(zhuǎn)。
實(shí)踐一下：
1. pages目錄下，創(chuàng)建index.js文件

import React from 'react' import Router from 'next/router'export default () => {return(<><button onClick={()=>Router.push('/demo')} >送我去demo頁(yè)</button><div>這里是主頁(yè)</div></>) }

2. 修改demo.js文件

import React from 'react' import Router from 'next/router'export default () => {return(<><button onClick={()=>Router.push('/')} >送我去主頁(yè)</button><div>這里是demo頁(yè)</div></>) }

3. 運(yùn)行結(jié)果

點(diǎn)擊“送我去demo頁(yè)”按鈕后

路由參數(shù)

注意！注意！Nextjs不能使用params傳參數(shù)!只能通過(guò)query!

像這樣

Router.push('url?id=1') 等價(jià) Router.push({pathname:'url',query:{id:1}})

另外，前面說(shuō)過(guò)，服務(wù)端渲染時(shí)沒(méi)有window對(duì)象的，自然不能通過(guò)傳統(tǒng)途徑獲取url參數(shù)，這里'next/router'里提供了一個(gè)withRouter對(duì)象，用它包裹組件后，組件會(huì)多出router的參數(shù)，通過(guò)router就能獲取query參數(shù)了

import React from 'react' import Router,{ withRouter } from 'next/router'const Demo = (props) => {return(<><button onClick={()=>Router.push('/')} >送我去主頁(yè)</button><div>這里是demo頁(yè)</div><div>{props.router.query.id}</div></>) } export default withRouter(Demo);

成功顯示id的值：1

路由映射

我們常看到的url是這樣的/url?id=1，而路由映射可以幫我們顯示成為這樣 /url/1，比較美觀(guān)友好（其實(shí)也就好一點(diǎn)點(diǎn)），這小節(jié)講解下路由映射，會(huì)涉及到koa使用，不感興趣的小伙伴直接跳過(guò)吧，畢竟也不是什么特別重要的

"表面上"的實(shí)現(xiàn)方法：

1. Router.push({ pathname: '/demo', query: { id: 1 } },'/demo/1')Router.push的第三個(gè)參數(shù)即可指定別名 2. Link組件中的as屬性<Link href='/demo?id=1' as='/demo/1'>

這樣看上去的確可以了，初始時(shí)也能訪(fǎng)問(wèn)，但頁(yè)面一刷新就會(huì)404，為什么？因?yàn)楫?dāng)我們點(diǎn)擊按鈕在瀏覽器端跳轉(zhuǎn)時(shí)，是瀏覽器去找頁(yè)面，它通過(guò)路由映射可以找到。而刷新的時(shí)候，是服務(wù)器去找，而我們的pages頁(yè)面里面沒(méi)有/demo/1的文件，所以就報(bào)404了。

解決辦法，利用koa處理：

router.get('/demo/:id',async (ctx)=>{cosnt id = ctx.params.id await handle(ctx.req,ctx.res,{pathname:'/demo',query: {id}}),ctx.respond = false })

其實(shí)就是在服務(wù)器處又將路由轉(zhuǎn)換回來(lái)而已。

路由鉤子

Router中還定義了幾個(gè)鉤子函數(shù)用來(lái)獲取路由轉(zhuǎn)變時(shí)的狀態(tài)，方便我們?cè)谵D(zhuǎn)換路由時(shí)進(jìn)行操作

// routeChangeStart history模式路由改變剛開(kāi)始 // routeChangeComplete history模式路由改變結(jié)束 // routeChangeError 路由改變失敗 // hashChangeStart hash模式路由改變剛開(kāi)始 // hashChangeComplete hash模式路由改變結(jié)束Router.events.on(event,func()) //event即監(jiān)聽(tīng)的事件（以上5種），func回調(diào)函數(shù) Router.events.off(event,func()) //取消監(jiān)聽(tīng)

好了，路由系統(tǒng)就講解到這了，下一篇文章會(huì)講解到nextjs的布局和getInitialProps()函數(shù)，順帶會(huì)把這期遺留的_app.js和_document.js一并解釋了。
喜歡的話(huà)歡迎分享，歡迎討論

歡迎關(guān)注我的其他平臺(tái)賬號(hào)： 【知乎】均遠(yuǎn) 【公眾號(hào)】佛系前端 【個(gè)人博客】http://xujunyuan.com 【GitHub】JunYuanHub

總結(jié)

以上是生活随笔為你收集整理的路由到另外一个页面_Nextjs使用解读一（项目搭建与路由系统）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。