DOCSEARCHbyAlgolia
Submit Docs

Next.js Documentation

website·Indexed 19 days ago

https://nextjs.org/

Documentation for building full-stack web applications using the Next.js App Router. Covers installation, project structure, React Server and Client Components, data fetching, mutating data with Server Actions, caching, revalidation, and optimization of images and fonts. Includes guides on authentication, CDN caching, Content Security Policy (CSP), and deploying to Node.js servers.

Tokens
1.2M
Snippets
6.5K
Records
8.8K
Agent score
96%

What's inside Next.js

  1. Overview of Next.js ESLint Plugin

    Next.js provides a bundled ESLint plugin, eslint-plugin-next, via the eslint-config-next configuration. This setup integrates recommended rule-sets from eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-next to catch common issues in Next.js applications. Note that ESLint configurations take precedence over settings in next.config.js.

  2. Overview of data fetching strategies in Next.js (Pages Router)

    Next.js provides several strategies for fetching data and rendering content based on the application's needs:

    • Static Generation: Pre-renders pages at build time using getStaticProps and getStaticPaths.
    • Server-side Rendering (SSR): Fetches data and renders the page on every request using getServerSideProps.
    • Incremental Static Regeneration (ISR): Allows creating or updating static pages at runtime without needing to rebuild the entire site.
    • Client-side Fetching: Fetches data in the browser, often using libraries like SWR for caching and revalidation.

  3. Overview of the Legacy Image component

    The next/legacy/image component is a backwards-compatible version of the original Next.js Image component. Starting with Next.js 13, it was renamed to next/legacy/image to allow for a rewritten next/image component with improved performance and developer experience. While still supported for backward compatibility, it is no longer recommended for new development.

  5. Overview of the Next.js Adapter API

    Introduced in Next.js 16.2, the Adapter API provides a stable, public, and typed contract that allows platform providers to map Next.js build output to their specific infrastructure. This ensures consistent behavior for features like streaming, Server Components, Partial Prerendering (PPR), middleware, and on-demand revalidation across different hosting environments. The API produces a versioned description of the application, including routes, prerenders, static assets, runtime targets, dependencies, caching rules, and routing decisions.

  6. Overview of Partial Prerendering (PPR)

    Partial Prerendering (PPR) is an experimental rendering strategy in Next.js that combines static and dynamic content in a single route. It generates a static shell for the page at build time, leaving holes for dynamic content. These dynamic holes are streamed in parallel from the server to the client in a single HTTP request, improving initial load performance while supporting personalized data.

  7. Overview of supported styling methods in Next.js

    Next.js provides built-in support for multiple styling approaches to suit different project needs:

    • Global CSS: Traditional CSS applied globally. Easy to start with but can lead to larger bundles and naming collisions in large apps.
    • CSS Modules: Locally scoped CSS classes that prevent naming conflicts and improve maintainability.
    • Tailwind CSS: A utility-first framework for rapid custom design using utility classes.
    • Sass: A CSS preprocessor adding variables, nested rules, and mixins.
    • CSS-in-JS: Styling embedded directly within JavaScript components for dynamic and scoped styles.

  8. Overview of Next.js application building blocks

    Next.js provides a set of integrated features for building full-stack web applications. The core development workflow typically follows this progression:

    1. Fundamentals: Start with Routing, Rendering, Data Fetching, and Styling to establish the basic structure and look of the app.
    2. Advanced Implementation: Dive into Caching, Optimization, and Application Configuration.
    3. Quality & Security: Implement Testing (using tools like Cypress, Playwright, Vitest, or Jest) and Authentication (session management and route securing).
    4. Lifecycle: Handle Deployment (managed or self-hosted) and version Upgrading.

  9. Overview of Next.js ESLint configurations

    Next.js provides the eslint-config-next package to catch common issues. It integrates rules from eslint-plugin-react, eslint-plugin-react-hooks, and @next/eslint-plugin-next. There are three primary configuration options:

    • eslint-config-next: Base configuration for JavaScript and TypeScript files.
    • eslint-config-next/core-web-vitals: Extends the base config by upgrading rules that impact Core Web Vitals from warnings to errors. Recommended for most projects.
    • eslint-config-next/typescript: Adds TypeScript-specific rules from typescript-eslint. This should be used in addition to the base or core-web-vitals config.

  11. Overview of the next/font module

    next/font automatically optimizes fonts and removes external network requests for improved privacy and performance. It provides built-in automatic self-hosting, ensuring that web fonts are loaded without layout shift. When using next/font/google, CSS and font files are downloaded at build time and self-hosted; no requests are sent to Google by the browser.
    import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

  12. Overview of Next.js Multi-Zones for micro-frontends

    Multi-Zones allow you to split a large application into smaller, independent Next.js applications that each serve a specific set of paths under a single domain. This approach improves build times and decouples code.

    Key navigation behaviors:

    • Soft Navigations: Occur when navigating between pages within the same zone (no page reload).
    • Hard Navigations: Occur when navigating between different zones (full page reload). Pages frequently visited together should be placed in the same zone to avoid hard navigations.