Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/reactjs/how-to-reset-next-js-development-cache/ below:

How to Reset Next.js Development Cache?

Last Updated : 23 Jul, 2025

Next.js, a widely used React framework, offers server-side rendering, static site generation, and robust development features. However, cached data in your development environment can sometimes cause issues. Resetting the cache ensures you work with the latest data and code. Let’s explore several methods to reset the development cache in Next.js:

Before we dive into the methods, let’s understand why resetting the cache is necessary:

• Outdated Data: Cached data might prevent your application from reflecting the latest changes.
• Build Errors: Cache corruption can lead to build errors or unexpected behavior during development.
• Debugging: Resetting the cache ensures fresh data, aiding accurate debugging.

• The .next folder contains build and cache files for Next.js.
• Deleting this folder forces Next.js to rebuild the project, clearing any cached data.

Steps:

• Stop the Development Server: Ensure your development server isn’t running (use Ctrl + C in the terminal).
• Delete the .next Folder: Manually delete it or use the terminal command

rm -rf .next

• Restart the Development Server:

npm run dev

or

yarn dev

Issues can arise from the node modules cache. Clearing it can resolve problems related to module resolution.

Steps:

• Delete node_modules and package-lock.json:

rm -rf node_modules package-lock.json

or if using yarn:

rm -rf node_modules yarn.lock

• Reinstall Dependencies:

npm install

or

yarn install

For production builds, the --no-cache flag ensures Next.js doesn’t use any cached data.

Steps :

• Run the Build Command:

next build --no-cache

If your application displays stale data, it might be due to the browser’s cache. Clear it.

Steps:

• Open Developer Tools (Ctrl + Shift + I).
• Go to the Network Tab.
• Check “Disable cache” while Developer Tools are open.
• Refresh the page.

Cache issues can be related to environment variables. Reset or update them as needed.

Steps:

• Update Environment Variables: Edit your .env files or update variables in your environment configuration.
• Restart the Server: Apply the changes by restarting the development server.

Add a custom script to delete the .next folder programmatically.

Steps:

1. Create a Script (e.g., clear-cache.js):

const fs = require('fs');
const path = require('path');

const dir = path.join(__dirname, '.next');

fs.rmSync(dir, { recursive: true, force: true });

console.log('.next folder deleted');

2. Add the Script to package.json:

{
  "scripts": {
    "clear-cache": "node clear-cache.js"
  }
}

3. Run the Script:

npm run clear-cache

Clearing the development cache in Next.js is straightforward and essential for maintaining an up-to-date environment. Whether you manually delete the .next folder, clear the node modules cache, use build flags, or clear the browser cache, these steps ensure a smooth development experience in Next.js.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4