Common NextJS Errors and How to Fix Them

Building web apps with NextJS is usually smooth, but like any framework, certain errors can trip you up. In this post, I’ll go over some common NextJS errors I’ve faced, explain why they happen, and provide practical solutions.

1. Memory Leaks

Sometimes your NextJS app may start consuming more memory than expected.
This can happen due to improper data fetching, re-rendering issues, or third-party libraries.

Solution / Reference:

• Check out NextJS GitHub Issue #44685 for community discussion and tips.

2. Catch-All Slug Issues

When using [...slug]/page.tsx for dynamic routes, you may run into build or commit errors.

What usually works:

1. Build your project first, then commit changes.
2. Alternatively, make a small edit in a file inside the catch-all folder before committing.

This ensures NextJS recognizes all routes properly.

3. RSC Not Found in Network Tab

React Server Components (RSC) can sometimes fail to load. Common reasons:

• You are requesting a page that doesn’t exist.
• There is already a route pointing to a page that hasn’t been created yet.

Tip: Double-check your pages and app directory structure, and make sure all routes exist.

4. API Error: Response.clone: Body has already been consumed

This often occurs when fetching session data or using fetch multiple times in the same request.

Example endpoint: 'http://localhost:3000/api/auth/session'

Solution / Reference:

• See NextJS GitHub Discussion #69635 for workarounds.
• Ensure you don’t reuse a response body that’s already been read.

5. File Upload Returns Empty Payload

Uploading files with NextJS API routes can fail if the payload is empty. Common causes:

The request Content-Type header is still application/json.

The form data is not structured properly.

Solution:

const formData = new FormData();
if (file) {
  formData.append("images", file); // Ensure the key matches API expectation
}

6. Next-Auth Redirect Issues

Next-Auth can behave unexpectedly if redirect is true and a callbackUrl is provided.

Problem: API errors can trigger a redirect to an auth error page.

Solution:

1. Set redirect to false.
2. Remove callbackUrl and handle redirects manually in your code.

7. NextFontError: Failed to Fetch Google Fonts

NextJS sometimes fails to fetch Google Fonts like Inter, leading to font errors.

Fixes:

1. Restart your internet connection.
2. Delete the .next folder and rebuild the project.