[TIL] 내배캠4기-Typescript-93일차

hare·2023년 1월 31일

내배캠-TIL

목록 보기

62/75

Link, a태그 버전 이슈

강의를 보면서 Link 태그 내부에 a 태그를 쓰길래 그대로 따라했는데 아래와 같은 에러가 떴다. 알고보니 Next.js가 얼마전에 업데이트되며 생긴 이슈 같았다.
Error: Invalid <Link> with <a> child.
Please remove <a> or use <Link legacyBehavior>.

친절하게 해결방법까지 알려주니 그대로 적용해보자 😇

📌Link 태그 안에 legacyBehavior 삽입하면 에러 해결
<Link legacyBehavior href="/">
	<a className={router.pathname === "/" ? "active" : ""}>Home</a>
</Link>
🗂️관련 문서

Image 태그

img 태그에 경고가 뜬다. Image 태그 사용을 권고하는 것 같다.
필수 속성: width, height, alt
🗂️next/image 문서

redirect

in next.config.js
nextConfig 객체 안에 생성해주었다.

async redirects() {
    return [
      {
        source: "/old-blog/:path*",
        destination: "/new-blog/:path*",
        permanent: false,
      },
    ];
  },

http://localhost:3000/old-blog/1226/comment
➡️http://localhost:3000/new-blog/1226/comment 로 redirecting.

rewrite

redirect와 거의 흡사하다.

async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },

Request URL: http://localhost:3000/api/movies

📌 redirect와 유사하지만 유저가 url의 변화를 보지 못한다.

Dynamic Routes

📁pages>📁movies>[id].js

= www.도메인이에용.com/movies/123340923011

💡 위와 같이 대괄호로 감싸주면 url에 변수를 넣어줄 수 있다.

http://localhost:3000/movies/1203-2eikpoldwm   
query 프로퍼티 명 = 파일 변수명(id)

Head

nextJS에선 너무나 간단하게 페이지별로 헤더이름을 명명할 수 있다.

사용방법

// /components/Seo.js
📌import Head from "next/head";
export default function Seo({ title }) {
  return (
    <Head>
      📌<title>{title} | Next Movies</title>
    </Head>
  );
}

// pages/index.js
📌import Seo from "@/components/Seo";
export default function Home() {
  return (
    <div>
      📌<Seo title="Home" />
      <h1>Home</h1>
    </div>
  );
}