Skip to content

href-interpolation-failed.mdx

Latest commit

 

History

History
56 lines (43 loc) · 1.42 KB

href-interpolation-failed.mdx

File metadata and controls

56 lines (43 loc) · 1.42 KB
title `href` Interpolation Failed

Why This Error Occurred

Somewhere you are utilizing the next/link component, Router#push, or Router#replace with href interpolation to build dynamic routes but did not provide all of the needed dynamic route params to properly interpolate the href.

Note: this error will only show when the next/link component is clicked not when only rendered.

Invalid href interpolation

import Link from 'next/link'

export default function BlogLink() {
  return (
    <Link
      href={{
        pathname: '/blog/[post]/[comment]',
        query: { post: 'post-1' },
      }}
    >
      <a>Invalid link</a>
    </Link>
  )
}

Valid href interpolation

import Link from 'next/link'

export default function BlogLink() {
  return (
    <Link
      href={{
        pathname: '/blog/[post]/[comment]',
        query: { post: 'post-1', comment: 'comment-1' },
      }}
    >
      <a>Valid link</a>
    </Link>
  )
}

Possible Ways to Fix It

Look for any usage of the next/link component, Router#push, or Router#replace and make sure that the provided href has all needed dynamic params in the query.

Useful Links