Next.js Logo
官方文件使用案例英文官網

說明文件

  • 快速開始
  • 基礎功能

    • 頁面
    • 獲取資料

      • 概述
      • getServerSideProps
      • getStaticPaths
      • getStaticProps
      • 增量靜態生成
      • 客戶端
    • 內建支援 CSS
    • 版面佈局
    • 圖片最佳化
    • 字體最佳化
    • 處理靜態檔案
    • 快速重新整理
    • ESLint
    • TypeScript
    • 環境變數
    • 支援瀏覽器和語言版本
    • 使用外部 Script

    路由

    • 介紹
    • 動態路由
    • 透過程式切換頁面
    • 切換頁面但不載入資料
  • 邁向成品
  • 測試

API 參考文件

  • CLI
  • Create Next App
  • next/router
  • next/link
  • next/image
  • next/script
  • next/head
  • next/amp
  • next/server
  • next/future/image
  • Edge Runtime
  • Data Fetching

    • getInitialProps
    • getServerSideProps
    • getStaticPaths
    • getStaticProps
  • Static Optimization Indicator
  • next.config.js

    • Introduction
    • Environment Variables
    • Base Path
    • Rewrites
    • Redirects
    • Custom Headers
    • Custom Page Extensions
    • CDN Support with Asset Prefix
    • Custom Webpack Config
    • Compression
    • Runtime Configuration
    • Disabling x-powered-by
    • Disabling ETag Generation
    • Disabling HTTP Keep-Alive
    • Setting a custom build directory
    • Configuring the Build ID
    • Configuring onDemandEntries
    • Ignoring ESLint
    • Ignoring TypeScript Errors
    • exportPathMap
    • Trailing Slash
    • React Strict Mode
    • URL Imports
    • Build indicator

說明文件

  • 快速開始
  • 基礎功能

    • 頁面
    • 獲取資料

      • 概述
      • getServerSideProps
      • getStaticPaths
      • getStaticProps
      • 增量靜態生成
      • 客戶端
    • 內建支援 CSS
    • 版面佈局
    • 圖片最佳化
    • 字體最佳化
    • 處理靜態檔案
    • 快速重新整理
    • ESLint
    • TypeScript
    • 環境變數
    • 支援瀏覽器和語言版本
    • 使用外部 Script

    路由

    • 介紹
    • 動態路由
    • 透過程式切換頁面
    • 切換頁面但不載入資料
  • 邁向成品
  • 測試

API 參考文件

  • CLI
  • Create Next App
  • next/router
  • next/link
  • next/image
  • next/script
  • next/head
  • next/amp
  • next/server
  • next/future/image
  • Edge Runtime
  • Data Fetching

    • getInitialProps
    • getServerSideProps
    • getStaticPaths
    • getStaticProps
  • Static Optimization Indicator
  • next.config.js

    • Introduction
    • Environment Variables
    • Base Path
    • Rewrites
    • Redirects
    • Custom Headers
    • Custom Page Extensions
    • CDN Support with Asset Prefix
    • Custom Webpack Config
    • Compression
    • Runtime Configuration
    • Disabling x-powered-by
    • Disabling ETag Generation
    • Disabling HTTP Keep-Alive
    • Setting a custom build directory
    • Configuring the Build ID
    • Configuring onDemandEntries
    • Ignoring ESLint
    • Ignoring TypeScript Errors
    • exportPathMap
    • Trailing Slash
    • React Strict Mode
    • URL Imports
    • Build indicator

Data Fetching 概述

範例
  • WordPress 範例 (演示)
  • 開始使用 markdown 文件在你的Blog (演示)
  • DatoCMS 範例 (演示)
  • TakeShape 範例 (演示)
  • Sanity 範例 (演示)
  • Prismic 範例 (演示)
  • Contentful Example (演示)
  • Strapi 範例 (演示)
  • Prepr Example (演示)
  • Agility CMS 範例 (演示)
  • Cosmic 範例 (演示)
  • ButterCMS 範例 (演示)
  • Storyblok 範例 (演示)
  • GraphCMS 範例 (演示)
  • Kontent 範例 (演示)
  • Static Tweet 演示
Data fetching 在 Next.js 中提供你多種選染文黨的方式, 取決於您的應用程序的實例。 這裡包括欲渲染使用 Server-side Rendering 或 Static Generation , 並在運行時更新或創建內容 Incremental Static Regeneration 。
SSR:伺服器渲染 使用 getServerSideProps 了解有關 Next.js 中服務器端渲染的更多信息。
SSG: 靜態生成 使用 getStaticProps 了解有關 Next.js 中靜態生成的更多信息。
CSR: 客戶端渲染 使用 SWR 了解有關 Next.js 中客戶端渲染的更多信息。
動態路由 使用 getStaticPaths 了解有關 Next.js 中動態路由的更多信息。
ISR: 增量靜態再生 了解有關 Next.js 中增量靜態再生的更多信息。

查看更多

預覽模式 了解有關 Next.js 中增預覽模式的更多信息
路由: 了解有關 Next.js 中路由的更多資訊。
TypeScript: 在你的頁面中添加 TypeScript 。
本篇文章由Danny101201

Danny101201

貢獻翻譯。瞭解如何參與貢獻