vercel/next.js · error · Error

Dynamic href `${href}` found in <Link> while using the `/app

Error message

Dynamic href `${href}` found in <Link> while using the `/app` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href

What it means

LinkComponent throws when an app-router <Link> receives an href containing a dynamic segment like /blog/[slug]. App Router Links must receive concrete, already-resolved URLs; dynamic placeholders are a Pages Router concept and cannot be prefetched or rendered, so they are rejected.

Source

Thrown at packages/next/src/client/app-dir/link.tsx:543

    }
    if (!asProp) {
      let href: string | undefined
      if (typeof resolvedHref === 'string') {
        href = resolvedHref
      } else if (
        typeof resolvedHref === 'object' &&
        typeof resolvedHref.pathname === 'string'
      ) {
        href = resolvedHref.pathname
      }

      if (href) {
        const hasDynamicSegment = href
          .split('/')
          .some((segment) => segment.startsWith('[') && segment.endsWith(']'))

        if (hasDynamicSegment) {
          throw new Error(
            `Dynamic href \`${href}\` found in <Link> while using the \`/app\` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href`
          )
        }
      }
    }
  }

  // This will return the first child, if multiple are provided it will throw an error
  let child: any
  if (legacyBehavior) {
    if ((children as any)?.$$typeof === Symbol.for('react.lazy')) {
      throw new Error(
        `\`<Link legacyBehavior>\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \`<a>\` tag.`
      )
    }

    if (process.env.NODE_ENV === 'development') {
      if (onClick) {

View on GitHub (pinned to 0eb3775416)

Solutions

  1. Build the href string before rendering instead of passing a dynamic object href to <Link> in the app router.
Defensive patterns

Strategy: validation

When it happens

Trigger: <Link> receives a dynamic href object in the app router.

Common situations: Passing a URL object with pathname/query to Link in /app; use a plain string instead.


AI-assisted analysis of vercel/next.js@0eb3775416 (2026-08-19). Data as JSON: /api/errors/74b4de01073db4f8. Report an issue: GitHub.