尾声

最後一天想回归到第一天时对自己说的话「看完这些文章的读者能够对 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，下台一鞠躬，大家再见～