Next.js Rewrites and Redirects Error Fix

In this tutorial, you'll learn about Next.js Rewrites and Redirects Error Fix. We cover key concepts, practical examples, and best practices.

The Problem

Error: Invalid redirect configuration. "destination" is required.

The redirects function returns an object missing the required destination or source fields.

Wrong

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        // missing destination
      },
    ]
  },
}

Output: Error: Invalid redirect configuration. when Next.js validates the config.

Right

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true, // 308 redirect
      },
    ]
  },
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*',
      },
    ]
  },
}

Expected output: /old-page redirects to /new-page with 308 status.

Prevention

• Always include source, destination, and either permanent or statusCode
• Test redirects on local dev server before deploying
• Use permanent: true for SEO-friendly 308 redirects

Common Mistakes with rewrites redirects

1. Placing the wildcard pattern first in case expressions, making all subsequent patterns unreachable
2. Using head and tail instead of pattern matching, causing runtime errors on empty lists
3. Forgetting that lazy evaluation defers computation until the value is forced, causing space leaks with unevaluated thunks

These mistakes appear frequently in real-world NEXTJS code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ