Next.js 概述

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

---

為什麼選擇 Next.js？

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

---

Next.js 的主要特性

1. 基於檔案的路由

• pages目錄中的每個(gè)檔案都會(huì)自動(dòng)成為一個(gè)路由。

// 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ù)先渲染每個(gè)頁(yè)面，確保更好的效能和 SEO。

• 靜態(tài)網(wǎng)站產(chǎn)生（SSG）：頁(yè)面在建置時(shí)產(chǎn)生。
• 伺服器端渲染（SSR）：依照請(qǐng)求渲染頁(yè)面。

// 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端點(diǎn)。

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

4. 動(dòng)態(tài)路由

使用方括號(hào)建立動(dòng)態(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 等第三方函式庫(kù)。

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

// Access this page at: /about

---

性能特點(diǎn)

1. 自動(dòng)程式碼分割：僅載入每個(gè)頁(yè)面所需的 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)頁(yè)面而不重建整個(gè)網(wǎng)站。

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

---

使用 Vercel 進(jìn)行部署

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

---

Next.js 的優(yōu)點(diǎn)

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

---

Next.js 的用例

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

---

結(jié)論

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

---

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