{"id":10406,"library":"next","title":"Next.js","description":"Next.js 16.2.4 is a powerful React framework for building full-stack web applications. It offers features like server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR), and a modern App Router for developing performant and scalable web experiences. The project maintains an active development pace with frequent canary releases leading to regular stable updates.","status":"active","version":"16.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/vercel/next.js","tags":["javascript","react","framework","nextjs","web","server","node","front-end","backend","typescript"],"install":[{"cmd":"npm install next","lang":"bash","label":"npm"},{"cmd":"yarn add next","lang":"bash","label":"yarn"},{"cmd":"pnpm add next","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Next.js primarily uses ES Modules, especially within React components. While CommonJS might work in some Node.js contexts, ESM is the recommended approach for client-side and most server-side components.","wrong":"const Image = require('next/image');","symbol":"Image","correct":"import Image from 'next/image';"}],"quickstart":{"code":"import React from 'react';\n\n// app/page.tsx\nexport default function HomePage() {\n  return (\n    <main className=\"flex min-h-screen flex-col items-center justify-center p-24\">\n      <h1>Hello, Next.js!</h1>\n      <p>This is a simple server component rendered by Next.js 16.</p>\n    </main>\n  );\n}\n","lang":"typescript","description":"This code demonstrates a basic Next.js App Router server component. Save this as `app/page.tsx` in a Next.js project to render a simple 'Hello, Next.js!' page."},"warnings":[{"fix":"Upgrade your Node.js environment to version 20.9.0 or later. Consider using a Node.js version manager like `nvm` or `volta`.","message":"Next.js 16.x requires Node.js version 20.9.0 or newer. Running with an older Node.js version will prevent the application from starting.","severity":"breaking","affected_versions":">=16.2.4"},{"fix":"Check your `package.json` for `react` and `react-dom` versions. If they don't match `^18.2.0 || ^19.0.0`, update them, delete `node_modules`, and reinstall dependencies (`npm install` or `yarn install`).","message":"Next.js 16.x has strict peer dependencies on React. Ensure your project uses React and React DOM versions `^18.2.0` or `^19.0.0`.","severity":"breaking","affected_versions":">=16.2.4"},{"fix":"If experiencing caching issues with non-CSS/font assets in Safari within Pages Router, consider implementing alternative cache-busting strategies or adjusting your server's caching headers for those specific asset types.","message":"For Pages Router applications, the Safari `?ts=` cache-buster URL parameter is now specifically scoped to CSS and font assets only. This might change caching behavior for other asset types if you were relying on its broader application.","severity":"gotcha","affected_versions":">=16.2.4"}],"env_vars":null,"last_verified":"2026-04-18T00:00:00.000Z","next_check":"2026-07-17T00:00:00.000Z","problems":[{"fix":"Upgrade your Node.js environment to version 20.9.0 or newer. You can use `nvm install 20` and `nvm use 20`, or `volta install node@20`.","cause":"Your current Node.js version is older than 20.9.0.","error":"Error: The \"next\" package requires Node.js version \">=20.9.0\"."},{"fix":"Ensure components render identically on both server and client. Place client-only logic within `useEffect` hooks, use `typeof window` checks, or consider `suppressHydrationWarning` for unavoidable mismatches (with caution).","cause":"The HTML rendered by your React components on the server-side differs from what is rendered on the client-side, often due to client-side-only code executing prematurely on the server, or dynamic content changing between renders.","error":"Error: Hydration failed because the initial UI does not match what was rendered on the server."},{"fix":"Add `'use client';` as the absolute first line of the file to mark it as a Client Component, allowing client-side React features. Ensure there are no comments or other statements before it.","cause":"You are using client-side React features (e.g., `useState`, `useEffect`, event handlers) in an App Router component that is implicitly a Server Component, or the `'use client'` directive is not the very first line of the file.","error":"Error: \"use client\" must be at the top of the file."},{"fix":"Verify that `react` and `react-dom` versions in your `package.json` match Next.js's peer dependency requirements (`^18.2.0 || ^19.0.0`). Delete your `node_modules` directory and `package-lock.json` (or `yarn.lock`), then run `npm install` (or `yarn install`) again.","cause":"The `react` or `react-dom` peer dependencies are not correctly installed or are incompatible with the Next.js version, or there are multiple instances of React causing conflicts.","error":"Module not found: Can't resolve 'react'"}],"ecosystem":"npm"}