Deploy Next.js in seconds →

Skip to content

Next.js

Learn
ShowcaseDocsBlogAnalyticsExamplesEnterprise
Feedback
Learn

Documentation

Getting Started
Pages
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
Introduction
Dynamic Routes
Imperatively
Shallow Routing
Introduction
Dynamic API Routes
API Middlewares
Response Helpers
Going to Production
Deployment
Authentication
Testing
Building Forms
Next.js Compiler
Preview Mode
Dynamic Import
Automatic Static Optimization
Static HTML Export
Absolute Imports and Module Path Aliases
Using MDX
Introduction
Adding AMP Components
AMP Validation
AMP in Static HTML export
TypeScript
Customizing Babel Config
Customizing PostCSS Config
Custom Server
Custom `App`
Custom `Document`
Custom Error Page
`src` Directory
Multi Zones
Measuring performance
Middleware (Beta)
Debugging
Error Handling
Source Maps
Codemods
Internationalized Routing
Output File Tracing
Security Headers
Overview
Streaming SSR
React Server Components
Switchable Runtime
Upgrade Guide
Incrementally Adopting Next.js
Migrating from Gatsby
Migrating from Create React App
Migrating from React Router
FAQ

API Reference

CLI
Create Next App
next/router
next/link
next/image
next/script
next/head
next/amp
next/server
next/streaming
Edge Runtime
getInitialProps
getServerSideProps
getStaticPaths
getStaticProps
Static Optimization Indicator
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

Documentation

Getting Started
Pages
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
Introduction
Dynamic Routes
Imperatively
Shallow Routing
Introduction
Dynamic API Routes
API Middlewares
Response Helpers
Going to Production
Deployment
Authentication
Testing
Building Forms
Next.js Compiler
Preview Mode
Dynamic Import
Automatic Static Optimization
Static HTML Export
Absolute Imports and Module Path Aliases
Using MDX
Introduction
Adding AMP Components
AMP Validation
AMP in Static HTML export
TypeScript
Customizing Babel Config
Customizing PostCSS Config
Custom Server
Custom `App`
Custom `Document`
Custom Error Page
`src` Directory
Multi Zones
Measuring performance
Middleware (Beta)
Debugging
Error Handling
Source Maps
Codemods
Internationalized Routing
Output File Tracing
Security Headers
Overview
Streaming SSR
React Server Components
Switchable Runtime
Upgrade Guide
Incrementally Adopting Next.js
Migrating from Gatsby
Migrating from Create React App
Migrating from React Router
FAQ

API Reference

CLI
Create Next App
next/router
next/link
next/image
next/script
next/head
next/amp
next/server
next/streaming
Edge Runtime
getInitialProps
getServerSideProps
getStaticPaths
getStaticProps
Static Optimization Indicator
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.
Basic Features: PagesgetServerSideProps

Was this helpful?
Edit this page on GitHub