next.js - Routing

📁 page/index.tsx

export default function Home() {
  return "hi";
}

router 기능 필요없이, pages 안에 파일 이름이 router 주소가 된다.

index.tsx : '/' 메인페이지
react 자체를 import 할 필요 없음

장점
앱에있는 페이지들이 미리 렌더링이 된다
정적으로 생성됨
server-side rendering으로 SEO에 장점이 있다.

CRA와 next차이점
clinet-side render하는 앱을 만듬
: 브라우저가 유저가 보는 ui를 만드 는 것

---

📁 page/index.tsx

import NavBar from "@/componets/NavBar";

export default function Home() {
  return (
    <div>
      <NavBar />
      <h1>Hello</h1>
    </div>
  );
}

📁 page/about.tsx

import NavBar from "@/componets/NavBar";

export default function Potato() {
  return (
    <div>
      <NavBar />
      <h1>About</h1>
    </div>
  );
}

📁 components/NavBar.tsx

import Link from "next/link";
import { useRouter } from "next/router";

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link legacyBehavior href="/">
        <a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
      </Link>
      <Link legacyBehavior href="about">
        <a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>
          About
        </a>
      </Link>
    </nav>
  );
}

---

  <Link href="/">
        <a>Home</a>

강의에서는 이렇게만 해도 가능했는데, next.js가 업데이트 하고 바뀌었다.

npx @next/codemod new-link .

위에 설치 후,

<Link><a id="link">Home<a></Link> 에서 <Link id="link">Home</Link> 변경.

legacyBehavior를 추가해서 <Link legacyBehavior><a id="link">Home</a></Link> 이런식으로 변경해서 쓸 수 있다.