컴포넌트 생성 후 layout에 적용

• components폴더를 src 하위에 만들고 그 안에 파일들을 만든다.

Header

import Link from "next/link";

export default function Header() {
  return (
    <header className="flex justify-between">
      <Link href='/'>
        <h1>My Blog</h1>
      </Link>
      <nav>
        <Link href='/'>Home</Link>
        <Link href='/about'>About</Link>
        <Link href={'/contact'}>Contact</Link>
      </nav>
    </header>
  )
}

• Link를 이용해 라우팅 처리해준다.
• href에서 직접 작성은 따옴표 처리만 해줘도 되고, js 문법을 넣으려면 중괄호를 넣어준다.

Footer

export default function Footer() {
  return (
    // js 문법을 사용하기 위해 {}로 묶어줌
    // html 문법으로 작성하면 " 로 써줘야함
    <p>{"This is Footer | Thank you"}</p>
  )
}

• HTML에서 특수문자를 직접 사용하려면 " 같은 걸 사용해줘야 한다.
• 하지만 중괄호로 묶으면 JS 문법 활용 가능하쥬

기본적인 라우팅

• Next에서는 app폴더에 원하는 라우팅 이름으로 폴더를 생성해주고, page.tsx파일을 만들면 그게 라우팅이다. 겁나 편하네