The Short Answer

To fix the “ISR Not Working” error in Next.js, advanced users can try revalidating their setup by updating the revalidate option in their getStaticProps function to a valid integer value, such as revalidate: 60 for a 1-minute revalidation interval. Additionally, ensure that the target property is set to "serverless" in your next.config.js file to enable serverless mode.

Why This Error Happens

• Reason 1: The most common cause of the “ISR Not Working” error is an incorrect or missing revalidate option in the getStaticProps function, which is required for Incremental Static Regeneration (ISR) to work properly. For example, if the revalidate option is set to 0 or a non-integer value, ISR will not work as expected.
• Reason 2: An edge case cause of this error is a misconfigured next.config.js file, where the target property is not set to "serverless" or the experimental features are not enabled. This can prevent ISR from working correctly, even if the revalidate option is set correctly.
• Impact: The “ISR Not Working” error can result in a Framework Error, which can cause your Next.js application to crash or behave unexpectedly, leading to a poor user experience and potential data loss.

Step-by-Step Solutions

Method 1: The Quick Fix

1. Go to next.config.js > module.exports
2. Toggle the target property to "serverless" and add the experimental features, such as experimental: { isr: true }
3. Refresh the page to apply the changes.

Example:

1
2
3
4
5
6

module.exports = {
  target: 'serverless',
  experimental: {
    isr: true,
  },
}

Method 2: The Command Line/Advanced Fix

To fix the “ISR Not Working” error using the command line, you can try running the following command to update your next.config.js file:

1

npx next build --target serverless

Alternatively, you can update your getStaticProps function to include a valid revalidate option, such as:

1
2
3
4
5
6
7
8

export async function getStaticProps() {
  return {
    props: {
      // props
    },
    revalidate: 60, // revalidate every 1 minute
  }
}

Prevention: How to Stop This Coming Back

To prevent the “ISR Not Working” error from occurring in the future, follow these best practices:

• Set the target property to "serverless" in your next.config.js file
• Enable the experimental features, such as experimental: { isr: true }
• Use a valid integer value for the revalidate option in your getStaticProps function
• Monitor your application’s logs and performance metrics to detect any issues with ISR

If You Can’t Fix It…

[!WARNING] If Next.js keeps crashing due to the “ISR Not Working” error, consider switching to Gatsby, which handles Revalidate setup natively without these errors. However, this should be a last resort, as Next.js is a powerful and flexible framework that can be debugged and optimized with the right approach.

FAQ

Q: Will I lose data fixing this? A: The fix for the “ISR Not Working” error should not result in any data loss, as it only involves updating configuration files and code. However, it’s always a good idea to back up your data and application code before making any changes.

Q: Is this a bug in Next.js? A: The “ISR Not Working” error is not a bug in Next.js, but rather a configuration issue that can be resolved by following the steps outlined in this guide. Next.js version 12.2.0 and later include improved support for ISR and serverless mode, which can help prevent this error from occurring.

📚 Continue Learning

Check out our guides on Next.js and ISR Not Working.