[Next.js] Routing_라우팅

Next.js에서는 File system을 기반으로 라우팅이 된다.

File system은 pages 폴더 아래에 있어야 한다.

우선순위: src/pages < pages/

 

페이지간 이동

1. <Link>태그 사용

import Link from "next/link";

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
    </ul>
  )
}

export default Home

 

2. router.push 사용

import { NextRouter, useRouter } from "next/router";

function Home() {
  const router: NextRouter = useRouter();
  const routingHandler = async () => {
    return router.push("URL");
  };

  return (
      <button type="button" onClick={() => router.push('/home')}>
          Want to go home, Click me
    </button>
  );
}

 

3. <a> 태그 사용

function Home() {
  return (
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
    </ul>
  );
}

export default Home;

 

`<a>`태그는 Next.js에서 사용을 권장하지 않는데 이유는 아래 4.를 참조하자.

 

4. 위 세 가지 라우팅 방법의 차이점(`<Link>` vs `router.push` vs `<a>` )

1. Route

router.push()를 이용하는 경우는 window.location과 비슷하게 동작한다.  
 `<a>`태그를 만들지 않기때문에 SEO(Search Engine Optimization)을 신경쓰고 있다면 해당 링크는 크롤링되지 않아서 SEO에 불리하다.  
 대부분의 사용시기가 onClick과 같은 이벤트 핸들러와 같이 사용된다.

2. `<Link>`

하지만 `<Link>`태그는 `<a>`태그를 생성하기 때문에 웹사이트가 크롤링되어 SEO에 유리하다.  
 페이지를 다시 로드하지않고 SPA(Single Page Application)동작처럼 "보이게" 만든다.

3. `<a>`

순수 HTML 요소로, 사용자를 새 페이지의 URL로 이동시키는 하이퍼링크를 생성합니다. 이때 페이지는 완전히 새로고침 된다.  
 만약 Next.js에서 `<a>`를 사용할 일이 있으면 `<Link>`태그로 바꾸는 것이 좋다.

- `<Link>`가 언제나 `<a>`태그를 포함하는 것은 아니다.

결론

- 대부분의 경우에 `<Link>`태그를 사용하는 것이 좋다.
- SEO에 상관없이 SPA처럼 동작하게 하고싶을 때엔 router.push를 사용한다.
- 슬러그에 대한 라우팅 방식은 [슬러그 사용](./slug)에서 확인할 수 있다.

 

출처:

https://nextjs.org/docs/routing/introduction

Routing: Introduction | Next.js