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

時間 2019-11-06

原文原文鏈接

寫在前面

說實話，我我的仍是以爲文筆愈來愈不錯了，之前的文章都是一個問題悶到天黑，文章寫的有點亂因爲文章過於龐大致使不是一鼓作氣的，思路有時候會很混亂。因此我也準備開始寫系列文，哈哈，嘗試一下嘛~系列文的好處就是每次講一個點，爭取講的細緻一些，但願你們多多指教~php

Next.js踩坑入門系列

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

本人很是喜歡create-react-app這個腳手架，可是官方明確代表了目前不支持服務端渲染，因此只好放棄了，其實基於這個腳手架也是能夠配置的，不過我仍是先弄一個可用的，而後回來再填坑本身配置吧~前端

服務端渲染

先來講一下服務端渲染吧，目前作的項目確實是服務端渲染的，可是不是我搭的，我我的寫的一些東西都不是服務端渲染的，因此下面的結論是不少篇文章事後總結的，具體文章在下面，知識這東西就是拿來分享學習的嘛，學會了就是個人~哈哈node

客戶端渲染

最原始的前端，頁面在瀏覽器獲取到JavaScript和CSS等文件以後開始渲染，徹底在客戶端（也就是瀏覽器），路由是客戶端路由，也就是如今大部分的SPA單頁應用。react

服務端渲染

頁面由服務端渲染事後直接返回html頁面給前端，url的變動會刷新整個頁面，也就是之前的php和jsp模式webpack

同構

高端點的詞Universal APP，爲何要同構，由於客戶端渲染存在一個缺點，就是首屏加載過大文件或過多文件會變得特別慢，所以能夠把首屏放在服務端來渲染來提高首屏速度，首屏加載事後路又開始交給客戶端控制，又變成了SPA應用，整個代碼都是用JavaScript來編寫，服務端採用nodejs。git

Next.js

關於Next.js，我就很少BB了，我寫這篇文章的同時也是我第一次接觸Next.js因此才叫採坑入門，你們感興趣的能夠去官網學學，還挺詳細的 ---> Next.jsgithub

新建一個Nextjs應用

學習編程的咱們都知道，入門系列是hello world，這裏我以爲next.js仍是挺友好的，由於它真的免除了咱們平時所理解的服務端渲染的各類繁雜配置，只須要簡單的幾步就能夠新建一個Universal App。web

第一步安裝依賴

好吧，你只須要新建一個文件夾，而後運行下面一段命令編程

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

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

what?竟然報錯了，好吧，原來Next.js默認從 pages 目錄下取頁面進行渲染返回給前端展現，並默認取 pages/index.js 做爲系統的首頁進行展現。所以，咱們須要新建一個pages目錄。接下在再從新啓動一下試試。

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

由於3000常常被另外一個項目使用，因此我把啓動端口改爲3006了，修改script的啓動方式便可：

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

而後咱們訪問http://localhost:3006：

ok,獲得了一個很是簡潔的一個頁面，講道理，我很喜歡這種簡潔的頁面。爲啥404了呢，原來咱們只新建了pages目錄，剛剛也說了，它默認根路由頁面是pages下的index.js，因此咱們新建一個index.js。

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

ok,如今就沒啥問題了。由於next.js默認開啓服務端渲染，也就無需咱們進行任何的配置，所以如今這個極其簡單的應用就是一個Universal React APP。從頁面元素咱們也能夠看出來：

第三步 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;
複製代碼

厲害了個人哥，不只跳轉成功，並且對應的history也都幫咱們封裝好了，後退也都正常，並且能夠看到，咱們無需在前端或者node端配置任何路由相關，只須要按照它的模板去寫就能夠了。而且前端頁面的跳轉也是無刷新的~

不過蘿蔔白菜各有所愛，雖然我的以爲很強大可是看不到路由仍是感受怪怪的，並且寫法也有變化，也就是路由必須在pages路徑下才能夠，這樣工程大了之後豈不是會很混亂，並且頁面和路由融合在一塊兒redux怎麼辦，感受很臃腫啊，做爲一個剛從純前端SPA過分過來的確定很彆扭，我以爲不可能這麼low吧，確定不會吧，稍後再探索吧。

代碼地址