iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

從零開始學習 Next.js系列 第 1

Day01 - 系列文介紹、規劃

前言

大家好,我是 Leo,這是我第一次參加 IT 鐵人,心裡滿是期待。過去只有在 Medium (筆名 Airwaves) 上經營自己的技術部落格,每年到了 9 月這個時候總是看到許多 IT 界的大大們共襄盛舉一起參加 IT 鐵人,連續精(ㄓㄜ ˊ)進(ㄇㄛ ˊ)自己 30 天。每年我也有想過參加的念頭,但總有「我能堅持 30 天嗎」、「寫什麼題目比較好」等的念頭,時間過著過著,拖延症持續發作的情況下,每年都沒有成功開賽過。今年是成為社會新鮮人的第一年,總要為自己定下些目標,不然時間感覺一眨眼就過去了。

主題與目標

原本在想要不要寫學習 React 的文章,但是已經有很多前輩已經寫過相似的文章,重複寫別人的寫過的好像沒意思,所以就一直在尋找較少人寫過的技術主題。後來看到 Notion 網站改版至 Next.js,而且拿到 lighthouse 97 分的高分,就覺得 Next.js 應該是一個值得投資學習的技術,在官網的 showcase 頁面中也是琳瑯滿目的公司網站,所以最後就決定 IT 鐵人的主題是「從零開始學習 Next.js」。

此外,這次學習 Next.js 也是在嘗試讓自己學習如何評估一項技術適不適合導入到產品中,國外已經有需多很棒的先例,如果想要說服團隊導入新技術,自己也要對該技術有一定程度的掌握,所以也趁這次機會一邊學習一邊評估這樣技術導入的成本。

在導入技術時,不外乎要評估各式各樣的成本,包括學習成本、時間成本、金錢等,如果是自己做的 side project,想要選擇什麼樣的技術,採用什麼樣的套件都是只要開心就好。但是如果要真的要導入到產品中,就需要廣泛思考,研究各式各樣的可能性,審慎評估團隊是否可以接受導入新技術的成本。

這 30 篇文章會以教學性質的方式撰寫,讓我用「費曼學習法」學會 Next.js 這項技術吧!

先備知識

由於 Nextj.s 是基於 React 的框架,所以期待讀者是對於 React 已經有基礎的認識,知道如何用 React 撰寫一個應用。而許多前輩們已經寫過很棒的介紹 React 的文章 ,過去 IT 鐵人賽中也有 StarBugs 夥伴們撰寫過系列文章:

因此,在這個 Next.js 系列文章中就不再介紹 React 的先備知識。如果是已經對於 React 有經驗的讀者們,可以放鬆心情享受這 30 篇學習 Next.js 的文章 ?。

文章規劃

Next.js 的基本知識介紹 (約 16 天)

在 Next.js 系列文章的前 15 天預計是介紹基本知識,希望可以在前 15 天建立起 Next.js 的基本觀念,知道怎麼用 Next.js 製作一個基本的網站。其中基本觀念包括:

  • 已經有了 React 為什麼需要 Next.js
  • 深入淺出 CSR、SSR 與 SSG
  • Next.js 的 file-based routing
  • 使用 Link 實作換頁
  • 用 Next.js 做一個簡易產品介紹頁 - 使用 file-based routing
  • 在 Next.js 中使用 pre-rendering (getStaticProps)
  • 在 Next.js 中使用 pre-rendering (getServerSideProps)
  • 為什麼官方不推薦使用 getInitialProps
  • 在 Next.js 中使用 CSR - feat. useSWR
  • 該來寫 API 了,API routes 簡介
  • 重構產品頁面 API,使用 API rotues - feat. mongodb
  • 把 Next.js 部署到 Vercel 上吧!

由於 Next.js 並非是所有團隊都會在第一時間導入的框架,後來審慎評估後,覺得 Next.js 的優點大過於缺點,值得導入至產品中,但這時可能後端的服務已經成型許久,有些服務不適合轉移到 Next.js 中,例如既有 authentication 的流程也許是不好改動的。因此,會有一些篇章是會講述如何在 Next.js 使用既有的後端服務導入 authentication 的流程。

  • 在 Next.js 如何做 authentication
  • 在 Next.js 做 JWT 驗證,使用既有的 Backend API

提升開發 Next.js 應用的 Developer Experience (約 3 天)

對於前端開發者來說 Developer Experience (DX) 是一個很重要的東西,好的 DX 可以讓平常開發更有效率,在後續維護時可以更快地發現問題,因此在這個系列文章中會介紹如何在 Next.js 中使用 prettier、eslint 等等的工具,讓團隊撰寫的程式碼更有品質;現在 TypeScript 是趨勢之一,所以會有篇章著重於介紹在 Next.js 使用 TypeScript 的指南;程式碼散落在專案的四處已經是常見的情況,會有一章介紹怎麼在 Next.js 設定 webpack 的 path alias,讓 import 程式碼夠有效率。

  • 寫出更有品質的程式碼,信 eslint 得永生
  • 提開發者體驗 (DX),使用 path alias
  • 當 Next.js 遇見了 Typescript

Next.js 的進階知識介紹 (約 10 天)

在後面的 6 天會介紹在 Next.js 中更進一步的知識,例如 Next.js 有些客製化頁面的方法或是如何載入靜態資源、styled-component SSR 等議題:

  • 如何在頁面中預先載入其他的頁面 (prefetch)
  • _document 可以做什麼呢?
  • 錯誤捕捉、全域 CSS、共用 Layout,就用 _app 來搞定吧!
  • 在 Next.js 中如何共用 Layout,不是用 _app 就可以了嗎?
  • 遇到 404 或 500 怎麼辦,客製化錯誤頁面

另外 3 天會講述如何在 Next.js 裡面優化 bundle size:

  • 如何在 Next.js 中正確地使用 lodash,使用 babel-plugin-import
  • 在應用程式中優化圖片的使用 lazy loading, assets and SEO
  • 移除沒用到的 CSS,使用 Purge CSS

最後一天要撰寫的內容還尚未決定,目前初步構想希望可以寫回歸到主題本身,評估導入 Next.js 風險與學習成本的文題,透過前面的所見所聞作出總結。

小結

以上就是這個 Next.js 系列文章的簡介,很開心可以跟 StarBugs 星巴哥技術週刊 的夥伴們一起參加 IT 鐵人賽,終於擺脫拖延症開賽,接下來 29 天就請各位讀者放鬆心情學習新知識吧!


Starbugs 隊友系列文傳送門


下一篇
Day02 - 為什麼你需要 Next.js ?
系列文
從零開始學習 Next.js30

尚未有邦友留言

立即登入留言