Skip to content
Join live – Get insights, tips, + Q&A from Sanity developers on our latest releases
Sanity
    • Platform

      Sanity Studio

      Flexible editing environment

      APIs

      Connect to anything

      Content Lake

      Real-time database

      Try product demo

      Features

      Real-time collaboration

      Fearlessly work with content

      Precise content querying

      Treat content as data with GROQ

      Localization

      Coherent messaging across territories

    • Use cases

      E-commerce

      Richer shopping experiences

      Marketing sites

      Control your story

      Products & services

      Innovate and automate

      Mobile apps

      Content backend for every OS

      View all

      Integrations

      Shopify
      Mux
      Vercel
      Netlify
      Algolia
      Cloudinary
      BigCommerce
      Commerce Layer
      Smartling
      Transifex
      View all
    • Learn

      Documentation
      Studio API Reference
      API reference
      Guides
      GROQ cheat sheet
      Sanity UI
      Get started

      Build and share

      Templates
      Tools and plugins
      Schemas and snippets
      Project showcase
      Share your work
      Browse Exchange

      Frameworks

      React
      Vue
      Next.js
      Nuxt.js
      Svelte
      Remix
      Gatsby
      Astro
      Angular
      Eleventy
      View all
    • Discover

      Blog
      Resource library
      Glossary
      Agency partners
      Become a partner
      Technical support
      Talk to sales

      Case studies

      Puma

      Source of truth for global markets

      Aether

      Unique digital shopping experience

      Morning Brew

      Omnichannel media distribution

      InVision

      Delivering exceptional customer experiences

      View all

      Popular guides

      Headless CMS
      Structured content
      Content modeling
      Headless SEO
      Static websites
      View all
    • Enterprise
    • Pricing
    • Log in
    • Contact sales
    • Get started
Contact salesGet started

Page content

  • What is Next.js?
  • What are the core features of Next.js?
  • How does Next.js compare to other frameworks?
  • What are the most common use cases for Next.js?
  • All glossary terms

      • Accessibility
      • Angular
      • Astro

      • Client Side Rendering (CSR)
      • Composability
      • Content Delivery Network (CDN)
      • Content block
      • Custom input component
      • Customer Data Platform (CDP)

      • Deployment
      • Document Object Model

      • Editing environment
      • Eleventy (11ty)
      • Extensibility

      • Feature flags
      • Feature rollout
      • Feature testing
      • Flutter
      • Front end

      • Gatsby
      • GraphQL

      • Hot Module Replacement (HMR)
      • Hugo

      • Incremental Static Regeneration (ISR)

      • JSX
      • Jamstack
      • JavaScript framework

      • Markdown
      • Modular content

      • Next.js
      • Node.js
      • Nuxt

      • Personalization engine
      • Progressive Web Application (PWA)

      • Query Language

      • React Native
      • React.js
      • Release cycle
      • Remix
      • Rendering
      • Reusable content
      • Rich Text
      • Role-Based Access Control

      • SAML
      • Server Side Rendering (SSR)
      • Single Page Application (SPA)
      • Single Sign-On (SSO)
      • Svelte
      • SvelteKit

      • User flow

      • Vite
      • Vue.js

      • Webhook
    Back to glossary

    Next.js overview

    Next.js is a powerful web development framework that simplifies the process of building fast, interactive applications. Based on React, a popular JavaScript library, Next.js offers additional structure and features such as server-side rendering and static generation.

    Page content

    • What is Next.js?
    • What are the core features of Next.js?
    • How does Next.js compare to other frameworks?
    • What are the most common use cases for Next.js?
  • All glossary terms

      • Accessibility
      • Angular
      • Astro

      • Client Side Rendering (CSR)
      • Composability
      • Content Delivery Network (CDN)
      • Content block
      • Custom input component
      • Customer Data Platform (CDP)

      • Deployment
      • Document Object Model

      • Editing environment
      • Eleventy (11ty)
      • Extensibility

      • Feature flags
      • Feature rollout
      • Feature testing
      • Flutter
      • Front end

      • Gatsby
      • GraphQL

      • Hot Module Replacement (HMR)
      • Hugo

      • Incremental Static Regeneration (ISR)

      • JSX
      • Jamstack
      • JavaScript framework

      • Markdown
      • Modular content

      • Next.js
      • Node.js
      • Nuxt

      • Personalization engine
      • Progressive Web Application (PWA)

      • Query Language

      • React Native
      • React.js
      • Release cycle
      • Remix
      • Rendering
      • Reusable content
      • Rich Text
      • Role-Based Access Control

      • SAML
      • Server Side Rendering (SSR)
      • Single Page Application (SPA)
      • Single Sign-On (SSO)
      • Svelte
      • SvelteKit

      • User flow

      • Vite
      • Vue.js

      • Webhook

    What is Next.js?

    Next.js is a front-end framework that builds on the capabilities of React, a versatile JavaScript library used for crafting engaging user interfaces. What sets Next.js apart is its ability to simplify complex aspects of web development by providing a comprehensive suite of tools and features.

    One key feature offered by Next.js is server-side rendering, which significantly improves the performance and search engine optimization (SEO) attributes of web applications. This means websites built with Next.js load faster and rank better in search results.

    Another distinguishing attribute of Next.js is static generation. This feature pre-generates files during build time, allowing them to be served ahead of time without needing to wait for data fetching.

    The files are then distributed globally ensuring even faster loading times.

    Next.js also offers incremental static regeneration which blends static generation with dynamic updates for elements that have either not been generated statically or have changed since they were first generated.

    Developers using Next.js often pair it with Sanity, a headless Content Management System (CMS), making it easier to manage content across their projects.

    In summary, this powerful tool provides developers with everything they need to create fully interactive, highly dynamic, and performant web applications.

    What are the core features of Next.js?

    At the heart of Next.js are several core features that set it apart from other web development frameworks. One such feature is its innovative approach to rendering, offering both server-side rendering and static site generation. Server-side rendering allows for data to be fetched at request time, improving performance and SEO capabilities. On the other hand, static site generation enables files to be built at compile-time and served in advance, enhancing loading speeds.

    Next.js also excels in code-splitting which ensures that only necessary code is loaded for each page, making the applications faster and more efficient. This feature significantly enhances response times leading to a better user experience.

    Another notable aspect of Next.js is its tight integration with Sanity - a headless CMS service that provides an API for managing content updates effortlessly. The collaboration between Sanity and Next.js allows developers to build highly dynamic websites with ease.

    Lastly, Next.js offers pre-configured JavaScript tooling based on Rust for faster builds while maintaining high-quality developer experience. It's this combination of efficiency, speed, flexibility- all backed by strong community support- that makes Next.js a preferred choice among many web developers today.

    How does Next.js compare to other frameworks?

    Comparing Next.js to other frameworks, its unique value proposition becomes more clear. Unlike traditional React applications that require additional configurations for tooling and functionalities, Next.js comes out of the box with features like server-side rendering and static site generation.

    It's also important to note that while React is excellent for building user interfaces, it doesn't provide solutions for other aspects of application development. This means developers often have to spend considerable time configuring tools and solving common application requirements. With Next.js, these challenges are addressed head-on as it extends the capabilities of React by providing a structured framework with pre-configured functionalities.

    Unlike many JavaScript frameworks which focus solely on client-side rendering - a method that can lead to performance issues and poor SEO outcomes - Next.js leverages server-side rendering as well as static site generation. These features make websites built with Next.js performant and SEO-friendly right from the get-go.

    What are the most common use cases for Next.js?

    Next.js is a versatile framework, capable of addressing diverse web development needs across multiple industries. One of its popular applications is in the realm of e-commerce. With its fast rendering and robust SEO capabilities, it offers an optimal solution for businesses looking to create high-performance online stores that rank well on search engines.

    Blogs and marketing websites also often leverage the power of Next.js. Its server-side rendering and static site generation features allow for rapid content changes, making it ideal for publishing platforms that frequently update their content.

    News apps and documentation websites benefit from Next.js's ability to handle real-time updates efficiently. Similarly, entertainment platforms and community-driven web apps can utilize its capabilities to offer interactive user experiences with high performance.

    Booking apps, auction sites, information hubs – all these digital experiences can be enhanced using Next.js due to its speed, versatility and scalability.

    For many common use cases, when integrated with Sanity's modern headless CMS, managing content becomes effortless regardless of the website type or size.

    Ready to see Sanity and Next.js in action?

    Discover how Sanity can leverage frameworks like Next.js to build high-performance, content-rich websites.

    Watch demo nowSign up free

    Last updated: October 12, 2023

    Product

    Sanity StudioAPIsContent LakeSecurity & Compliance
    • Sanity vs Contentful
    • Sanity vs Strapi
    • Sanity vs Wordpress
    • Sanity vs Adobe Experience Manager
    • Sanity vs Hygraph
    • Sanity vs Sitecore
    • Sanity vs Storyblok
    • Sanity vs Contentstack
    • Sanity vs Prismic
    • Sanity vs Drupal
    • Sanity vs ButterCMS

    Resources

    DocumentationBlogResource libraryCase Studies
    • React Blog
    • Gatsby Blog
    • Next.js Landing Pages
    • Making a PWA
    • Single Page Application
    • Svelte & Typescript App
    • Vue & Tailwind Blog
    • Developer Portfolio Templates
    • Form validation with Yup
    • Live Preview with Next.js and Sanity.io
    • Next.js blog
    • Next.js personal website
    • Clean Next.js + Sanity app
    • Clean Remix + Sanity app
    • Clean SvelteKit + Sanity app
    • All Templates
    • Agency partners
    • Technology partners
    • Headless CMS 101
    • Static Sites 101
    • Headless Commerce 101
    • CMS for enterprise
    • Headless SEO
    • Localization
    • Content as a Service
    • What is a DXP?
    • Typescript 101
    • Ecommerce SEO
    • What is a Composable DXP?
    • What is an API?
    • GraphQL vs REST
    • React CMS
    • Next.JS CMS
    • CMS for Shopify
    • API-first CMS
    • Content platform
    • Multilingual CMS
    • Static Site CMS
    • Gatsby CMS
    • Node CMS
    • E-commerce CMS
    • Vue CMS
    • Angular CMS
    • GraphQL CMS
    • Newspaper CMS
    • Magazine CMS
    • CMS for apps
    • Remix CMS
    • Nuxt CMS
    • SvelteKit CMS
    • Agile CMS
    • Eleventy CMS
    • Multisite CMS

    Company

    Contact SalesEnterpriseCareersTerms of ServicePrivacy PolicyAccessibility Statement

    Stay connected

    • GitHub
    • Slack
    • Twitter
    • YouTube
    • Stack Overflow
    • Blog RSS
    • Newsletter
    ©Sanity 2023