Next.js 概述：現代 React 應用程式的終極框架

Next.js 概述

Next.js 是一個基於 React 的框架，用於建立具有伺服器端渲染 (SSR)、靜態網站產生 (SSG)、API 路由和其他強大功能的 Web 應用程式。它由 Vercel 創建，簡化了使用 React 建立可擴展、快速且可用於生產的應用程式的過程。

---

為什麼選擇 Next.js？

1. 伺服器端渲染（SSR）：透過在伺服器上渲染頁面來優化效能並提高 SEO。
2. 靜態網站產生 (SSG)：在建置時產生靜態 HTML，以實現快速載入和可擴充性。
3. API 路由：無需額外的後端框架即可建置無伺服器 API。
4. 基於檔案的路由：使用基於檔案系統的方法簡化路由。
5. 最佳化效能：自動影像最佳化、程式碼分割和延遲載入。
6. 內建 CSS 支援：可與 CSS、SASS、TailwindCSS 和 CSS-in-JS 函式庫搭配使用。

---

Next.js 的主要特性

1. 基於檔案的路由

• pages目錄中的每個檔案都會自動成為一個路由。

// File: pages/about.js
export default function About() {
  return <h1 id="About-Page">About Page</h1>;
}

// Access this page at: /about

2. 預渲染

Next.js 預設預先渲染每個頁面，確保更好的效能和 SEO。

• 靜態網站產生（SSG）：頁面在建置時產生。
• 伺服器端渲染（SSR）：依照請求渲染頁面。

// SSG Example
export async function getStaticProps() {
  return { props: { message: "Static Content" } };
}

// SSR Example
export async function getServerSideProps() {
  return { props: { message: "Dynamic Content" } };
}

export default function Page({ message }) {
  return <h1 id="message">{message}</h1>;
}

3. API 路由

在pages/api目錄中建立後端API端點。

// File: pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello from API" });
}

4. 動態路由

使用方括號建立動態路線。

// File: pages/product/[id].js
import { useRouter } from "next/router";

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  return <h1 id="Product-ID-id">Product ID: {id}</h1>;
}

5. 內建 CSS 支援

支援全域 CSS、CSS 模組以及 TailwindCSS 等第三方函式庫。

// File: pages/about.js
export default function About() {
  return <h1 id="About-Page">About Page</h1>;
}

// Access this page at: /about

---

性能特點

1. 自動程式碼分割：僅載入每個頁面所需的 JavaScript。
2. 影像最佳化：使用 next/image 元件最佳化影像。

// SSG Example
export async function getStaticProps() {
  return { props: { message: "Static Content" } };
}

// SSR Example
export async function getServerSideProps() {
  return { props: { message: "Dynamic Content" } };
}

export default function Page({ message }) {
  return <h1 id="message">{message}</h1>;
}

1. 增量靜態重新產生（ISR）：更新靜態頁面而不重建整個網站。

// File: pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello from API" });
}

---

使用 Vercel 進行部署

• Next.js 針對在其託管平台 Vercel 上的部署進行了最佳化。
• 自動建置和部署專案。
• 提供分析、預覽環境和效能最佳化。

---

Next.js 的優點

1. 改進的 SEO：SSR 和 SSG 確保搜尋引擎可以輕鬆抓取內容。
2. 快速效能：預先渲染、快取和最佳化功能。
3. 靈活性：支援混合渲染（​​結合SSR、SSG和CSR）。
4. 開發者體驗：熱模組替換（HMR）、直覺的 API 和優秀的文件。

---

Next.js 的用例

1. 電子商務網站
   • 動態路由、最佳化效能和伺服器端渲染，帶來更好的使用者體驗。
2. 部落格與行銷頁面
   • 靜態網站產生確保快速載入和可擴充性。
3. 儀表板與管理面板
   • 用於個人化內容的 API 路由和 SSR。

---

結論

Next.js 透過將 React 的強大功能與 SSR、SSG 和 ISR 等效能提升功能結合，簡化了現代 Web 開發。它是一個多功能框架，可以從小型個人專案擴展到企業級應用程式。

---

以上是Next.js 概述：現代 React 應用程式的終極框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！