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

rockswang 發布于2019-08-23 11:38 / 1447人閱讀

摘要：接下來我們運行一下。因此，我們需要新建一個目錄。接下在再重新啟動一下試試。因為默認開啟服務端渲染，也就無需我們進行任何的配置，因此現在這個極其簡單的應用就是一個。代碼地址參考文章服務端渲染與打造高可靠與高性能的同構解決方案

寫在前面

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

Next.js踩坑入門系列

(一) Hello Next.js

(二) 添加Antd && CSS

陸續更新...

筆者小白技術棧目前主要是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。

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 = () => (
  我是Next的首頁
);
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 = () => (
  
    我是Next的首頁
    
      用戶列表頁
    
  
);
export default Home;

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

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

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

代碼地址

參考文章

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

GPU云服務器云服務器 next.js next.js 樣式 Next.js 12 正式發布、Yarn 入門系列課程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97246.html

Next.js踩坑入門系列（二）— 添加Antd && CSS

摘要：踩坑入門系列一二添加三目錄重構再談路由陸續更新個人對于腳手架的有一種執念，如果搭建出來就是一個首頁標簽跳轉，實在不是我這個處女座的風格，因此第二步我就想引用框架，相信很多使用的開發者用的也都是這個框架吧。 Next.js踩坑入門系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目錄重構&&再談路由陸續更新... 個人對于腳手架的UI有一種執...

lifesimple 2019-08-23 11:38 評論0 收藏0
nextjs踩坑

摘要：踩坑幾乎一整年沒咋寫文章，主要是懶，加上工作也挺忙。遇到一些坑，也有一些收獲這里記錄一下。個人習慣使用啟動服務。總結說了上面那么多，其實官方文檔里都有相關例子，就當我的個人踩坑記錄吧。 Next.js踩坑幾乎一整年沒咋寫文章，主要是懶，加上工作也挺忙。但是想趁著年底發一篇，希望明年更勤奮一點。其實不是沒東西寫，就是想深入一個東西還是很困難的，要查各種資料，最終還是懶就是了。 next...

JayChen 2019-08-23 15:06 評論0 收藏0
學習 Next.js: 入門

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署哪位分高的幫忙創建一個的標簽謝謝現暫時放在標簽下面了新建文章有時間限制一會全部發上來這是最近兩天原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

Miracle 2019-08-20 16:54 評論0 收藏0
Next.js項目實戰踩坑指南

摘要：項目實戰踩坑指南移動端，滾動卡頓解決方案主容器增加樣式路由跳轉后樣式丟失原因下樣式根據頁面動態加載，瀏覽器緩存文件造成樣式不更新。跨域及傳遞的問題第一步，登錄成功后服務器返回。第二步，瀏覽器自動緩存，再后續請求中攜帶此。項目實戰踩坑指南 1. 移動端overflow:auto，ios滾動卡頓解決方案：主容器增加樣式-webkit-overflow-scrolling: touc...

用戶83 2019-08-23 13:46 評論0 收藏0
學習 Next.js: 使用路由掩碼創建干凈的URL

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署使用路由掩碼創建干凈的在前面的課程中我們學到了如何使用查詢串創建動態頁面一次為基礎我們一篇博客的原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

silenceboy 2019-08-20 16:56 評論0 收藏0