在正式開始來看 Next.js 的更多細節內容前，先來認識一下 Next.js 是什麼以及與 React 的差異，來小小的暖身一下吧！

React.js 是什麼？

先來快速看一下，我們的第二男主角 - React。

雖然有人會覺得 React 是一個框架，因為大家說的前端三大框架中，其中一個就是 React。但是其實 React 並不是一個框架，而是一個函式庫，這部分 React 官方網站上也是稱自己是一個 函式庫。除此之外，其實從實際使用體驗上，也可以感受得到 React 真的是一個函示庫，而不是框架。因為當你在使用 react 的時候，其實大多數時候就和寫一般 JavaScript 沒有太大差異，如果有碰過 Vue 的人，就能更深刻改受到身為框架的 React 和身為框架的 Vue 之間差異在哪。

這時候可能會有人會疑惑「當我們使用 React 的時候，不是也有一些寫 React 時才能使用的一些 hooks 嗎？為什麼 React 不是框架而是函式庫呢？」。

這是因為 React 的 hooks 是 React 這個函式庫提供給使用者使用的 API，讓開發者可以實現狀態管理、副作用控制等功能，但這些 API 並不強制你使用特定的架構或流程，也不限制你如何組織整個應用程式。

相對地，如果是使用 Vue，你就必須依照他的寫法去寫，例如通常需要將 HTML 撰寫在 template 區塊中，並透過 ref() 建立響應式資料，這些值會被 Vue 的響應系統包裝成 Ref 物件，需要透過 .value 來取值。所以在使用 Vue 時，你會發現自己需要遵循 Vue 設計的規則與語法風格，不能完全用純 JavaScript 的邏輯進行思考與處理，而是必須透過框架提供的方式來操作資料與更新畫面。

Next.js 是什麼？

前面稍微先看一下我們的第二男主角 - React 後，接下來男主角當然要登場啦！剛剛我們已經知道 React 是函式庫，那 Next.js 又是什麼樣的身份呢？

Next.js 是基於 React 的框架，它內建了路由系統，因此不需要像使用純 React 時一樣額外安裝像 React Router 這樣的套件。除此之外，他不僅支援我們熟悉的 CSR（Client Side Rendering）之外，它還支援 SSR（Server Side Rendering）、SSG（Static Site Generation）、以及 ISR（Incremental Static Regeneration），提供開發者多種渲染策略的選擇。

另外，Next.js 除了可以使用 React 提供的各種 hooks，Next.js 還額外提供了一些用法，讓我們可以輕鬆處理在 SSR 或 SSG 中的資料取得與頁面初始化。這些函式就是框架額外提供我們的操作方式，這樣的設計理念和我們前面提到的 Vue 有點類似，這部分也就是框架會在背後幫你做一些處理，讓開發者可以專注在實作功能，而不用自己處理每個細節。以 Vue 來說，它會幫我們自動把資料轉成響應式，讓狀態變更能即時反映在畫面上；而 Next.js 則是幫我們簡化在 SSR 或 SSG 情境下，如何取得資料、傳入頁面的過程。

Next.js 和 React 的差異

我們在剛剛已經看了 React 是什麼，也看了 Next.js 是什麼，那再讓我們回頭思考：Next.js 和 React 的關聯性，延伸到它們之間的差異。

React 是函式庫，提供了建構畫面與管理狀態的工具，而 Next.js 則是基於 React 的框架，也就是說 Next.js 是完整包含著 React 的用法（例如 Hooks），同時也加入了自己的一套使用規範與工具。

如果這麼說還是覺得模糊的話，其實可以把 React 想像成是重訓菜單集，裡面有訓練臀腿、肩、背的各種菜單，使用時可以自己任意的搭配。Next.js 則是一個重訓課表 APP，你可以在使用的時候，挑你想要進行的重訓菜單，除此之外，你但還可以使用重訓課表 APP 提供的操作介面及功能像是追蹤進度、規劃訓練流程來讓整體體驗更有結構、更有引導性。

由於 React 只是一個函式庫，所以它只有提供狀態管理、副作用控制的方法，沒有其他功能，但是 Next.js 就不一樣了，因為它是基於 React 的框架，所以他除了能夠使用 React 提供的 hooks 外，還有自己的 Router 系統，以及 SSR、SSG、ISR 這些渲染機制相關的 API。

總結來說，Next.js 是「含有 React 功能，但功能更完整，且結構更明確」的一個框架，適合需要伺服器渲染、SEO 優化，或快速起步的應用程式；而 React 本身則更適合需要較高自由度與彈性控制的前端開發者。

為什麼會需要 Next.js

今天從「React 是什麼？」看到了 「Next.js 是什麼？」，我想現在大家對於它們的身份背景大家都有一定的理解了。

這時候也許又有人會這樣說：「它們不就一個是重訓課表集，一個是重訓課表 APP 嗎？我要重訓，可以用重訓課表集就好了啊，為什麼還需要另外去碰什麼中訓課表 APP 呢？」

如果你也有這個疑問的話，那最後不妨就讓我們一起來想想，為什麼我們會需要像是重訓課表 APP 存在的 Next.js 這套框架。

我們需要開發一些頁面時，當然我們可以全部都只使用 React 就好，這種感覺就像是我們即使只使用重訓課表集，我們也可以去健身房做訓練。但如果今天你需有有一些更進階的需求，例如：

• 希望讓所有搜尋引擎都能搜尋到我首頁的資訊
• 想要加快首屏載入的時間
• 想要透過簡化的路由設定和資料夾架構來建制專案
• 想要在專案裡面完成前後端的所有需求

這時候使用 Next.js 這套框架就會更加的便利，且更容易管理、維護，因為他已經有在框架中幫你處理好這部分，你只需要照著它提供的架構和使用方法去使用即可，不需要純手工從 0 開始去實作上述你想要達成的所有需求。

我們當然還是可以維持既有的方式，繼續用單純的 React 完成所有開發，但是當碰到一些需求已經超過 React 能力所及的守備範圍時，Next.js 就是一個可以嘗試投入的框架。這就像是從健身小白前進到進階訓練階段時，比起單靠重訓菜單，使用一套有系統、有計畫且便於追蹤的課表 App 會更有效率。而對於中大型網站或商業專案來說，Next.js 扮演的角色就是這樣一套「更全面」的工具。

今天的內容就到這裡告一段落，也先預告一下接下來兩天會先來看一下 CSR、SSR、SSG 及 ISR，再來才會真正地和我們的男主角 Next.js 有更近一步的接觸。