How to Disable the ETag Generation in Next.js ?

ETags (Entity Tags) are a mechanism used by HTTP to validate the cache of resources and improve performance by avoiding unnecessary data transfers. In Next.js, ETags are generated by default for API routes to optimize caching. However, in some cases, you may need to disable ETag generation, such as for specific caching strategies or debugging purposes.

In this article, we are going to see how we can disable the ETag generation in Next.js. Follow the below steps to disable the Etag in the Next.js application.

ETags in Next.js

ETags are HTTP headers that uniquely identify resource versions. They help determine if cached content is fresh or stale and prevent conflicting updates by ensuring clients only update resources if they haven't been changed since the last request.

Approach

To disable ETag generation in Next.js, you can use the generateEtags option in next.config.js. Set generateEtags to false to globally disable ETags for API routes, preventing automatic ETag header generation and optimizing your caching strategy.

To disable ETag generation for specific API routes, you can directly modify the response headers in your API route handlers.

// pages/api/custom-route.js
export default function handler(req, res) {
    res.setHeader('ETag', ''); // Disable ETag
    res.status(200).json({ message: 'ETag is disabled for this route' });
}

Steps to Create Next.js Project

Step 1: To create a new NextJs App run the below command in your terminal:

npx create-next-app GFG

Step 2: After creating your project folder (i.e. GFG ), move to it by using the following command:

cd GFG

Project Structure:

It will look like this.

Example: To check the ETag we are adding the below code in the index.js file of the application.

// Filename - index.js

// Import Link component
import Link from "next/link";

export default function Home() {
    return (
        <div>
            <h1>This is a demo - GeeksforGeeks</h1>
            <h2>ETag NextJs</h2>
        </div>
    );
}

Step to run the application: Now run the application with the below command:

npm run dev

Output:

Example: Disable ETag in NextJs, one downside of Next.js is that it generates etags for each page. This can slow down the loading of pages, especially on mobile devices. If you don't need etags, you can disable their generation by adding the following code to your next.config.js file.

// Filename: next.config.js

module.exports = {
    reactStrictMode: true,
    generateEtags: false,
}

Step to run the application: Now run the application with the below command:

npm run dev

Output:

Conclusion

Disabling ETag generation in Next.js can be done by setting generateEtags to false in next.config.js. This global configuration disables automatic ETag header generation, providing flexibility to manage caching and optimize server responses effectively.