動態網站開發升級術｜用 Next.js 快速打造電商網站介面

零基礎也適用！帶你無痛打造電商網站介面

# 從零學習 Next.js，課後將能實際做出專案

Next.js 是什麼？適合開發哪一種網站呢？

# 業界火紅的 React 框架，許多大企業愛用

Next.js 是一個基於 React.js 的開放原始碼的網路套件架構，且有許多大公司使用，包含：Tiktok、幣安、Netflix、Uber、Twitch，npm 上每週下載次數也高達 103 萬次。

它能讓網路應用程式開發者使用 React.js 的模式來創造靜態或動態網頁。相較之下，傳統 React.js 的單頁應用大多必須由客戶端的 JavaScript 繪製網頁的完整內容。因此，網路爬蟲可以更有效率的自動瀏覽網頁並達到更好的 SEO。

那麼，有哪些網站適合使用 Next.js 呢？如果你們網站使用者很多、更新非常頻繁的話，你可以選擇 Next.js。

因為如果內容過多，我們會花大量的時間來 Build 專案，當頁面幾百個時可能一兩分鐘即可，但如果大到千、萬等級時，重建起來會非常費時。舉例來說，例如程式人常常瀏覽的 iT 邦幫忙，就適合選用 Next.js。

同樣都是 React 的框架，Next.js 和 Gatsby 框架有什麼差異呢？

# 特性、使用情境一次搞清楚​

網頁問題一堆，使用者體驗差，該怎麼辦？

😵 狀況 1：網站排名好差，明明已經花大錢買廣告曝光，為什麼 SEO 還是起不來？

Next.js 最大的特色以及優點就是應用伺服器端渲染（Server Side Rendering）的技術。

SSR 可以解決 SEO 的問題，因為爬蟲爬到的都是從 server 建立好並帶上資訊的完整 HTML。SSR 不必等到 JS 執行完畢後才能讓使用者看到畫面，在 server 回傳 HTML 後使用者就能夠看到頁面，即使因為 JS 還沒被執行，所以畫面還不具備互動性，但讓使用者先看到畫面，再利用人的感知延遲時間去執行 JS code，可以大大減少使用者的跳出率。

😵 狀況2：網頁跑了老半天，圖片卻只跑出一半

對於使用者來說瀏覽一個畫面載入越少資源越好，因為關係到使用者能夠更快速看到頁面中顯示第一個像素，此外越少資源代表 Large Contentful Paint 的評分也就好。而 Next.js 可以讓使用者在瀏覽頁面時實際上只需優先載入看到的部分，看不到的部分可能等待使用者滾動畫面，接近該區塊時才載入圖片，藉此讓使用者不必在一開始就載入所有的資源。

😵 狀況3：開發網站需要準備一堆不同的圖片尺寸，好費時、好麻煩

在手機版的網頁中，我們不希望讓使用者載入過大的圖片檔案，而是必須根據使用者的裝置大小載入合適的圖片，要解決這個問題，可以使用 srcset 這個 <img /> 的屬性。

而以往要做到這件事需要很多的設定，例如使用 webpack、gulp 等工具對圖片進行處理，但在 Next.js 中的 <Image /> 元件已經幫我們做掉這件事，幾乎不用設定就可以讓網頁可以根據使用者的裝置大小載入合適的圖片。

漸進式課程設計， 一步步開發 SEO 成效好、使用者體驗佳的網頁