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 夥伴们撰写过系列文章：

• Kyle - React.js 从 0 到 1 推坑计画
• 神 Q 超人 - 在 React 生态圈内打滚的一年 feat. TypeScript

因此，在这个 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 队友系列文传送门

• 今晚，我想来点 Web 前端效能优化大补帖！

• 从以卵击石到坚若磐石之 Web API 安全性全攻略

• 前端工程师学习 DevOps 之路