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

luffyZh發表於2018-08-29
JS

前言

說實話，我個人還是覺得文筆越來越不錯了，以前的文章都是一個問題悶到天黑，文章寫的有點亂由於文章過於龐大導致不是一氣呵成的，思路有時候會很混亂。所以我也準備開始寫系列文，哈哈，嘗試一下嘛~系列文的好處就是每次講一個點，爭取講的細緻一些，希望大家多多指教~

Next.js踩坑入門系列

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

本人非常喜歡create-react-app這個腳手架，但是官方明確表明了目前不支援服務端渲染，所以只好放棄了，其實基於這個腳手架也是可以配置的，不過我還是先弄一個可用的，然後回來再填坑自己配置吧~

服務端渲染

先來說一下服務端渲染吧，目前做的專案確實是服務端渲染的，但是不是我搭的，我個人寫的一些東西都不是服務端渲染的，所以下面的結論是很多篇文章過後總結的，具體文章在下面，知識這東西就是拿來分享學習的嘛，學會了就是我的~哈哈

客戶端渲染

最原始的前端，頁面在瀏覽器獲取到JavaScript和CSS等檔案之後開始渲染，完全在客戶端（也就是瀏覽器），路由是客戶端路由，也就是現在大部分的SPA單頁應用。

服務端渲染

頁面由服務端渲染過後直接返回html頁面給前端，url的變更會重新整理整個頁面，也就是以前的php和jsp模式

同構

高階點的詞Universal APP，為什麼要同構，因為客戶端渲染存在一個缺點，就是首屏載入過大檔案或過多檔案會變得特別慢，因此可以把首屏放在服務端來渲染來提升首屏速度，首屏載入過後路又開始交給客戶端控制，又變成了SPA應用，整個程式碼都是用JavaScript來編寫，服務端採用nodejs。

Next.js

關於Next.js，我就不多BB了，我寫這篇文章的同時也是我第一次接觸Next.js所以才叫採坑入門，大家感興趣的可以去官網學學，還挺詳細的 ---> Next.js

新建一個Nextjs應用

學習程式設計的我們都知道，入門系列是hello world，這裡我覺得next.js還是挺友好的，因為它真的免除了我們平時所理解的服務端渲染的各種繁雜配置，只需要簡單的幾步就可以新建一個Universal App。

第一步 安裝依賴

好吧，你只需要新建一個資料夾，然後執行下面一段命令

// 初始化應用
yarn init
// 安裝三個依賴
yarn add react react-dom next
// package.json配置啟動
{
    ...
    // 新增啟動方式，選擇使用next啟動
    "script": {
        "dev": "next"
    }
    ...
}
複製程式碼

OK，你已經完成了基於next的服務端搭建，是不是真的很簡單。 接下來我們執行一下yarn dev。

Next.js踩坑入門系列（一）— Hello Next.js!
what?居然報錯了，好吧，原來Next.js預設從 pages 目錄下取頁面進行渲染返回給前端展示，並預設取 pages/index.js 作為系統的首頁進行展示。因此，我們需要新建一個pages目錄。接下在再重新啟動一下試試。

第二步 新建pages資料夾以及檔案

因為3000經常被另一個專案使用，所以我把啟動埠改成3006了，修改script的啟動方式即可：

"script": {
    "dev": "next -p 3006"
}
複製程式碼

然後我們訪問http://localhost:3006：

Next.js踩坑入門系列（一）— Hello Next.js!
ok,得到了一個非常簡潔的一個頁面，講道理，我很喜歡這種簡潔的頁面。為啥404了呢，原來我們只新建了pages目錄，剛剛也說了，它預設根路由頁面是pages下的index.js，所以我們新建一個index.js。

const Home = () => (
  <h1>我是Next的首頁</h1>
);
export default Home;
複製程式碼

Next.js踩坑入門系列（一）— Hello Next.js!
ok,現在就沒啥問題了。因為next.js預設開啟服務端渲染，也就無需我們進行任何的配置，因此現在這個極其簡單的應用就是一個Universal React APP。從頁面元素我們也可以看出來：

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

第三步 Next路由

看到這裡，新手小夥伴應該跟我一樣感嘆Next.js強大的同時也會有一個疑問，等一下，怎麼就渲染了?路由你都沒配置憑啥就出首頁了，一般的SPA至少也會配置路由才能進行頁面跳轉，這裡沒配置路由首頁出來了我還有其他頁面呢，怎麼辦？
原來，這些東西還都是Next給我們配置好的，剛才說了Next.js預設匹配pages目錄的index.js作為根路徑/，其他的路徑也是這樣按檔名匹配的。
而我們的各種路由跳轉依賴的不再是react-router而是next.js給我們封裝好的路由（其實redux也是，後面會說到）。

/pages/index.js頁面 ----> /
import React, { Fragment } from 'react';
import Link from 'next/link';
const Home = () => (
  <Fragment>
    <h1>我是Next的首頁</h1>
    <Link href='/userList'>
      <a>使用者列表頁</a>
    </Link>
  </Fragment>
);
export default Home;
複製程式碼
/pages/userList.js ----> /userList
const UserList = () => (
  <h2>我是使用者列表頁</h2>
);
export default UserList;
複製程式碼

Next.js踩坑入門系列（一）— Hello Next.js!
厲害了我的哥，不僅跳轉成功，而且對應的history也都幫我們封裝好了，後退也都正常，而且可以看到，我們無需在前端或者node端配置任何路由相關，只需要按照它的模板去寫就可以了。並且前端頁面的跳轉也是無重新整理的~

不過蘿蔔白菜各有所愛，雖然個人覺得很強大但是看不到路由還是感覺怪怪的，而且寫法也有變化，也就是路由必須在pages路徑下才可以，這樣工程大了以後豈不是會很混亂，而且頁面和路由融合在一起redux怎麼辦，感覺很臃腫啊，作為一個剛從純前端SPA過度過來的肯定很彆扭，我覺得不可能這麼low吧，肯定不會吧，稍後再探索吧。

程式碼地址

參考文章

服務端渲染與 Universal React App
D2 - 打造高可靠與高效能的React同構解決方案

QQ群：641113448 （備註：Next.js）

相關文章