description
Next.js allows you to fetch data in multiple ways, with pre-rendering, server-side rendering or static-site generation, and incremental static regeneration. Learn how to manage your application data in Next.js.

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
Enterspeed Example (Demo)

Note: Next.js 13 introduces the app/ directory (beta). This new directory has support for colocated data fetching at the component level, using the new React use hook and an extended fetch Web API.

Learn more about incrementally adopting app/.

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.