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

Documentation

  • Getting Started
  • 基礎功能

    • 頁面
    • Data Fetching

      • Overview
      • getServerSideProps
      • getStaticPaths
      • getStaticProps
      • Incremental Static Regeneration
      • Client side
    • Built-in CSS Support
    • Layouts
    • Image Optimization
    • Font Optimization
    • Static File Serving
    • Fast Refresh
    • ESLint
    • TypeScript
    • Environment Variables
    • Supported Browsers and Features
    • Handling Scripts
  • 邁向成品

API Reference

  • 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 Overview

Examples
  • WordPress Example (Demo)
  • Blog Starter using markdown files (Demo)
  • DatoCMS Example (Demo)
  • TakeShape Example (Demo)
  • Sanity Example (Demo)
  • Prismic Example (Demo)
  • Contentful Example (Demo)
  • Strapi Example (Demo)
  • Prepr Example (Demo)
  • Agility CMS Example (Demo)
  • Cosmic Example (Demo)
  • ButterCMS Example (Demo)
  • Storyblok Example (Demo)
  • GraphCMS Example (Demo)
  • Kontent Example (Demo)
  • Static Tweet Demo

Data fetching in Next.js allows you to render your content in different ways, depending on your application's use case. These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration.

SSR: Server-side rendering Learn more about server-side rendering in Next.js with getServerSideProps.
SSG: Static-site generation Learn more about static site generation in Next.js with getStaticProps.
CSR: Client-side rendering Learn more about client side rendering in Next.js with SWR.
Dynamic routing Learn more about dynamic routing in Next.js with getStaticPaths.
ISR: Incremental Static Regeneration Learn more about Incremental Static Regeneration in Next.js.

Learn more

Preview Mode: Learn more about the preview mode in Next.js.
Routing: Learn more about routing in Next.js.
TypeScript: Add TypeScript to your pages.