next.js/errors/instant-unrendered-segment.mdx

---
title: Next.js could not validate that a segment in your UI has instant navigation
kind: insight
---

<div
  style={{
    padding: '1.25rem 1.5rem',
    border: '1px solid var(--ds-gray-400)',
    borderRadius: '12px',
    background: 'var(--ds-background-200)',
    margin: '1.5rem 0 2rem',
    fontSize: '0.95rem',
    lineHeight: '1.6',
  }}
>
  This Insight is part of the [Instant
  Navigations](https://nextjs.org/blog/next-16-3-instant-navigations) feature
  introduced in Next.js 16.3. If you're new to it, start with the [Ensuring
  instant
  navigations](https://preview.nextjs.org/docs/app/guides/instant-navigation)
  guide for an overview of what instant navigations are and how Next.js
  validates them, then come back here for the specific fix.
</div>

During [prerendering](https://preview.nextjs.org/docs/app/glossary#prerendering), a segment in the route tree was dropped from rendering. With [Cache Components](https://preview.nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents) enabled, Next.js validates that every segment can produce an [instant navigation](https://preview.nextjs.org/docs/app/guides/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

<FixCardGrid>
  <FixCard
    group="render"
    title="Render the dropped segment"
    href="#render-the-dropped-segment"
    snippets={[
      {
        text: 'function Layout({ children }) {',
        parts: [
          { text: 'function Layout({ ' },
          { text: 'children', highlight: true },
          { text: ' }) {' },
        ],
      },
      {
        text: '  return <><Nav />{children}</>',
        parts: [
          { text: '  return <><Nav />{' },
          { text: 'children', highlight: true },
          { text: '}</>' },
        ],
      },
      { text: '}' },
    ]}
  />
  <FixCard
    group="ignore"
    title="Skip validation on the segment"
    href="#skip-validation-on-the-segment"
    snippets={[
      { text: '// page.tsx or layout.tsx' },
      { text: '' },
      { text: 'export const instant = false', highlight: true },
    ]}
  />
</FixCardGrid>

## 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.

```jsx filename="app/dashboard/layout.js"
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.

```jsx filename="app/dashboard/layout.js"
export default function DashboardLayout({ children, modal }) {
  return (
    <>
      {children}
      {modal}
    </>
  )
}
```

Learn more: [Parallel Routes](/docs/app/api-reference/file-conventions/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.

```jsx filename="app/dashboard/layout.js"
export default function DashboardLayout({ children }) {
  return (
    <>
      <Nav />
      {children}
    </>
  )
}
```

```jsx filename="app/dashboard/page.js"
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](https://preview.nextjs.org/docs/app/guides/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>`](https://react.dev/reference/react/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>`](https://react.dev/reference/react/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`](https://preview.nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/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.

```jsx filename="app/dashboard/@modal/page.js"
export const instant = false

export default function ModalPage() {
  return <Modal />
}
```

Learn more: [Route segment `instant` config](https://preview.nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/instant).

### 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`](https://preview.nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/instant) to `false` does not disable [prerendering](https://preview.nextjs.org/docs/app/glossary#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>`](https://react.dev/reference/react/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](https://preview.nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/instant#configuring-validation-defaults), this may only surface in development.

## Don't want this validation?

Instant-navigation validation runs by default in [Cache Components](https://preview.nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents) apps and is what surfaces this error.

- **One segment**: add [`export const instant = false`](https://preview.nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/instant) 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`](https://preview.nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/instant#configuring-validation-defaults) to `'manual-warning'` in `next.config`. This limits validation to segments that explicitly export `instant`.

See [Ensuring instant navigations](https://preview.nextjs.org/docs/app/guides/instant-navigation) for the full model.

## Related Insights

- [Runtime data during prerendering](/docs/messages/blocking-prerender-runtime)
- [Uncached data during prerendering](/docs/messages/blocking-prerender-dynamic)
- [URL data in a Client Component outside of Suspense](/docs/messages/blocking-prerender-client-hook)
- [Runtime data in `generateMetadata()`](/docs/messages/blocking-prerender-metadata-runtime)
- [Uncached data in `generateMetadata()`](/docs/messages/blocking-prerender-metadata-dynamic)
- [Runtime data in `generateViewport()`](/docs/messages/blocking-prerender-viewport-runtime)
- [Uncached data in `generateViewport()`](/docs/messages/blocking-prerender-viewport-dynamic)
- [`Math.random()` while prerendering](/docs/messages/blocking-prerender-random)
- [`Math.random()` in a Client Component](/docs/messages/blocking-prerender-random-client)
- [`Date.now()` while prerendering](/docs/messages/blocking-prerender-current-time)
- [`Date.now()` in a Client Component](/docs/messages/blocking-prerender-current-time-client)
- [Crypto APIs while prerendering](/docs/messages/blocking-prerender-crypto)
- [Crypto APIs in a Client Component](/docs/messages/blocking-prerender-crypto-client)
- [Dynamic data during prefetching](/docs/messages/instant-link-prefetch-partial)
- [URL data outside of Suspense](/docs/messages/instant-shell-url-data)