nextjs build_error ai_generated true

Error: Missing default.tsx for parallel route slot '@slot'. A default.tsx is required when the slot is not matched by the current route.

ID: nextjs/parallel-route-missing-default-slot

Also available as: JSON · Markdown · 中文
95%Fix Rate
90%Confidence
1Evidence
2024-06-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Next.js 14.x active — — —
Next.js 15.x active — — —

Root Cause

A parallel route slot (e.g., @modal) does not have a default.tsx file in its directory. When navigating to a route that does not match any file in that slot, Next.js requires a default.tsx to render fallback content.

generic

中文

并行路由插槽（例如 @modal）在其目录中没有 default.tsx 文件。当导航到与该插槽中任何文件都不匹配的路由时，Next.js 需要 default.tsx 来渲染回退内容。

Official Documentation

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#defaultjs

Workarounds

  1. 95% success Create a default.tsx file in the slot directory. Example: // app/@modal/default.tsx export default function Default() { return null; } This renders nothing when the slot is unmatched. 
    Create a default.tsx file in the slot directory. Example: // app/@modal/default.tsx export default function Default() { return null; } This renders nothing when the slot is unmatched.
  2. 95% success If you want fallback UI, create default.tsx with actual content: // app/@sidebar/default.tsx export default function Default() { return <div>Default sidebar content</div>; } 
    If you want fallback UI, create default.tsx with actual content: // app/@sidebar/default.tsx export default function Default() { return <div>Default sidebar content</div>; }
  3. 70% success Use the parallel route slot only in layouts that always match it, ensuring every route has a corresponding file in the slot. This avoids the need for default.tsx but is less flexible. 
    Use the parallel route slot only in layouts that always match it, ensuring every route has a corresponding file in the slot. This avoids the need for default.tsx but is less flexible.

中文步骤

  1. 在插槽目录中创建 default.tsx 文件。示例：// app/@modal/default.tsx export default function Default() { return null; } 当插槽不匹配时，这将不渲染任何内容。
  2. 如果需要回退 UI，请创建带有实际内容的 default.tsx：// app/@sidebar/default.tsx export default function Default() { return <div>默认侧边栏内容</div>; }
  3. 仅在始终匹配的布局中使用并行路由插槽，确保每个路由在插槽中都有对应的文件。这避免了需要 default.tsx，但灵活性较差。

Dead Ends

Common approaches that don't work:

  1. 90% fail

    Catch-all routes only work for dynamic segments, not for unmatched routes in parallel slots. The framework specifically looks for default.tsx to handle the fallback case.

  2. 30% fail

    This is an overreaction that removes the parallel routing feature entirely. It works but loses the architectural benefit of parallel routes, making it a poor practical fix.

  3. 95% fail

    Parallel route slots must be prefixed with @. A regular page.tsx will not be treated as a slot and will conflict with the parent route's page.