Next.js 概述

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

---

為什麼選擇 Next.js？

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

---

Next.js 的主要特性

1. 基於檔案的路由

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

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

// Access this page at: /about

2. 預(yù)渲染

Next.js 預(yù)設(shè)預(yù)先渲染每個頁面，確保更好的效能和 SEO。

• 靜態(tài)網(wǎng)站產(chǎn)生（SSG）：頁面在建置時產(chǎn)生。
• 伺服器端渲染（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>{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. 動態(tài)路由

使用方括號建立動態(tài)路線。

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

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

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

5. 內(nèi)建 CSS 支援

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

// File: pages/about.js
export default function About() {
  return <h1>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>{message}</h1>;
}

1. 增量靜態(tài)重新產(chǎn)生（ISR）：更新靜態(tài)頁面而不重建整個網(wǎng)站。

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

---

使用 Vercel 進行部署

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

---

Next.js 的優(yōu)點

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

---

Next.js 的用例

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

---

結(jié)論

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

---

以上是Next.js 概述：現(xiàn)代 React 應(yīng)用程式的終極框架的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！