Fix Next.js Export Path Doesn't Match [...slug] Page Error

I was working on a Next.js project with a catch-all dynamic route when I hit a frustrating build error that had me scratching my head for hours. The build would fail during static page generation with this cryptic message: "The provided export path '/' doesn't match the '/[...slug]' page."

After digging through the Next.js documentation and testing different approaches, I discovered the root cause and the simple fix. Here's exactly how to resolve this export path mismatch error.

Understanding the Problem

The error occurs when your generateStaticParams() function returns static paths with empty slug arrays for catch-all routes. Here's what was happening in my code:

// File: src/app/[...slug]/page.tsx
export async function generateStaticParams() {
  const staticPaths: { slug: string[] }[] = []
  
  pages.docs.forEach((page) => {
    if (page.slug) {
      // This line causes the error
      staticPaths.push({ slug: page.slug === 'home' ? [] : [page.slug] })
    }
  })
  
  return staticPaths
}

The issue is subtle but critical. When page.slug === 'home', the function returns { slug: [] } - an empty array. Next.js tries to generate a static page at the root path / from your [...slug] route, but catch-all routes require at least one segment to function properly.

Think of it this way: a catch-all route [...slug] expects URLs like /about, /services/web-dev, or /products/item-1. It cannot handle the root path / because there are no segments to "catch."

The Simple Fix

The solution is straightforward - ensure your static paths always include at least one segment:

// File: src/app/[...slug]/page.tsx
export async function generateStaticParams() {
  const staticPaths: { slug: string[] }[] = []
  
  pages.docs.forEach((page) => {
    if (page.slug) {
      // Always include at least one segment
      staticPaths.push({ slug: [page.slug] })
    }
  })
  
  return staticPaths
}

This change ensures that even your 'home' page gets a proper path like /home instead of trying to generate at the root /. Your route handling logic can still normalize the slug internally - the key is that the static generation process receives valid paths.

How Route Normalization Still Works

You might wonder how to handle the root path if you're always generating paths with segments. The answer lies in your route normalization function:

// File: src/app/[...slug]/page.tsx
function normalizeSlug(slug?: string[]): string[] {
  return slug === undefined || slug.length === 0 ? ['home'] : slug
}

export default async function SlugPage({ params }: Props) {
  const { slug } = await params
  const safeSlug = normalizeSlug(slug)
  // Your route logic continues normally
}

This function handles the mapping between URLs and your internal page logic. Users can still visit / and get your home content, but the static generation process works with valid catch-all paths.

Why This Happens

Next.js treats catch-all routes and root paths differently in its routing system. A catch-all route [...slug] is designed to capture one or more path segments, while the root path / has zero segments. When you try to generate static paths for a catch-all route with empty segments, you're essentially asking Next.js to create a static page that doesn't match the route pattern.

The build process validates that each static path matches its corresponding route structure. An empty slug array [] doesn't match the [...slug] pattern, hence the export path mismatch error.

Conclusion

This Next.js build error stumped me because the solution seemed counterintuitive - I thought I needed to handle the root path specially. The real fix was understanding that catch-all routes need consistent path structures, even if your application logic normalizes them differently.

By ensuring your generateStaticParams() always returns paths with at least one segment, you maintain compatibility with Next.js static generation while keeping your route handling flexible. Your users get the same experience, but your build process stays happy.

Let me know in the comments if you've encountered this error or have questions about catch-all route handling, and subscribe for more practical Next.js development guides.

Thanks, Matija