MENU


React Configurations

1. reactMaxHeadersLength

During static rendering, React (via Next.js) can emit HTTP Link headers to instruct the browser to preload resources like Fonts, Stylesheets, JavaScript files, and other critical assets. These headers are added to improve performance by helping the browser load important resources earlier, reducing layout shifts and improving time to first paint.

The reactMaxHeadersLength option in next.config.js is used to control the maximum allowed byte size of HTTP headers that are automatically generated by React during static rendering in the App Router.

By default, the total size of these headers is limited to 6000 bytes (6 KB). If the total length of the emitted headers exceeds this limit, the headers are truncated, meaning the browser may not receive the full set of preload hints, reducing optimization benefits.

You can override this value by setting reactMaxHeadersLength in your next.config.js: module.exports = { reactMaxHeadersLength: 1000, // Reduce to 1000 bytes }

This is useful in environments where large headers may cause issues. Some reverse proxies, CDNs, or hosting providers have strict limitations on:

For example, NGINX may truncate long headers unless large_client_header_buffers is increased.

Some CDNs silently drop or truncate headers beyond a certain size. Older load balancers may reject long headers entirely. To ensure compatibility, especially when you observe missing preload hints or broken assets, you might reduce reactMaxHeadersLength to a safer value like 1000 or 2000.

Note that it affects static rendering only (e.g., getStaticProps and generateStaticParams). Setting it too low may reduce performance gains, as fewer preload hints will be sent.

If you observe this header in a response: Link: </_next/static/css/abc.css>; rel=preload; as=style, /static/js/xyz.js>; rel=preload; as=script, ... This header is generated by React and could grow quite large depending on how many components and assets are involved. reactMaxHeadersLength ensures it doesn't overwhelm downstream systems.


2. reactStrictMode

reactStrictMode is a development-only feature in React, supported and surfaced in Next.js, that helps developers identify potential problems in their applications before they reach production.

In Next.js, enabling reactStrictMode wraps your React components with <React.StrictMode>, allowing React to:

Benefits include:

Strict Mode is enabled by default when using the App Router (app/ directory). You can disable it (not recommended) with: module.exports = { reactStrictMode: false, }

If your codebase isn't ready for Strict Mode everywhere, you can incrementally enable it: import React from 'react'; function MyComponent() { return ( <React.StrictMode> <ProblematicComponent /> </React.StrictMode> ); } This applies Strict Mode only to ProblematicComponent.


3. viewTransition

The viewTransition flag enables support for the experimental View Transitions API in React, which is being explored by the React team. This browser-level API is designed to allow seamless animated transitions between different UI states or pages, improving perceived performance and visual flow.

The goal of View Transitions is to create smooth animations between UI states without tearing or flickering. For example:

To enable the experimental feature: /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { viewTransition: true, }, } module.exports = nextConfig Once enabled, React will hook into the View Transitions API (if the browser supports it) to allow for native UI animations between renders or route changes.