Next.js

簡介：Next.js 是一個輕量級的React服務端渲染框架

 

一. 為什么要使用Next

1.首屏等待

在 SPA 模式下，所有的數據請求和 Dom 渲染都在瀏覽器端完成，所以當我們第一次訪問頁面的時候很可能會存在“白屏”等待，而服務端渲染所有數據請求和 html內容已在服務端處理完成，瀏覽器收到的是完整的 html 內容，可以更快的看到渲染內容，在服務端完成數據請求肯定是要比在瀏覽器端效率要高的多。

2.SEO的優化

有些網站的流量來源主要還是靠搜索引擎，所以網站的 SEO 還是很重要的，而 SPA 模式對搜索引擎不夠友好，要想徹底解決這個問題只能采用服務端直出。

二.優缺點

1.服務端渲染：

1).優點：

前端渲染時間。因為后端拼接html，瀏覽器只需直接渲染出來。

有利於SEO。服務端有完整的html頁面，所以爬蟲更容易獲得信息，更利於seo

無需占用客戶端資源，模板解析由后端完成，客戶端只需解析標准的html頁面，這樣對客戶端的資源占用更 少，尤其是移動端，可以更加省電。

后端生成靜態化文件。即生成緩存片段，這樣就可以減少數據庫查詢浪費的時間了，且對於數據變化不大的頁面非常高效 等。

2).缺點:

不利於前后端分離，開發效率很低。

占用服務器端資源。請求過多對服務器壓力很大。

即使局部頁面發生變化也需要重新請求整個頁面，費流量等。

2.客戶端渲染：

1).優點： 

節省后端資源

多端渲染

前后端分離，大大提升開發效率

局部刷新等

三.Next.js是完全屬於服務端渲染嗎？

既然如此，服務端渲染的優點就是客戶端渲染的缺點，服務端渲染的缺點同時也是客戶端渲染的優點，反之亦然。看之前不是很理解，由於服務端渲染的各種缺點我們已經告別了服務端渲染的時代，進入了前后端分離的客戶端渲染時代，又為什么重新回到了服務端渲染？

了解發現，其實把Next/nust.js成為SSR不是很准確，應該是Isomorphic render（同構渲染），那么什么是同構渲染？

前后端同構是指在前后端維護同一份代碼。它是在SPA的基礎上，利用服務端渲染（SSR）直出首屏，解除單頁面應用（SPA）在首屏渲染上面臨的窘境。明確地說，同構是將傳統的純服務端直出的首屏優勢和SPA的站內體驗優勢結合起來，以取得最優解的解決方案。

同構渲染就是實現了ssr和spa兩種技術的結合，同時可以最大限度的重用代碼（同構），減少開發維護成本，采用 react 或者 vue 等前端框架相結合 node (ssr) 來實現。

四.Next渲染流程

 

 

 

 

 

 

 

 

Next.js優點：

完善的React項目架構，搭建輕松。

自帶數據同步策略，解決服務端渲染最大難點.

配置靈活

豐富的插件幫開發人員增加各種功能。

 

五.創建流程

1.通過creact-next-app快速創建Next.js項目

1).安裝creact-next-app

npm install -g create-next-app

 

安裝完成后，就可以通過create-next-app命令來創建一個Next.js的項目了。

npx create-next-app deemo 

 

 

進入項目目錄，執行yarn dev。在瀏覽器中輸入http://localhost:3000/,看到下面的內容，說明項目生成成功。

2.目錄結構

 

 

 

3.Next.js的Page和Component的使用

1)Page

在pages下新建一個test.js的頁面，頁面可以隨意輸入一些內容，這里按照hooks的方式編寫你的函數型組件

function TestButton(){
return (<button>Test Button</button>)
}

export default TestButton;

 

 

然后在網頁的地址欄中http://localhost:3000/test 然后我們發現，頁面上已經顯示test.js的頁面內容了，這是因為Next框架自動做好了路由，這個也算是Next的一個重要優點。

 

2)Component

 

可以再根目錄下創建一個components的文件夾，來存放我們的公用組件。

先來創建一個button的組件，首先在components文件夾下創建button.js文件，然后編輯頁面，先按最簡單的寫法來創建一個按鈕。

export default ({children})=><button>{children}</button>

 

組件創建完成后，在pages下的index.js頁面引入該文件

import Button from '../components/button'

然后在頁面上引入該組件

<Button>按鈕</Button>

 

 

4.路由-基礎和基本跳轉

頁面跳轉一般有兩種形式，第一種是利用標簽<Link>,第二種是用js編程的方式進行跳轉，也就是利用Router組件。

1)標簽式導航<Link>

首先引入標簽式導航< Link >

import Link from 'next/link'

 

 

 

跳轉剛才的test.js 頁面

<Link href="/test">Test</Link>

 

注意：<Link>下如果不寫內容，或者寫多個標簽都會報錯

//不寫內容
<Link href="/test"></Link>

//多個標簽，可用一個父標簽包裹
<Link href="/test">
<span>test1</span>
<span>test2</span>
</Link>

 

2)Router

import Router from 'next/router'

...
<button onClick={()=>{Router.push('/test')}}前往Test頁面</button>

 

5.路由-query傳參

1).標簽式< Link >傳參

<Link href="/test?id=123">
<span>前往Test頁面</span>
</Link>

 

 

或者

<Link href={{pathname:'/test',query:{id:'123'}}}>
<span>前往Test頁面</span>
</Link>

 

 

2).Router導航傳參

<button onClick={()=>{Router.push('/test?id=123')}}>前往Test頁面</button>

 

或者

<button onClick={()=>{Router.push({pathname:'/test',query:{id:'123'}})}}>前往Test頁面</button> 

6.路由-接收參數

使用withRouter， 它是Next.js框架的高階組件，用來處理路由的。（高階組件）

// 引入withRouter
import { withRouter } from 'next/router'
import Link from 'next/link'

const Test = ({router}) =>{
return(
<div>
<p>{router.query.id}</p>
<Link href={{pathname:'/'}}>
<span>返回首頁</span>
</Link>
</div>
)
}
export default withRouter(Test)

// router.query.id -> 123

7. 路由-鈎子事件

Next.js的路由鈎子一共有六個

當路由發生變化時會觸發鈎子事件，這里用到Router的on方法來監聽，鈎子事件第二個參數為路由參數，這里來編 輯index.js頁面。

//路由發生變化時
Router.events.on('routeChangeStart',(...args)=>{
console.log('路由開始變化',...args)
})
//路由結束變化時
Router.events.on('routeChangeStart',(...args)=>{
console.log('路由開始變化',...args)
})
//路由結束變化時觸發
Router.events.on('routeChangeComplete',(...args)=>{
console.log('路由結束變化',...args)
})
//在改變瀏覽器 history之前觸發
Router.events.on('beforeHistoryChange,(...args)=>{
console.log('瀏覽器 history改變之前',...args)
})
//跳轉發生錯誤觸發
Router.events.on('routeChangeError,(...args)=>{
console.log('跳轉發生錯誤',...args)
})
//hash模式路由改變剛開始
Router.events.on('hashChangeStart,(...args)=>{
console.log('hash模式路由改變剛開始',...args)
})
//hash模式路由改變結束
Router.events.on('hashChangeComplete,(...args)=>{
console.log('hash模式路由改變結束',...args)
})

 

8.getInitialProps 獲取遠程數據

通常需要從遠程數據源獲取數據.Next.js 自己有標准 API 來獲取頁面數據.我們通常使用異步函數 getInitialProps 來完成此操作 .這樣,我們可以通過遠程數據源獲取數據到頁面上,並將其作為 props 傳遞給我們的面.getInitialProps 在服務器和客戶端上均可使用.

1).axios

npm install --save axios

...
//使用 打印出list
const Test = ({ router, list }) => {
return (
<>
<div>{list}</div>
</>
);
};
Mock.mock("https://www.test.com", { list: "吃飯睡覺打豆豆" });
Test.getInitialProps = async () => {
const promise = new Promise((resolve) => {
axios("https://www.test.com").then((res) => {
console.log("結果為:", res);

resolve(res.data);
});
});
return await promise;
};
export default withRouter(Test);

 

2).fetch

npm install --save isomorphic-unfetch

//使用
Test.getInitialProps = async function (){
const res = await fetch('https://www.test.com');
const data = await res.json();
console.log(data.map(entry => entry.show))

}

 

9.組件樣式

1).框架自帶的一種語法style jsx ，來嘗試一下讓字體變成藍色

直接寫在return 中，可以在頁面最外層添加一個<></>

<>
<div className="container">
<Test>按鈕</Test>
</div>
<style jsx>
{`
.container { color:blue;}
`}
</style>
</>

2).動態改變組件樣式

const Home = () => {
const [color, setColor] = useState("blue");
const changeColor = () => {
setColor(color === "blue" ? "red" : "blue");
};
return (
<>
<div>
<Test>按鈕</Test>
</div>
<button onClick={changeColor}>變色</button>

<style jsx>
{`
div {
color: ${color};
}

`}
</style>
</>
);
};
export default Home;

 

 

打開控制台還會發現，加入了Style jsx代碼后，Next.js會自動加入一個隨機類名，這樣就防止了CSS的全局污染。

3).引入less 和 css

當頁面比較復雜的時候，我們以jsx方式來編寫樣式，難免的會降低我們的開發效率，所以這里嘗試一下引入less

首先安裝less 和 css

npm install --save @zeit/next-less less
npm install --save @zeit/next-css

 

 

 

然后在根目錄下創建next.config.js配置文件，引入less和css

const withCss = require('@zeit/next-css')

const withLess = require('@zeit/next-less')
if(typeof require !== 'undefined'){
require.extensions['.css']=file=>{}
}

if (typeof require !== "undefined") {
require.extensions[".withLess"] = file => {};
}
module.exports = withLess(withCss({}))

 

然后重新啟動服務

4).引入antd

//首先安裝antd依賴
npm install antd --save

//然后來安裝和配置babel-plugin-import 插件
npm install babel-plugin-import --save-dev

 

 

 

安裝完成后，在項目根目錄建立.babelrc文件，然后寫入如下配置文件。

{
"presets":["next/babel"], //Next.js的總配置文件，相當於繼承了它本身的所有配置
"plugins":[ //增加新的插件，這個插件就是讓antd可以按需引入，包括CSS
[
"import",
{
"libraryName":"antd",
"style":"css"
}
]
]
}

 

這樣配置好了以后，webpack就會按需引入antd,同樣CSS也是按需打包的。

然后重啟服務。

10.部署 Next.js 應用

先安裝 now,一個靜態資源托管服務器

npm i -g now

 

 

打包

yarn build

 

 

 

 

注： 結果發現報錯了，其實是我們在加入Ant Design的樣式時產生的，這個已經在Ant Design的Github上被提出了，但目前還沒有被修改，你可以改完全局引入CSS解決問題。

解決辦法

在page目錄下，新建一個_app.js文件，然后寫入下面的代碼。

 

import App from 'next/app'

import 'antd/dist/antd.css'

export default App

 

再次運行

yarn build
yarn start