Breaking News: Grepper is joining You.com. Read the official announcement!

next link types

Bonzu Pippinpaddleopsicopolis answered on March 18, 2024 Popularity 1/10 Helpfulness 1/10

answer next link types

next link types

Comment

Was creating a custom component with next/link inside
"Currently, experimental support includes any string literal, including dynamic segments. For non-literal strings, you currently need to manually cast the href with as Route:"
This could be bad practice idk but it works

----

// First update next config typed routes to experimental

/*in next config:

@type {import('next').NextConfig}
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
}*/

----

// To accept href in a custom component wrapping next/link, use a generic:
import type { Route } from 'next'
import Link from 'next/link'
 
// add the whole <T extends string> part
function Card<T extends string>({ href }: { href: Route<T> | URL }) {
  return (
    <Link href={href}>
      <div>My Card</div>
    </Link>
  )
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript next-link types

Link to this answer
Share Copy Link

Contributed on Mar 18 2024

Bonzu Pippinpaddleopsicopolis

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

next link types

Contents

More Related Answers

next link types

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.