尾聲

最後一天想回歸到第一天時對自己說的話「看完這些文章的讀者能夠對 Next.js 有更多的了解，能夠評估在團隊中導入 Next.js」，每多寫一篇文章就多進步一點點，也認知到 Next.js 真的是一個很棒的框架，有完整的解決方案，而且社群討論也很熱絡，寫文章時有時候碰到些問題，在 GitHub discussion 與 issue 也總是能找到解答，看樣子大家在學習時都是在同一條路上 XD

Next.js 官方的 11 版本更新文章中提到目前已經有 1600 工程師貢獻，而且甚至還有跟 Google、Facebook 等大公司合作，像是在 next/image 這個元件中就可以看到蹤跡是跟 Google 的 Chrome 工程師一起合作開發，想了解更多可以看到 Google 的工程師 Alex Castle 的分享 Why Images Hurt App Performance & How the New Next.js Image Component Can Help。

此外，Next.js 還由 Vercel 的 core team 協助幫忙維護，一個開源框架能夠由公司負責維護也是一件令人安心的事情，暫時不怕它突然間停止更新甚至被 archived。說到 Vercel 這間公司，不能不提它目前已經達到 C 輪募資，募資金額高達 1.6 億美金，Vercel 的產品是挺令人期待的。

Next.js 的學習曲線

學習曲線是大家很在意的一項成本，如果在公司想要導入新的技術或是新的框架都需要考慮到大家學習的狀況，很難的技術想要推廣必定是難上加難，還可能會壓到時程，沒有急迫的需求肯定是過不了上層的支持，願意開放時間導入新的技術。

要知道在團隊中導入 Next.js 先看它的定位在哪裡，如果想將它當作全端的框架，學習曲線一定最高的，不僅如此，而對於後端服務的需求，Next.js 不一定能夠符合，屆時還會花費時間在研究如何整合服務；但如果是想將它單純當作是前端框架的選擇，在學習曲線上會較為輕鬆，回到 Next.js 本身是想解決更容易實作 SSR 與 SSG 的方式，以及內建提供圖片、字體等等的優化方案，並不像是 React、Vue 兩者是完全不同的概念，會考慮 Next.js 的團隊不外乎是工程師已經有 React 的基礎，但是想要站在巨人的肩膀上，減少自己解決優化的問題，讓工程師專心在打造產品上，因此學習 Next.js 就不會花費時間在學習一個全新的技術上。

再者隨著全世界有許多大公司都漸漸導入 Next.js，想要推動內部團隊導入也多了一項說服的因素，在 2021 年的年初 1 月跟 9 月相比，每週的下載量已經上升 60% 以上到達 160 萬左右的次數，全世界都在用 Next.js，是不是可以考慮一下呢？ ?

Next.js 適合用來當全端框架嗎？

還是得提一下，雖然說全世界很多公司都導入了 Next.js，但不代表他們一定將 Next.js 作為是全端框架使用，因為 Next.js 其優勢在於實作 SSG 與 SSR 非常地容易，而且在優化上下了不少功夫，工程師不用太多的設定就可以建構一個效能不錯的網站。像是 Notion 的官方網站導入了 Next.js 後就得到 ligthhouse 97 分的高分，而他們也很明確的表示目前尚未實作在其他頁面，像是主產品頁面上。

有許多的討論都有提到 Next.js「可能比較適合中小型專案或是新專案」，以公司規模來說大公司可能已經發展出自己的後端服務，採用的可能是 Go、Rust、Python、Node.js 等等的程式語言，想要轉移到 Next.js 上基本上不太可能，而且也沒有必要。

個人認為 Next.js 的優勢是在前端頁面的優化，建構像是 landing page、blog、產品介紹頁面等等，從官方的 showcase 也可以看到有許多案例都是比較偏向較為靜態頁面的呈現。用來建構後端的 API routes 看起來功能還算完整，但想要使用 Next.js 本身當全端框架得審慎考慮。

導入 Next.js 的風險

工程面的風險

在團隊中導入 Next.js 一定得審慎評估其優劣與風險，關於優劣的部分在此系列文中已經討論得差不多，所以我們要來談談風險這件事。現在大家知道 Next.js 是一個可以混用 SSG、SSR、CSR 的框架，而要著重的部分在於需要有一台伺服器可以執行 SSG、SSR，在前面的章節有提到 SSG 有個很重要的特性 Incremental Static Regeneration，這個特性讓 SSG 的靜態檔案不用全部都在 build time 時產生，而是等到使用者瀏覽該頁面時像是 SSR 的形式，會在伺服器端產生靜態檔案，最後才回傳靜態檔案給使用者。

從上述可知不論是 SSG 或 SSR，伺服器都是很重要的一環，如果沒有 operation 團隊，在維運這件事情上就必須審慎評估是否會影響到工程師的開發流程，否則導入 Next.js 將有可能會是一場災難。

再者 Next.js 的 Developer Experience (DX) 跟 SEO 的優化都是令人驚豔的特性，但是要說服團隊導入，如果是已經經營許久的 2C 網站，要思考的面相就會是導入 Next.js 的優點是否真的值得投入人力，否則僅有提升部分的 SEO，得投入大量的人力，在成本消耗上會是一個風險。此外，要決定是部分的頁面導入 Next.js，還是所有的頁面都會導入，在遷移上是否會遇上困難，這都是需要被考量的因素。

非工程面的風險

即使工程團隊評估導入新的技術、導入 Next.js 是可行的方案，團隊有能量學習新的技術，有時間可以遷移原本的應用服務，但還是要回歸到問題的初衷是幫助團隊有更好的獲利，例如提升 SEO 有助於提升獲利這種因素存在。

在導入前需要想辦法說服與安撫相關的人，並且做好萬全的準備與規劃才能進行，不然這種會影響非工程團隊的重大更動，可能都不是很容易推行。我們必須提出實際上大約可以提升多少排名、風險有哪些、相關的團隊需要哪些準備與緊急應變方案。

畢竟牽連的是原本的獲利模式，除非能夠事先 Proof of Concept (POC)，然後搜集一些數據後跟大家說這個方法是有可能可行的，導入 Next.js 會更有說服力，技術以外的問題往往比技術本身難許多。

看完此系列文應該可以回答以下這些問題

1. 知道 Next.js 解決了什麼問題
   • Day02 - 為什麼你需要 Next.js ?
2. 能夠說出 file-based routing 與 code-based routing 兩者的不同
   • Day04 - Next.js 的 file-based routing
   • Day05 - 使用 Link 實作換頁
   • Day06 - 用 Next.js 做一個簡易產品介紹頁，使用 file-based routing
3. 知道 SSR、SSG、CSR 三者的不同
   • Day03 - 深入淺出 CSR、SSR 與 SSG
   • Day07 - 在 Next.js 中使用 pre-rendering (getStaticProps) — Part 1
   • Day08 - 在 Next.js 中使用 pre-rendering (getStaticProps) — Part 2
   • Day09 - 在 Next.js 中使用 pre-rendering (getServerSideProps)
   • Day11 - 在 Next.js 中使用 CSR - feat. useSWR
4. 知道為什麼官方不推薦使用 getInitialProps
   • Day10 - 為什麼官方不推薦使用 getInitialProps
5. 如何在 Next.js 中建構 API
   • Day12 - 該來寫 API 了，API routes 簡介
   • Day13 - 重構產品頁面 API，使用 API rotues - feat. mongodb
6. 知道如何在 Next.js 使用 authentication 的 library，例如 next-auth
   • Day14 - 在 Next.js 如何做 authentication
   • Day15 - 在 Next.js 做 JWT 驗證，使用既有的 Backend API - PART 1
   • Day16 - 在 Next.js 做 JWT 驗證，使用既有的 Backend API - PART 2
7. 知道如何部署應用至 vercel
   • Day17 - 把 Next.js 部署到 Vercel 上吧！
8. 如何加速頁面載入的速度
   • Day18 - 如何在頁面中預先載入其他的頁面
   • Day27 - 在 Next.js 如何正確地使用 dynamic import
   • Day28 - Next.js 如何優化圖片在網頁上的體驗？
9. 知道這幾個檔案的用途 _app.tsx 、 _document.tsx 、 _error 、 404.tsx 、 500.tsx
   • Day21 - _document 可以做什麼呢？
   • Day22 - 錯誤捕捉、全域 CSS、共用 Layout，就用 _app.tsx 來搞定吧！
   • Day24 - 遇到 404 或 500 怎麼辦，客製化錯誤頁面
10. 知道 <Image /> 解決了什麼問題
    • Day28 - Next.js 如何優化圖片在網頁上的體驗？
11. 怎麼在 Next.js 實作共用 layout 的 pattern
    • Day23 - 在 Next.js 中如何共用 Layout
12. 知道如何整 eslint、prettier、@typescript-eslint
    • Day19 - 寫出更有品質的程式碼，信 eslint 得永生
13. 如何設定 path alias
    • Day20 - 提開發者體驗 (DX)，使用 path alias
14. 知道怎麼使用 babel-pluing-import 解決 import 不是 ES module 的套件引發無法 tree shaking 的問題
    • Day25 - 如何在 Next.js 中正確地使用 lodash，使用 babel-plugin-import
15. 知道怎麼使用 purgecss 移除用不到的 CSS
    • Day26 - 移除沒用到的 CSS，使用 Purge CSS (feat. Ant Design, Tailwind)
16. 知道知道在 Next.js 如何使用 TypeScript
    • Day02 - 為什麼你需要 Next.js ?
    • Day29 - 當 Next.js 遇見了 Typescript

Next.js 的學習資源

以下是筆者推薦的學習資源，不外乎是官方文件與官方 GitHub，由於是 Vercel 的 core team 在極力維護的關係，在回答 discussion 與 issue 上速度都很快，而且社群的討論度也不錯，所以大部分在學習時的問題都可以在上面找到答案。

• https://nextjs.org/
• https://github.com/vercel/next.js/

另一個推薦的資源是以下這堂 Udemy 最多人上的 Next.js 課程，而且擁有 4.7 顆星星的高分，講者說話也很清楚，循序漸進地帶著大家學習。如果是喜歡線上課程的讀者，可以考慮以下這堂課程：

• https://www.udemy.com/course/nextjs-react-the-complete-guide/

要自己尋找學習資源時，最好的資源是 1 年內的，因為 Next.js 在 9、10、11 都有很重要的 feature，而目前 11 是最新去年才發布的版本，所以 1 年內的資源才比較有可能是包含 11 版本的內容，不怕遺失某些新的 feature。

系列文總結

不知道各位讀者在看完這 30 篇文 IT 鐵人的文章後是不是有得到自己期待的東西，這些文章的出發點都是我在學習 Next.js 時不斷地反問自己，有時學到一個新的概念就想延伸想說為什麼這裡可以這樣寫，所以在文章的內容難免會有些繁瑣，還請各位讀者見諒。

不過畢竟只有 30 天，感覺還是有很多東西可以寫，只是沒有時間再繼續寫下去，也許之後有機會在 Medium 上再補上文章吧 XD

很感謝 StarBugs 的夥伴一起努力，偶而幹話一下讓我可以撐完 IT 鐵人賽，大家辛苦了。

最後也感謝自己終於撐過來完成這項艱難的任務， 明年不要再來了 (誤)

如果有興趣知道更多技術類的知識，可以追蹤我的 Medium 或 StarBugs:

• Medium: https://airwaves.medium.com/
• StartBugs: https://weekly.starbugs.dev/

「從零開始學習 Next.js」系列文就到這邊，我是 Leo，下台一鞠躬，大家再見～