[NextJs] Link href 타입스크립트 적용하기

클라이언트 사이드에서 다이나믹하게 동작하게 하기 위해서 컴포넌트를 만든다.

href를 받아서 사용하고자 하는데 타입설정이 조금 까다로웠던듯.

다음은 해결안

"use client";

import Link from "next/link";
import React from "react";
import styles from "./button.module.scss";
import type { Route } from "next";

function NavButton<T extends string>({
  href,
  title,
}: {
  href: Route<T> | URL;
  title: string;
}) {
  return (
    <div className={styles.outlined}>
      <Link href={href}>{title}</Link>
    </div>
  );
}

export default NavButton;

참고 :: href: Route<string> 으로 바로 적용하면 오류가 뜬다. 
  

<Link href={} /> :: 여기서 타입오류가 자주 나온다. 

cmd + shift + p 눌러서 restart typescript 해주자. 오류가 사라진다.