Next.js could not validate that a segment in your UI has instant navigation

During prerendering, a segment in the route tree was dropped from rendering. With Cache Components enabled, Next.js validates that every segment can produce an instant navigation. When a segment is not rendered, that validation can't run and issues that would prevent instant navigation go undetected.

This typically happens when a layout conditionally omits {children} or a parallel route slot is not rendered.

Ways to fix this

function Layout({ children }) {
  return <><Nav />{children}</>
}

// page.tsx or layout.tsx

export const instant = false

Render the dropped segment

Choose this fix when the segment should be part of the render tree. The layout that owns the segment needs to render {children} (or the parallel route slot prop) so Next.js can validate the subtree for instant navigation.

Patterns

Render {children} in the layout

Make sure the layout always includes {children} in its output. If the layout conditionally shows different content (a login page when unauthenticated, a dashboard when authenticated), render {children} in both branches and handle the conditional inside the child segment.

export default function DashboardLayout({ children }) {
  return (
    <>
      <Nav />
      {children}
    </>
  )
}

Render the parallel route slot

When the dropped segment is a parallel route (e.g. @modal), the layout must render the slot prop. If the slot should be hidden in certain states, render it conditionally inside the slot's own page rather than omitting the prop from the layout.

export default function DashboardLayout({ children, modal }) {
  return (
    <>
      {children}
      {modal}
    </>
  )
}

Learn more: Parallel Routes.

Move auth or guard checks into the page

A common cause is a layout that conditionally returns a sign-in screen (or redirects) instead of rendering {children}. Layouts and pages render separately, so put the guard at the page (or slot) level rather than in the layout. The layout always renders {children}. Each page decides whether to render its content or redirect.

export default function DashboardLayout({ children }) {
  return (
    <>
      <Nav />
      {children}
    </>
  )
}

import { redirect } from 'next/navigation'
import { getSession } from '@/lib/session'
 
export default async function DashboardPage() {
  const session = await getSession()
  if (!session) redirect('/login')
  return <Dashboard session={session} />
}

Learn more: Authentication.

Trade-off

The segment is always in the render tree, which means Next.js validates it on every dev render. If the segment has dynamic data, it needs its own <Suspense> boundary or caching strategy to stay prerenderable.

Gotchas

• A layout that conditionally returns early without rendering {children} (e.g. a redirect guard) drops every segment in the subtree. Move the guard into a wrapper component inside {children} instead.
• A Client Component that returns null during SSR also drops its children from the render tree, triggering this error. Use a <Suspense> boundary above the Client Component so the fallback renders in place of the skipped subtree.

Skip validation on the segment

Choose this fix when the segment is intentionally not rendered in certain states (a modal that only appears on interaction, a slot gated by authentication). Setting instant to false on the dropped segment tells Next.js to skip validation for it.

Patterns

Opt the dropped segment out

Add the export to the page or layout file of the segment that was dropped from rendering.

export const instant = false
 
export default function ModalPage() {
  return <Modal />
}

Learn more: Route segment instant config.

Trade-off

The segment is exempt from instant-navigation validation. If it has issues that would block navigation (uncached data outside Suspense, runtime APIs), those issues won't be caught during development.

Gotchas

• The export must be on the dropped segment's own file (page or layout), not on a parent. The framework walks top-down and the first explicit config wins.
• Setting instant to false does not disable prerendering. The segment still prerenders if it can. It only disables the validation error.

Verifying the fix

After applying a fix, navigate to the route and confirm the insight no longer appears in the dev overlay and the page immediately paints meaningful UI, with any <Suspense> fallbacks covering only the regions that stream in. A <Suspense> boundary around the whole page body can pass validation with an empty shell, which defeats the point of an instant navigation.

Depending on your validation level, this may only surface in development.

Don't want this validation?

Instant-navigation validation runs by default in Cache Components apps and is what surfaces this error.

• One segment: add export const instant = false to the page or layout file. This opts out the segment itself. Child segments are still validated during client navigations.
• Entire app: set experimental.instantInsights.validationLevel to 'manual-warning' in next.config. This limits validation to segments that explicitly export instant.

See Ensuring instant navigations for the full model.

Related Insights

• Runtime data during prerendering
• Uncached data during prerendering
• URL data in a Client Component outside of Suspense
• Runtime data in generateMetadata()
• Uncached data in generateMetadata()
• Runtime data in generateViewport()
• Uncached data in generateViewport()
• Math.random() while prerendering
• Math.random() in a Client Component
• Date.now() while prerendering
• Date.now() in a Client Component
• Crypto APIs while prerendering
• Crypto APIs in a Client Component
• Dynamic data during prefetching
• URL data outside of Suspense