終於來到尾聲了，今天我們將對 Next.js 來做一番介紹，介紹完後，我們會跟這二十九天來的戰友 Gatsby 來做一次簡單的比較，最後會告訴大家，什麼時候該選用什麼樣的工具才是最適合的，話不多說，我們就直接來吧！

什麼是 Next.js ?

Next.js 是一款基於 React.js、Node.js、webpack 與 Babel 建立的免費開源框架，用來構建 SSR ( Server Side Rendering ) 或靜態網站。

Next.js 希望我們能輕易地建構 SSR，它大幅改善我們的開發體驗，減少我們建立一個 SSR 網站所要花費心力，它不僅支援 Hot Reload ，同樣的，它的 pages 目錄也會自動幫我們生成路由，最棒的是，性能上很優秀，對 SEO 的幫助也是眾人皆知。

Gatsby 與 Next 的異同

上面說著說著，讀者會不會覺得我直接去第一篇抄 Gatsby 的簡介複製貼上？
沒錯 Gatsby 真的有很多地方跟 Next 有類似之處，例如

• 學習曲線
  Gatsby 與 Next 的學習曲線都不算陡峭，使用者能很輕易的進行開發與使用

• 開發體驗
  Gatsby 與 Next 都有豐富且詳細的文件，只要對於 React 有基礎的理解，都快速地進行開發

• 優秀的性能
  Gatsby 與 Next 建構出來的網站都能在 Lighthouse 中取得非常高的分數

• SEO
  Gatsby 與 Next 建構的網站相比單純的 SPA ，同樣的對於 SEO 都有非常大的幫助

• 出色的功能
  Gatsby 與 Next 同樣都有提供 Hot Reload，也都有在 Pages 目錄下自動產生路由的功能，還有其它類似代碼拆分、快取等等方便的功能供我們使用。

但你說他們是一樣的嗎？
不，其實他們還是有不同的地方，

Gatsby 是 SSG ( Static Site Generator )，所謂的靜態網頁生成器，他們將我們的程式碼在建立時，生成一個一個的 HTML。

而 Next 主要用在 Server 端，每當有使用者來我們的網站時，我們才會動態的生成該頁的 HTML 來提供給訪客。

兩者都是生成 HTML / CSS / JS ，只是生成的時間點上的差異，造就了他們的不同，Gatsby 在 build time 的時候做生成，而 Next 在 run time 的時候生成。

所以根本上的差異在於，Gatsby 可以在完全沒有 Server 的狀態下運行，而 Next 需要有 Server 的協助才能正常的運作。

使用的時機

那說了這麼多，我們還是不知道什麼時候該使用 Next ，什麼時候該使用 Gatsby 啊？

有個非常簡單的區分方式，
如果你們網站使用者很多、更新非常頻繁的話，你可以選擇 Next，
因為如果內容過多，我們會花大量的時間來 Build 專案，當頁面幾百個時可能一兩分鐘即可，但如果大到千、萬等級時，重建起來真的是會要人命，而這類型的網站例如 巴哈姆特、iT 邦幫忙等，都比較適合選用 Next。

而如果你們的網站屬於小型的部落格或者公司官網等等，偶爾進行更新，內容篇數都是可預期的話，那非 Gatsby 莫屬，Gatsby 對於各大 CMS 的支援，還有安全性的考量，甚至是 Gatsby-Image 提供的幫助，都是 Next 在這方面不及 Gatsby 的原因。

結論

Gatsby 與 Next 都是很棒的工具，端看我們在什麼樣的需求上，就像你要登高，會需要的是梯子而不會是鋸子吧？

在適合的時間點選擇適合的工具，永遠都是工程師需要具備的能力，誰不希望能順利、愉快的開發，準時、快樂的回家呢？

參考資料

Comparison of Gatsby vs Next.js
Next.js vs. GatsbyJS: A developer’s perspective
Gatsby vs Next.JS - What, Why and When?