大家好，我是 S.C，
八月初偶然在 Youtube 上看到一段影片，提到學習分成三層次 - 自己會、能教會他人、能設計教材，看完蠻有感觸的，因為自踏入程式開發的世界以來，一直期許自己對技術的認知不會停留在「自己會用」上，而是能進一步了解技術背後要解決的問題、底層原理、trade-off、其他工具選擇等等，並且在讀完各式文件後，能用自己的話和別人聽得懂的方式，分享所知所學。所以決定把握今年鐵人賽的機會，在學習新知的同時，將這 30 天所學的內容整理成系統性的文章，和大家分享！

最初在想鐵人賽的題目時，剛好讀到尤雨溪 2016 年在知乎上討論 Virtual DOM 是否真的比原生 DOM 操作「更快」的文章 ( 文章連結 )。文章最後有提到 Virtual DOM 最大的價值之一是 Virtual DOM 可以渲染到 DOM 以外的後端環境，因此你可能聽過 React Native 等用 React 編寫網頁以外應用程式的的技術。

在我看来 Virtual DOM 真正的价值从来都不是性能，而是它 1) 为函数式的 UI 编程方式打开了大门；2) 可以渲染到 DOM 以外的 backend，比如 ReactNative

恰巧當時從 C.T 大的 Medium 上認識了Electron React Boilerplate，所以花了點時間，將之前寫的網站嘗試搬到桌機板的應用程式上。所以本來想以學習 Electron.js 和 Eletron React Boilerplate 的心得作為本次鐵人賽的題目，但適逢最近在參與公司以 Next.js 重構產品的 project，去年年底 Next.js 也迎來了官方稱之為 2016 Next.js 推出以來最大的改版，身為前端工程師的我也希望自己對於好戰友 React 和 Next 能有更深、更完整的認識，因此最後決定把握鐵人賽的機會，好好認識 Next.js 13！

至於 React Boilerplate 開發桌機應用程式的分享，就等鐵人賽結束後再與大家分享囉！

進入正題：

完賽補充：Next.js 已於 2023/10/26 推出 Next.js 14，v14 有更動的內容會在文章中補充

Next.js 是一個 React-based 的全端框架，最廣為人知的特色是降低 Pre-Rendering 的實踐門檻，讓開發者可以較輕鬆地優化應用程式的 SEO。除此之外，Next.js 也提供許多機制和工具，像是 Caching、Lazy Loading、Rust-based 工具等等，持續在優化開發體驗和網頁運作效能，這部分在進階篇也會跟大家分享。

根據 React 新版的官方教學文件，團隊推薦使用 React-based 的框架 (ex: Next.js, Remix, Gatsby 等 ) 來開發 production-grade 的應用程式。團隊也提到 React 未來優化的方向將朝向跟如何更好地與 React-based 框架整合，其中特別強調已與 Next.js 團隊達成共識，共同研究、開發更多創新與實用的功能，像是這兩年很常聽到的 React Server Components。

As we’ve explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like React Server Components.

React - Start a New React Project

接下來的 29 天，我會逐步來帶大家來認識 Next.js 以及 Next.js 13 改版的內容。文章會分為基礎篇和進階篇兩部分，基礎篇會著重在改版內容與基礎功能介紹 ( ex: 環境設定、routing 機制、Client Components 與 Server Components 等等 )；進階篇則會進一步探索 Next.js 背後運作原理以及官方提供的性能優化相關機制。

本系列適合具備 React 基礎知識的讀者。假如還不熟悉 React，建議可以先從 React 開始認識。

感謝大家耐心讀完篇幅頗長的參賽前言！假如對於之後的文章有任何問題或想法，也都歡迎與我聯繫，我們明天見！