[Next.js] Routing

1. a 태그

기본적인 페이지 이동을 위해서 사용하는 태그인 a 태그를 Next.js에서 사용할 수 있다. 

const NavBar = () => {
  return (
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  );
};

export default NavBar;

페이지 이동은 정상적으로 가능하다.

하지만, React는 SPA, Single Page Application을 채택하였는데, a태그를 사용하면 페이지 이동 시 새로고침을 하게된다. 

 

이러한 문제를 해결해서 라우팅을 하기 위해서 Next.js에는 제공하는 기능이 있다. 

 

2. Link 태그 

import Link from "next/link";

const NavBar = () => {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
    </nav>
  );
};

export default NavBar;

Link 태그를 사용해서 페이지를 이동할 수 있다. 

react-router-dom에서도 Link를 사용했을 텐데, next에서 제공하는 Link를 사용하면 페이지를 이동할 때

클라이언트 사이드 네비게이팅, SPA가 지켜지면서 페이지가 이동된다. 

 

3. useRouter 

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

const NavBar = () => {
  const router = useRouter();

  return (
    <nav>
      <Link href="/">
        <a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
      </Link>
      <Link href="/about">
        <a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>
          About
        </a>
      </Link>
    </nav>
  );
};

export default NavBar;

useRouter를 사용하면 react-router-dom에서 사용하는 history, match, location 같은 기능을 모두 사용할 수 있는 

router를 사용할 수 있다. 

 

router 안에는 back, push, query, pathname 등 함수와 정보를 가지고 있다. 

 

일반적인 경우에는 Link 태그를 통해서 경로이동을 하면 되지만 next/link를 사용하기 애매한 상황 (함수로 이동) 등엔 

push를 사용하면 똑같이 이동이 가능하다. 

import { useRouter } from "next/router";

const AnyComponent = () => {
	const router = useRouter();

	const onClick = (id) => {
	    router.push(`/any/${id}`);   //  -- 1
            // or 
            router.push({
        	pathname:`/any/${id}`);  //  -- 2
                query: {
            	id,
                name: "test"
            }
            // or   
            router.push({
         	pathname:`/any/${id}`);  //  -- 3
                query: {
            	    id,
                    name: "test"
                   },
                },
                `/any/${id}`
            );
	}
    
    // ...
}

1. 첫 번째 방법은 흔히 사용하는 push 함수의 사용법이다.
2. 두 번째 방법은 이동할 때 String형식으로 주소를 넘겨줄 수 있지만, 객체 형식으로도 넘겨줄 수 있다. 
   pathname이 일반적인 주소 부분이며, query에 값을 넣어주면 뒤에 붙여서 넣을 수 있다. 
   화면에 주소는 " http://localhost:3000/any/123?id=123&name=test " 형식으로 이동된다. 
3. 세 번째 방법은 ? 포함 뒤 쿼리 부분이 실제 사용자에게까진 굳이 보일 필요없을 때 마스킹 용도로 사용한다. 
   2번째 매개변수인 ` /any/${id} ` 형식으로 주소가 나타나지만 query를 가지고 오면 id와 name을 받을 수 있다.