@zeit/next-typescript (should be removed from next.config.js and .babelrc)

The WASM target for next-swc was eliminated

Up to 17x faster

No, Next.js 16 no longer overrides scroll-behavior: smooth during navigation. To restore previous behavior, add data-scroll-behavior="smooth" to the element.

ESLint Flat Config format (aligning with ESLint v10)

You can specify: patch, minor, major, NPM dist tags (latest, canary, rc), or exact versions (e.g., 15.0.0). The default is 'minor' for stable versions.

add-missing-react-import

cacheLife profile as the second argument

5.1.0 or higher

WebSocket connections (switched from server-sent events)

url-to-withrouter

out/about.html (changed from out/about/index.html). Set trailingSlash: true in next.config.js to revert.

export const config = { amp: true }

name-default-component

18.17 (increased from 16.14 due to end-of-life status of Node.js 16.x)

12.22.0 (increased from 12.0.0, which is the first version with native ES Modules support)

Up to 5x faster

appIsrStatus, buildActivity, and buildActivityPosition

props.url (deprecated in Next.js 4 and removed in 11)

next-async-request-api (adds await or React.use() wrappers to cookies(), headers(), draftMode())

updateTag

npx @next/codemod@canary upgrade latest

Turbopack (the --turbopack flag is no longer necessary)

metadata-to-viewport-export

Head.rewind (no-op since v9.5, removed in v11)

useActionState (useFormState is deprecated but still available)

No, there were no breaking changes between versions 9 and 10.

No, Edge runtime is NOT supported in proxy; it uses Node.js runtime

3 (changed from unlimited)

npx @next/codemod

next-lint-to-eslint-cli (creates eslint.config.mjs and updates package.json scripts)

layout="fill" (unsized was deprecated in 10.0.1 and removed in 11)

4 hours (14400 seconds), changed from 60 seconds

ESLint or Biome CLI directly (next lint was removed)

16.14.0 (increased from 12.22.0)

cacheLife and cacheTag

images.domains

remove-experimental-ppr

next-request-geo-ip (installs @vercel/functions and replaces geo/ip properties)

PORT (e.g., PORT=3000 next dev)

Once (changed from twice). Use NODE_ENV === 'development' instead of checking process.argv for 'dev'.

Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+

DocumentContext

fetch(url, { cache: 'force-cache' })

built-in-next-font

@types/next (should be uninstalled)

Yes, all AMP APIs, config, and the useAmp hook were removed

next/legacy/image (use next/image instead)

React 19.2

cra-to-next (creates Pages Router and necessary config)

images: { localPatterns: [{ pathname: '/assets/**', search: '?v=1' }] }

Use the flag: next build --webpack

@next/codemod or @next-codemod-error (typecasts are prefixed with UnsafeUnwrapped)

cookies(), headers(), draftMode(), params (in layouts, pages, routes, metadata image files), and searchParams (in pages)

No, you must enable it with reactCompiler: true in next.config.js

middleware-to-proxy (renames files, exports, and config properties)

proxy

cacheComponents: true

NextRequest.geo and NextRequest.ip (these values are now provided by hosting providers)

skipProxyUrlNormalize

Explicit default.js files. Builds fail without them. Files should call notFound() or return null.

Container (deprecated in v9 and removed in v11)

next-image-experimental (removes layout, objectFit, objectPosition, lazyBoundary, and lazyRoot props)

AppContext

remove-unstable-prefix (e.g., converts unstable_cacheTag to cacheTag)

17.0.2

images.dangerouslyAllowLocalIP: true

@next/font (replaced by built-in next/font)

Use export const dynamic = 'force-static' in the route handler

NextPageContext

Yes, except for the Next.js caches. You can disable this with cleanDistDir: false in next.config.js

The 'target' configuration property

[75] (changed from allowing all qualities)

next/image was renamed to next/legacy/image, and next/future/image was renamed to next/image

proxy.ts

cacheComponents

The 'modules' and 'render' options (deprecated in v9.5 and removed in v11)

swcMinify: true in next.config.js

npx next internal trace .next/dev/trace-turbopack

--dry (execute a dry-run without modifying code) and --print (display changed output for comparison)

Up to 7x faster

true (changed from false in previous versions)

new-link

16

next-image-to-legacy-image

serverExternalPackages

refresh

No, a lockfile mechanism prevents concurrent instances

bundlePagesRouterDependencies

Yes, Webpack 5 became the default for all Next.js applications in Next.js 11

null. In Pages Router, useParams returns null on initial render until the router is ready, then updates with proper values.

It triggers a full page reload. Navigating between routes that use different root layouts causes a full page reload instead of a client-side transition.

'nodejs'. The default runtime is Node.js unless explicitly set to 'edge'.

v15.3.0. The onNavigate API for the Link component was introduced in Next.js version 15.3.0.

The last header key will override the first. When multiple headers match the same path and define the same key, the last one takes precedence.

No. usePathname is a Client Component hook only and is not supported in Server Components. This is intentional to preserve layout state across navigations.

No. File URLs with extensions (e.g., /file.txt, images/photos/picture.png) do not have trailing slash behavior applied.

No. Route groups are for organizational purposes and should not be included in the route's URL path. The parenthetical folders don't appear in resulting URLs.

No. Slots are not route segments and do not affect the URL structure. For instance, a file at /@analytics/views would still render at the URL /views.

Yes. The returned segments include Route Groups, which you might not want in your UI. You can use the filter array method to remove items that start with a bracket.

The full route will be prefetched, including all its data.

With optional catch-all, the route without the parameter is also matched. For example, app/shop/[[...slug]]/page.js matches /shop, whereas app/shop/[...slug]/page.js does not.

The middleware will be invoked for every route in your project when path matching is not restricted by a matcher.

Ungenerated dynamic segments return 404 responses. Only paths provided by generateStaticParams will be served.

v13.3.0. The useParams hook was introduced in Next.js version 13.3.0.

The three types are: beforeFiles (checked after headers/redirects, before all files, allows overriding pages), afterFiles (checked after pages/public but before dynamic routes), and fallback (checked last, before 404 rendering).

string. A single dynamic segment is typed as a string value.

308. When permanent: true is set in a redirect config, Next.js uses HTTP 308 status code, which instructs clients and search engines to cache the redirect indefinitely.

A string representing the current URL's pathname. Query parameters are excluded from the return value.

Scrolls to top by default. Both methods scroll to the top of the page unless you pass { scroll: false } as an option.

It refreshes the current route by making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client merges the updated payload without losing unaffected client-side state (useState) or browser state (scroll position).

v13.0.0. The usePathname hook was introduced in Next.js version 13.0.0.

(.) matches segments on the same level. It's used to intercept routes at the current directory level.

v13.0.0. The useSearchParams hook was introduced in Next.js version 13.0.0.

'auto'. The preferredRegion defaults to 'auto' and inherits from parent layouts if unspecified.

An array of objects where each object represents populated dynamic segments. The structure varies by route type: single segment returns { id: string }[], multiple segments returns { category: string, product: string }[], and catch-all returns { slug: string[] }[].

No. router.replace() performs a client-side navigation without adding a new entry into the browser's history stack.

No. Cache-Control headers cannot override immutable asset caching for files with SHA-hashed filenames.

Outside. redirect() throws an error, so it should be called outside the try block when using try/catch statements.

307. When permanent: false is set in a redirect config, Next.js uses HTTP 307 status code, which is temporary and not cached.

A string of the active segment or null if one doesn't exist. For example, visiting /dashboard/settings from app/dashboard/layout.js returns 'settings'.

true. By default, dynamic segments not included in generateStaticParams are generated on demand.

Characters like (, ), {, }, [, ], |, , ^, ., :, *, +, -, ?, $ require \ prefix when used literally in path patterns.

Yes. Fetch requests are automatically memoized for the same data across all generate-prefixed functions, Layouts, Pages, and Server Components, preventing redundant network calls during build time.

No. Unlike next/link and next/router which automatically prepend basePath, the next/image component requires you to explicitly include the basePath in the src attribute.

Yes. Full regex syntax is supported, including negative lookaheads and character matching. For example: /((?!api|_next/static|_next/image|favicon.ico).*).

An object with the slug property containing an array of strings. For example: { slug: ['1', '2'] }.

'replace'. The type parameter defaults to 'replace' everywhere except Server Actions (replaces current history entry).

It forces static rendering and causes an error if components use Dynamic APIs or uncached data, helping catch dynamic behavior during development.

Parallel routes are created using the @folder convention. For example, @analytics and @team define separate slots within the same layout.

Matcher values must be constants for static build-time analysis and must start with '/'. Dynamic values such as variables will be ignored.

It causes an error. Routes in different groups should not resolve to the same URL path. For example, (marketing)/about/page.js and (shop)/about/page.js both resolving to /about will cause an error.

308 (Permanent redirect) in most contexts. However, it uses 303 in Server Actions and meta tag redirect in streaming contexts.

One level below the Layout it is called from. It only returns the segment one level down, not all segments.

v10.2.0. The has property for conditional matching via headers, cookies, queries, or hosts was added in version 10.2.0.

string[]. A catch-all segment is typed as an array of strings.

'auto', 'default-cache', 'only-cache', 'force-cache', 'default-no-store', 'only-no-store', and 'force-no-store'. These options override default fetch caching behavior across all requests in the route.

Yes. During production builds, a static page that calls useSearchParams from a Client Component must be wrapped in a Suspense boundary, otherwise the build fails.

It executes before corresponding Layouts or Pages are generated. During revalidation (ISR), generateStaticParams does not run again.

The partial route down to the nearest segment with a loading.js boundary will be prefetched.

Next.js maintains active states in unmatched slots during soft navigation. However, after a full-page load (browser refresh), Next.js cannot determine the active state for slots that don't match the current URL.

It will cause the Client Component tree up to the closest Suspense boundary to be client-side rendered, allowing partial static rendering while the dynamic portion renders on the client.

No. You must not send untrusted or unsanitized URLs to router.push or router.replace, as this can open your site to cross-site scripting (XSS) vulnerabilities.

v13.0.0. The generateStaticParams function was introduced in Next.js version 13.0.0, replacing the Pages Router's getStaticPaths function.

Headers are checked before the filesystem (which includes pages and /public files). They are the first thing checked in the routing order, before redirects and rewrites.

A 404 is rendered instead. If default.js doesn't exist, Next.js renders a 404 for unmatched slots during full-page load (browser refresh).

Only the .next/static/ folder contents should be uploaded to the CDN as _next/static/. Do not upload the rest of the .next/ folder to avoid exposing server code.

It returns '/'. For the root route, usePathname returns a forward slash.

No. redirect() can be called in Client Components during the rendering process but not in event handlers.

Route groups are created by wrapping a folder's name in parentheses: (folderName). This marks the folder for organizational purposes only.

v13.0.0. The useSelectedLayoutSegment hook was introduced in Next.js version 13.0.0.

It always renders dynamically. Setting revalidate to 0 ensures the route is never cached and is rendered fresh for each request.

An array of strings containing the active segments one level down from the layout the hook was called from. It returns all segments, unlike useSelectedLayoutSegment which returns only the first.

(..) matches segments one level above. It's used to intercept routes one directory level up.

true. By default, Next.js maintains scroll position and scrolls to the top of the first Page element if not visible.

No. useParams is exclusively a Client Component hook and requires the 'use client' directive. It cannot be used in Server Components.

A read-only version of the URLSearchParams interface. In environments with /pages directory, it may return ReadonlyURLSearchParams | null.

v13.3.0. The missing property for conditional exclusion based on headers, cookies, queries, or hosts was added in version 13.3.0.

The default is false (redirects trailing slashes to non-trailing). By default, Next.js will redirect URLs with trailing slashes to their counterpart without a trailing slash. For example, /about/ will redirect to /about.

No. Paths under the .well-known/ directory (e.g., .well-known/subfolder/config.json) are exceptions and do not have trailing slash applied.

Three modifiers: * (zero or more segments), ? (zero or one segment), and + (one or more segments). For example, /about/:path* matches /about/a/b/c.

[[...folderName]]. Double brackets create an optional catch-all segment that matches routes with or without parameters.

[folderName]. The folder name is wrapped in square brackets to create a single dynamic segment.

No. Prefetching is only enabled in production.

The default is "auto" or null. Prefetch behavior depends on whether the route is static or dynamic.

v15.4.0. The 'auto' value as an alias for the default prefetch behavior was added in version 15.4.0.

It forces static rendering and returns empty values for cookies, headers, and search parameters. The route is treated as fully static regardless of dynamic data access.

v9.5.0. The redirects configuration feature was introduced in Next.js version 9.5.0.

string[] | undefined. An optional catch-all segment can be either an array of strings or undefined.

false. By default, the Link adds a new URL to the browser's history stack rather than replacing it.

No. If one slot is dynamic, all slots at that level must be dynamic. Static and dynamic slots cannot coexist at the same route segment level.

assetPrefix is applied only in production environments, not during the development server phase. It is also automatically applied when deployed on Vercel.

1. Headers checked/applied, 2. Redirects checked/applied, 3. Proxy, 4. beforeFiles rewrites, 5. Static public directory and non-dynamic pages, 6. afterFiles rewrites, 7. Fallback rewrites.

/// , /// , and ///

'next/server'. Import with: import { NextResponse } from 'next/server' and import type { NextRequest } from 'next/server'

Route. It is used to statically type links to prevent typos when using next/link.

{} (empty object). The documentation states req.query is an object containing query string parameters that defaults to {}.

router.replace(href: string, { scroll: boolean })

An object with name and value properties. It accepts a cookie name (string) parameter.

Promise. For example: params: Promise<{ slug: string }>. You must use async/await or React's use function to access parameter values.

{} (empty object). The documentation states req.cookies is an object containing cookies from the request that defaults to {}.

Yes. Event handlers (onLoad, onError, onLoadingComplete) require a Client Component.

isEnabled (boolean property), enable() method, and disable() method.

No. You cannot export both the metadata object and generateMetadata function from the same route segment.

LayoutProps. Use it with a route string: LayoutProps<'/dashboard'> to automatically infer typed slots from your directory structure.

Yes. Fetch requests inside generateMetadata are automatically memoized for the same data across generateMetadata, generateStaticParams, Layouts, Pages, and Server Components.

Yes. draftMode() is an async function that returns a promise, requiring async/await or React's use hook.

v22.18.0+ (where process.features.typescript is enabled by default). For versions v22.10.0 to v22.17.x, opt in with NODE_OPTIONS=--experimental-transform-types.

No. In version 14 and earlier, cookies was a synchronous function, though this behavior is deprecated in Next.js 15.

satisfies. The documentation shows using the satisfies keyword for validation with these types.

Request or NextRequest. NextRequest is imported from 'next/server' and is an extension of the Web Request API.

NextConfig. Import it with: import type { NextConfig } from 'next' and use it as: const nextConfig: NextConfig = { /* config options */ }

typescript.tsconfigPath in next.config.ts

'next'. Import them with: import type { NextApiRequest, NextApiResponse } from 'next'

"lazy" or "eager"

NextPage<P, IP> where P is props and IP is initial props.

Promise

src (string or StaticImport) and alt (string) are always required. width and height (numbers) are also required unless using the fill prop or static import.

get(), getAll(), has(), set(), delete(), and toString()

AppRouterInstance. It can be imported from 'next/dist/shared/lib/app-router-context.shared-runtime'.

router.prefetch(href: string, options?: { onInvalidate?: () => void })

experimental.typedEnv in next.config.ts

'next'. Import with: import type { MetadataRoute } from 'next' and use as MetadataRoute.Robots or MetadataRoute.Sitemap.

http.ServerResponse. The documentation states NextApiResponse is 'an instance of http.ServerResponse' from Node.js.

number from 1-100

v15.0.0-RC. Dynamic route parameters are now promises and must be awaited: const { team } = await params

'next'. Import with: import type { NextPage } from 'next'

get, getAll, set, delete, has, and clear

Yes. The metadata object and generateMetadata function exports are only supported in Server Components.

A function receiving { src, width, quality } that returns a string URL.

Use a generic type parameter: NextApiResponse<ResponseData> where ResponseData is your custom type defining the response structure.

next-env.d.ts. This file is auto-generated in the project root and references Next.js type definitions.

PageProps. Use it with a route string literal: PageProps<'/blog/[slug]'> to get autocomplete and strict keys for params.

'next/app'. Import with: import type { AppProps } from 'next/app'

string. For example, for the route /dashboard/invoices, usePathname would return '/dashboard/invoices'.

Use InferGetServerSidePropsType as the type for the page component props parameter.

By default, permanentRedirect uses push in Server Actions and replace everywhere else.

'next/navigation'. The redirect() function accepts an optional type parameter using RedirectType.replace or RedirectType.push.

next.config.mts. This explicitly indicates it's an ESM module where top-level await and dynamic import are supported.

http.IncomingMessage. The documentation states NextApiRequest is 'an instance of http.IncomingMessage' from Node.js.

Promise<MetadataRoute.Sitemap> (returns an array of URL entries)

typedRoutes in next.config.ts

Use InferGetStaticPropsType as the type for the page component props parameter.

".next/types/**/*.ts" must be included in the tsconfig.json include array.

React.ReactNode. The type definition is: { children: React.ReactNode }

MetadataRoute.Robots

"empty", "blur", or a data URL string starting with "data:image/..."

Boolean. It determines if a cookie exists by accepting a cookie name (string) parameter.

'next'. Import with: import type { Metadata, ResolvingMetadata } from 'next'

GetStaticProps, GetStaticPaths, and GetServerSideProps.

router.push(href: string, { scroll: boolean })

'next/navigation'. Import with: import { useRouter, usePathname, useSearchParams } from 'next/navigation'

Response or NextResponse (which extends the Web Response API).

'/'. The path defaults to '/' when setting cookies.

RouteContext. Use it with a route string: RouteContext<'/users/[id]'> to get strongly-typed parameters.

next dev, next build, and next typegen all regenerate the next-env.d.ts file.

ResolvingMetadata. This represents a promise resolving to parent segment metadata, enabling child segments to extend rather than replace parent configurations.

The default value for fetchCache is 'auto', which caches requests before Dynamic APIs are used and doesn't cache after.

revalidatePath can be called in Server Functions and Route Handlers but cannot be called in Client Components or Proxy, as it only works in server environments.

The function signature is: revalidateTag(tag: string, profile: string | { expire?: number }): void. It accepts a tag identifier and a profile specifying revalidation behavior, returning nothing.

Next.js looks for a matching request in its Data Cache. If the match is fresh, it will be returned from the cache. If there is no match or the match is stale, Next.js will fetch the resource from the remote server and update the cache with the downloaded resource.

dynamic: 'force-dynamic' forces dynamic rendering, which results in routes being rendered for each user at request time. It is equivalent to setting every fetch() request in a layout or page to { cache: 'no-store', next: { revalidate: 0 } }.

In Next.js 16, the cacheComponents configuration (a top-level config option, not an experimental flag) replaced the experimental dynamicIO flag from Next.js 15.

The minimum value for the revalidate option is 1 second. Setting it to zero or less results in an error. A value of 0 means to revalidate after every request, which implies stale data cannot be tolerated.

next.revalidate: false caches the resource indefinitely, which is equivalent to infinite duration.

With profile='max', data is marked as stale, and the next time a resource with that tag is visited, it will use stale-while-revalidate semantics, serving cached content while fetching fresh data in the background.

The possible values are: 'auto' (default), 'force-dynamic', 'error', and 'force-static'.

If an individual fetch request sets a revalidate number lower than the default revalidate of a route, the whole route revalidation interval will be decreased.

Yes, revalidating the Data Cache will in turn invalidate the Router Cache by re-rendering components.

The staleTimes config was introduced in Next.js v14.2.0.

The default staleTime for Page segments changed to 0 in Next.js 15, meaning the client will always reflect the latest data from the Page component(s) during navigation.

No, invalidating the Full Route Cache does not affect the Data Cache. This allows hybrid cached/uncached data patterns.

When 'use cache' is used at file level, all function exports must be async functions.

The 'max' profile has: stale = 5 minutes, revalidate = 30 days, expire = 1 year.

The maximum character length for the path parameter in revalidatePath is 1024 characters.

Yes, the revalidate value needs to be statically analyzable. For example, revalidate = 600 is valid, but revalidate = 60 * 10 is not.