Next.js踩坑入門系列（一）— Hello Next.js!

rockswang 發(fā)布于2019-08-23 11:38 / 1423人閱讀

摘要：接下來(lái)我們運(yùn)行一下。因此，我們需要新建一個(gè)目錄。接下在再重新啟動(dòng)一下試試。因?yàn)槟J(rèn)開(kāi)啟服務(wù)端渲染，也就無(wú)需我們進(jìn)行任何的配置，因此現(xiàn)在這個(gè)極其簡(jiǎn)單的應(yīng)用就是一個(gè)。代碼地址參考文章服務(wù)端渲染與打造高可靠與高性能的同構(gòu)解決方案

寫在前面

說(shuō)實(shí)話，我個(gè)人還是覺(jué)得文筆越來(lái)越不錯(cuò)了，以前的文章都是一個(gè)問(wèn)題悶到天黑，文章寫的有點(diǎn)亂由于文章過(guò)于龐大導(dǎo)致不是一氣呵成的，思路有時(shí)候會(huì)很混亂。所以我也準(zhǔn)備開(kāi)始寫系列文，哈哈，嘗試一下嘛~系列文的好處就是每次講一個(gè)點(diǎn)，爭(zhēng)取講的細(xì)致一些，希望大家多多指教~

Next.js踩坑入門系列

(一) Hello Next.js

(二) 添加Antd && CSS

陸續(xù)更新...

筆者小白技術(shù)棧目前主要是react，全家桶里react，react-router，redux等用的差不多了，最近想攻關(guān)一下服務(wù)端渲染（SSR），提到服務(wù)端渲染，一大堆繁瑣的webpack配置，后端路由配置等等等等搞得我頭大，煩的不行。我這個(gè)人不是很喜歡接觸新東西，可能每個(gè)人學(xué)習(xí)方式不同，我喜歡先會(huì)用一個(gè)東西，用明白了再去研究它的原理，因此，有沒(méi)有類似于一鍵配置或者傻瓜式配置的服務(wù)端渲染框架腳手架呢，秉著這個(gè)理念，百度了一下就是——Next.js了。

本人非常喜歡create-react-app這個(gè)腳手架，但是官方明確表明了目前不支持服務(wù)端渲染，所以只好放棄了，其實(shí)基于這個(gè)腳手架也是可以配置的，不過(guò)我還是先弄一個(gè)可用的，然后回來(lái)再填坑自己配置吧~

服務(wù)端渲染

先來(lái)說(shuō)一下服務(wù)端渲染吧，目前做的項(xiàng)目確實(shí)是服務(wù)端渲染的，但是不是我搭的，我個(gè)人寫的一些東西都不是服務(wù)端渲染的，所以下面的結(jié)論是很多篇文章過(guò)后總結(jié)的，具體文章在下面，知識(shí)這東西就是拿來(lái)分享學(xué)習(xí)的嘛，學(xué)會(huì)了就是我的~哈哈

客戶端渲染

最原始的前端，頁(yè)面在瀏覽器獲取到JavaScript和CSS等文件之后開(kāi)始渲染，完全在客戶端（也就是瀏覽器），路由是客戶端路由，也就是現(xiàn)在大部分的SPA單頁(yè)應(yīng)用。

服務(wù)端渲染

頁(yè)面由服務(wù)端渲染過(guò)后直接返回html頁(yè)面給前端，url的變更會(huì)刷新整個(gè)頁(yè)面，也就是以前的php和jsp模式

同構(gòu)

高端點(diǎn)的詞Universal APP，為什么要同構(gòu)，因?yàn)榭蛻舳虽秩敬嬖谝粋€(gè)缺點(diǎn)，就是首屏加載過(guò)大文件或過(guò)多文件會(huì)變得特別慢，因此可以把首屏放在客戶端來(lái)渲染來(lái)提升首屏速度，首屏加載過(guò)后路又開(kāi)始交給客戶端控制，又變成了SPA應(yīng)用，整個(gè)代碼都是用JavaScript來(lái)編寫，服務(wù)端采用nodejs。

Next.js

關(guān)于Next.js，我就不多BB了，我寫這篇文章的同時(shí)也是我第一次接觸Next.js所以才叫采坑入門，大家感興趣的可以去官網(wǎng)學(xué)學(xué)，還挺詳細(xì)的 ---> Next.js

新建一個(gè)Nextjs應(yīng)用

學(xué)習(xí)編程的我們都知道，入門系列是hello world，這里我覺(jué)得next.js還是挺友好的，因?yàn)樗娴拿獬宋覀兤綍r(shí)所理解的服務(wù)端渲染的各種繁雜配置，只需要簡(jiǎn)單的幾步就可以新建一個(gè)Universal App。

第一步安裝依賴

好吧，你只需要新建一個(gè)文件夾，然后運(yùn)行下面一段命令

// 初始化應(yīng)用
yarn init
// 安裝三個(gè)依賴
yarn add react react-dom next
// package.json配置啟動(dòng)
{
    ...
    // 新增啟動(dòng)方式，選擇使用next啟動(dòng)
    "script": {
        "dev": "next"
    }
    ...
}

OK，你已經(jīng)完成了基于next的服務(wù)端搭建，是不是真的很簡(jiǎn)單。
接下來(lái)我們運(yùn)行一下yarn dev。

what?居然報(bào)錯(cuò)了，好吧，原來(lái)Next.js默認(rèn)從 pages 目錄下取頁(yè)面進(jìn)行渲染返回給前端展示，并默認(rèn)取 pages/index.js 作為系統(tǒng)的首頁(yè)進(jìn)行展示。因此，我們需要新建一個(gè)pages目錄。接下在再重新啟動(dòng)一下試試。

第二步新建pages文件夾以及文件

因?yàn)?000經(jīng)常被另一個(gè)項(xiàng)目使用，所以我把啟動(dòng)端口改成3006了，修改script的啟動(dòng)方式即可：

"script": {
    "dev": "next -p 3006"
}

然后我們?cè)L問(wèn)http://localhost:3006：

ok,得到了一個(gè)非常簡(jiǎn)潔的一個(gè)頁(yè)面，講道理，我很喜歡這種簡(jiǎn)潔的頁(yè)面。為啥404了呢，原來(lái)我們只新建了pages目錄，剛剛也說(shuō)了，它默認(rèn)根路由頁(yè)面是pages下的index.js，所以我們新建一個(gè)index.js。

const Home = () => (
  我是Next的首頁(yè)
);
export default Home;

ok,現(xiàn)在就沒(méi)啥問(wèn)題了。因?yàn)閚ext.js默認(rèn)開(kāi)啟服務(wù)端渲染，也就無(wú)需我們進(jìn)行任何的配置，因此現(xiàn)在這個(gè)極其簡(jiǎn)單的應(yīng)用就是一個(gè)Universal React APP。從頁(yè)面元素我們也可以看出來(lái)：

第三步 Next路由

看到這里，新手小伙伴應(yīng)該跟我一樣感嘆Next.js強(qiáng)大的同時(shí)也會(huì)有一個(gè)疑問(wèn)，等一下，怎么就渲染了?路由你都沒(méi)配置憑啥就出首頁(yè)了，一般的SPA至少也會(huì)配置路由才能進(jìn)行頁(yè)面跳轉(zhuǎn)，這里沒(méi)配置路由首頁(yè)出來(lái)了我還有其他頁(yè)面呢，怎么辦？
原來(lái)，這些東西還都是Next給我們配置好的，剛才說(shuō)了Next.js默認(rèn)匹配pages目錄的index.js作為根路徑/，其他的路徑也是這樣按文件名匹配的。
而我們的各種路由跳轉(zhuǎn)依賴的不再是react-router而是next.js給我們封裝好的路由（其實(shí)redux也是，后面會(huì)說(shuō)到）。

/pages/index.js頁(yè)面 ----> /
import React, { Fragment } from "react";
import Link from "next/link";
const Home = () => (
  
    我是Next的首頁(yè)
    
      用戶列表頁(yè)
    
  
);
export default Home;

/pages/userList.js ----> /userList
const UserList = () => (
  我是用戶列表頁(yè)
);
export default UserList;

厲害了我的哥，不僅跳轉(zhuǎn)成功，而且對(duì)應(yīng)的history也都幫我們封裝好了，后退也都正常，而且可以看到，我們無(wú)需在前端或者node端配置任何路由相關(guān)，只需要按照它的模板去寫就可以了。并且前端頁(yè)面的跳轉(zhuǎn)也是無(wú)刷新的~

不過(guò)蘿卜白菜各有所愛(ài)，雖然個(gè)人覺(jué)得很強(qiáng)大但是看不到路由還是感覺(jué)怪怪的，而且寫法也有變化，也就是路由必須在pages路徑下才可以，這樣工程大了以后豈不是會(huì)很混亂，而且頁(yè)面和路由融合在一起redux怎么辦，感覺(jué)很臃腫啊，作為一個(gè)剛從純前端SPA過(guò)度過(guò)來(lái)的肯定很別扭，我覺(jué)得不可能這么low吧，肯定不會(huì)吧，稍后再探索吧。

代碼地址

參考文章

服務(wù)端渲染與 Universal React App
D2 - 打造高可靠與高性能的React同構(gòu)解決方案