當我聽到一個新名詞，在 dive in 前，第一步我一定會問自己：要怎麼用一句話來解釋這個名詞？所以該怎麼用一句話說明 Next.js 是什麼呢？

我會說 Next.js 是 Vercel 在 2016 年推出的全端框架。

看似簡短的一句話，其實裡面包含了三個重點：

1. Vercel - 開發 Next.js 的團隊，請好好記住這個名字，未來可能時不時會看見它。

2. 「框架」：相信這兩個字，在各位軟體工程師們的世界中如影隨形，為什麼要特別強調框架這個概念呢？事實上在 Next.js 官方的 Tutorial 的第一部分 What is Next.js，就特別將 framework 這個詞設為粗體。這時你可能會聯想到，常有人會說 React 是一個 Javascript “library” 不是一個框架，到底兩者差在哪裡呢？

   開發一個 app 包含了許多面向，像是 UI、routing、data fetching、rendering、部署等等，而一個「框架」應該要能全面地 cover 這些需求。假如習慣使用像是 create-react-app 這些 boilerplate 來建立 React 專案，可能會以為 React 本身一手包辦了所有事情。但其實打開 create-react-app 專案的 package.json 檔案，你會發現它只幫你先裝好了常用的套件，像是 React-DOM、Webpack 等等。事實上 React 本身只負責 UI 的建造，其餘工作必須交給其他第三方套件執行，像是 React-DOM 負責真實操控 DOM、React-Router 負責路由切換等等，因此會說 React 只是一個 library。

   Libray 好處是讓專案的自由度高，開發者可依需求自由挑選工具，像是可使用不同 React Renderer (ex: React Native、React TV，有興趣可參考 CT 大的 awesome-react-renderer GitHub repo) 將 UI 渲染到不同裝置上，且通常與第三方套件的相容性也會比較高；但自由度高也意味著需額外花時間精力選擇、設定各式工具。

   相較於 library，框架則提供較為完整的 solutions，而 Next.js 除了整合 React.js 負責 UI 建造外，也提供了 routing、rendering、data fetching、intergrations 等任務的解決方案。

   Next.js is a React framework that gives you building blocks to create web applications.

   By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.

   Next.js - What is Next.js

但 React 到底是個 library 還是框架，其實一直存在不同的觀點。像今年 React core team 的成員之一 Sebastian 在接受 Vercel 的訪談時，提到 React 也是用 framework 這個詞，他也說他沒很在意到底該說 library 還是 framework，所以這部分或許挺見仁見智。

3. 「全端」：相較於 React、Vue、Angular 等前端框架，Next.js 同時支援 server-side 和 client -side 的開發環境，也因此可在同個 codebase 跑一些後端功能，像是 Pre-Rendering、Server Components、寫 API endpoints 等，提供開發者在 SEO、效能優化、資料保密等議題上有更多選擇，後續文章會再詳細介紹！

完賽後補充：
雖然官方是用 full-stack framework 這個詞，但 Next.js 只能支援叫基礎的後端需求，像簡單 CRUD，環境也不是這麼完整 (ex: 預設 server 沒有入口點 )。所以假如要做一些較為複雜的後端應用，或 stateful 連線等，可能還是需另起後端環境。

因此相較於「全端」框架，可能會更接近前端 + Backend For Frontend 框架，較適合前端為主，配合一些簡單後端應用的情境。
特別感謝 huli 大在Day 30 文章的留言補充！

講到這邊必須澄清一個觀念，Server-Side Rendering 不是只有 Next 可以做到，也不是只有 SSR 才能 SEO。事實上React 其實也可以做到 Server-Side Rendering 與 Server Component，只是使用門檻較高，像是你必須額外建置一個後端 server、處理 Hydration、調整 webpack 打包設定等等，有興趣可以參考官方教學影片，或 Redux 作者，也是 React 成員之一的 Dan Abramov 的教學文章。

Client-Side Rendering 的架構也是有優化 SEO 的方式，例如準備一份有完整內容的 HTML，當偵測到 request agent 是搜尋引擎爬蟲，就餵给它這份檔案( 有興趣可參考莫大的文章 )。只是一樣，開發上會相對複雜，這些 solutions 也不一定所有情境下都適用。

而 Next.js 則是在這些需求上，提供更簡單的 solutions，減少在 server-side 渲染內容，以及優化 SEO 開發上的難度。 像預設 Pre-rendering，或像是 Next.js 13 的 components 預設為 Server Components，假如要轉為 Client Components 也只需要簡單一句 ‘use client’ 的註解，這部分後面會介紹。

講了這麼多，這時候你可能會問：等等，前面一直提到 Pre-Rendering、Server-Side Rendering 和 Client-Side Rendering，這些名詞是什麼意思？怕大家被一堆技術名詞轟炸會看不下去，這部分就留到明天分享！

謝謝大家耐心的閱讀，我們明天見！