nextjs build_error ai_generated true

Error: Parallel route slot '@slot' requires a Suspense boundary or default.tsx

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

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

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active — — —
[email protected] active — — —
[email protected] active — — —

Root Cause

In Next.js app directory, parallel route slots (e.g., @modal) must be wrapped in a Suspense boundary or have a default.tsx file to handle loading states when the slot is not matched.

generic

中文

在 Next.js app 目录中，并行路由插槽（例如 @modal）必须包裹在 Suspense 边界中，或具有 default.tsx 文件来处理插槽未匹配时的加载状态。

Official Documentation

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

Workarounds

  1. 95% success Wrap the parallel route slot in a Suspense boundary in the layout file. 
    Wrap the parallel route slot in a Suspense boundary in the layout file.
  2. 85% success Create a default.tsx file in the slot directory to handle unmatched routes. 
    Create a default.tsx file in the slot directory to handle unmatched routes.

中文步骤

  1. 在布局文件中将并行路由插槽包裹在 Suspense 边界中。
  2. 在插槽目录中创建 default.tsx 文件来处理未匹配的路由。

Dead Ends

Common approaches that don't work:

  1. 50% fail

    This may cause layout shifts or missing UI because the slot renders nothing when unmatched, but the error persists if the slot is still not wrapped in Suspense.

  2. 90% fail

    This eliminates the feature, which may not be acceptable for modals or complex layouts.