✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Error with custom Link component in Next.js project

4 replies
Last updated: Nov 10, 2021
Hi, dose anyone know what i'm doing wrong here?

import React from 'react'
import NextLink from 'next/link'

interface Props {
  children: Array<JSX.Element | string | null> | JSX.Element | string | null
  className?: string
  href: string
  target?: string
  rel?: string
  onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void
}

const Link: React.FC<Props> = ({ children, href, className, target, rel, onClick }) => {
  function handleClick(e) {
    if (e.type === 'click' || e.key === 'Enter') {
      onClick?.(e)
    }
  }

  return (
    <NextLink href={href}>
      <a
        className={className}
        target={target}
        rel={rel}
        {...(onClick
          ? {
            onClick,
            onKeyPress: handleClick,
            role: 'link',
            tabIndex: 0,
          }
          : {})}
      >
        {children}
      </a>
    </NextLink>
  )
}

export default Link
i'm getting this error:
TS7006: Parameter 'e' implicitly has an 'any' type.
When i'm importing the '../Link' to the hero post the link will not work anymore.

this is my tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Nov 9, 2021, 10:22 AM
Shouldn't it be
Link
not
NextLink
?
import { Link } from 'next/link'
Nov 9, 2021, 5:23 PM
Hi
user S
, no, i'm making a custom Link component that works like React Router Link. The code in it self is correct. But i'm still getting an error, so it might have something to do with the tsconfig.json 🙂
Nov 10, 2021, 12:36 AM
export default function HeroPost({
                                   coverImage,
                                   slug,
                                   displayExcerpt,
                                   displayTitle,
                                 }) {
  return (
    <Link href={`/posts/${slug}`}>
      <div className={styles.front_container} data-row-id='1'>
        <div className={styles.row_grid_container}>
          <CoverImage slug={slug} imageObject={coverImage} title={displayTitle} url={coverImage} />
          <div className={styles.title_container}>
            <p className={styles.excerpt}>{displayExcerpt}</p>
            <h3 className={styles.title}>
              <a className='hover:underline'>{displayTitle}</a>
            </h3>
          </div>
        </div>
      </div>
    </Link>

  );
};

Nov 10, 2021, 5:57 AM
Problem solved by changing
from:

<Link as={`/posts/${slug}`} href='/posts/[slug]'>

to:

<Link href={`/posts/${slug}`}>

return (
    <Link href={`/posts/${slug}`}>
      <div className={styles.front_container} data-row-id='1'>
        <div className={styles.row_grid_container}>
          <CoverImage slug={slug} imageObject={coverImage} title={displayTitle} url={coverImage} />
          <div className={styles.title_container}>
            <p className={styles.excerpt}>{displayExcerpt}</p>
            <h3 className={styles.title}>
              <a className='hover:underline'>{displayTitle}</a>
            </h3>
          </div>
        </div>
      </div>
    </Link>

  );
};
Nov 10, 2021, 5:59 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?