大家好，我是 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 系列文章的前 15 天預計是介紹基本知識，希望可以在前 15 天建立起 Next.js 的基本觀念，知道怎麼用 Next.js 製作一個基本的網站。其中基本觀念包括：
由於 Next.js 並非是所有團隊都會在第一時間導入的框架，後來審慎評估後，覺得 Next.js 的優點大過於缺點，值得導入至產品中，但這時可能後端的服務已經成型許久，有些服務不適合轉移到 Next.js 中，例如既有 authentication 的流程也許是不好改動的。因此，會有一些篇章是會講述如何在 Next.js 使用既有的後端服務導入 authentication 的流程。
對於前端開發者來說 Developer Experience (DX) 是一個很重要的東西，好的 DX 可以讓平常開發更有效率，在後續維護時可以更快地發現問題，因此在這個系列文章中會介紹如何在 Next.js 中使用 prettier、eslint 等等的工具，讓團隊撰寫的程式碼更有品質；現在 TypeScript 是趨勢之一，所以會有篇章著重於介紹在 Next.js 使用 TypeScript 的指南；程式碼散落在專案的四處已經是常見的情況，會有一章介紹怎麼在 Next.js 設定 webpack 的 path alias，讓 import 程式碼夠有效率。
在後面的 6 天會介紹在 Next.js 中更進一步的知識，例如 Next.js 有些客製化頁面的方法或是如何載入靜態資源、styled-component SSR 等議題：
另外 3 天會講述如何在 Next.js 裡面優化 bundle size：
最後一天要撰寫的內容還尚未決定，目前初步構想希望可以寫回歸到主題本身，評估導入 Next.js 風險與學習成本的文題，透過前面的所見所聞作出總結。
以上就是這個 Next.js 系列文章的簡介，很開心可以跟 StarBugs 星巴哥技術週刊 的夥伴們一起參加 IT 鐵人賽，終於擺脫拖延症開賽，接下來 29 天就請各位讀者放鬆心情學習新知識吧！
iThome鐵人賽
看影片追技術