[노마드코더] #2 Pages & Routing

Pages

Next.js의 Route는 별도의 설정 없이 pages 폴더 내부의 js 파일에서 생성된다

 

[pages/about.js]

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

이 경우 http://localhost:3000/about 에서 해당 컴포넌트를 확인할 수 있다

이 때, 컴포넌트 이름은 뭐든 상관 없지만 반드시 export default를 붙여줘야 한다

 

[pages/index.js]

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

예외적으로 index.js는 그냥 http://localhost:3000/ 에서 확인된다

 

유효하지 않은 페이지에서는 404가 뜨도록 미리 설정되어 있다

Routing

Next.js에서는 다음과 같이 링크를 이동한다

 

[components/NavBar.js]

import Link from "next/link";
 
export default function NavBar() {
  return (
    <nav>
      <Link href="/">
        <a className="home_link">Home</a>
      </Link>
      <Link href="/about">
        <a style={{ color: "blue" }}>About</a>
      </Link>
    </nav>
  );
}

* a 태그를 생략해도 되지만 className이나 style 등을 적용하려면 필요하다

useRouter를 사용하면 Route 관련 다양한 hook을 적용할 수 있다

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

* pathname은 현재 위치한 경로를 반환한다

 

useRouter Reference🔽

next/router | Next.js

 

본 내용은 노마드코더의 'NextJS 시작하기'를 바탕으로 작성되었습니다