[ Next.js ] a tag, Next/link, route 다르게 작동된다고?

 

저는 회사에서 Next.js를 사용하면서 페이지 이동할때 사용하는 a태그, next/link, route 부분을 많이 다루고 있었습니다. 하지만 나는 여기에서 중요한 핵심 포인트를 정리하기 위해서 다시 블로그에 글을 적게 되었습니다.

 

우선 다양한 페이지 이동을 하는거에 바라보면 모두 비슷하고 다른점이 없다고 느끼는 경우도 많았습니다. 하지만 계속 아무런 의미없이 개발을 하게되었을땐 정말 실속없는 개발자가 되기가 뻔해 정리를 하였습니다.

 

 

Next.js 의 Router

https://nextjs.org/docs/app/building-your-application/routing/defining-routes

Routing: Defining Routes | Next.js

 

Next.js의 routes는 기본적으로 Next.js를 기본적으로 세팅할때, pages 폴더나 app 폴더가 만들어지는 것을 볼 수 있습니다.

우선 폴더안에 파일이름이나 jsx파일 만들어지면, 그 파일 이름 기준으로 라우팅되며 그렇게 URL 페이지가 만들어지게 됩니다. 예를들어 app router 기준으로 이야기를 드리면,  app 폴더안에 dashboard/settings 이렇게 만들었을때 Next.js에서 자동으로 라우팅되며, 이기준으로 URL 경로의 세그먼트로 매핑이 됩니다.

 

 

 

Next.js의 Router를 가볍게 보면 이런식으로 세팅을 하게 됩니다. 더 깊이는 다음시간에 정리해드리도록 하겠습니다.

 

이렇게 URL 세그먼트가 어떻게 매핑이 되는지 알아보았는데요? 하지만 페이지에서 어떤 링크나 클릭을 통해서 페이지를 직접 이동시키는 방법이 존재하는데요? 그것은 앞에서 이야기했는 a tag, route, next/link가 존재합니다.

---

a Tag

a 태그는 기본 HTML에 존재하는 많이사용되는 하이퍼텍스트입니다. 주로 다른 웹페이지로 이동할때 쓰거나 아니면 문서안에 특정 위치로 이동할때 사용합니다. 하지만 Next.js에서는 a태그 기능을 잘 활용을 하지 않습니다.

 

<a href="/about">About</a>

Router

Router.push('/push')는 window.location과 유사하게 동작합니다. 이 방법은 <a> 태그를 생성하지 않으므로, SEO에 관심이 있다면 링크가 크롤러에 의해 감지되지 않을 수 있습니다.

 

 Router.push는 주로 이벤트 핸들러(예: onClick)에서 사용되며, 작업을 수행한 후 결과에 따라 사용자를 다른 페이지로 이동시키는 경우에 유용합니다.

 

import { useRouter } from 'next/router';

const router = useRouter();

const handleClick = () => {
  router.push('/about');
};

<button onClick={handleClick}>About</button>

Next/link

Next/link는 <a> 태그를 생성하므로, 크롤러가 사이트를 스크랩할 때 링크가 감지됩니다. 이는 사용자가 페이지를 새로 고침하지 않고도 이동할 수 있게 하여 싱글 페이지 앱의 동작을 만듭니다.

 

또한, Next/link는 데이터 프리페치를 지원하여 사용자의 화면에 보일 때 해당 페이지의 번들 파일을 서버에 요청합니다. 이를 통해 페이지 이동을 빠르게 할 수 있습니다.

 

import Link from 'next/link';

<Link href="/about">
  <a>About</a>
</Link>

 

 

위에 3가지의 내용을 보면, SEO 기반을 이용해서 만들기 위해서는 되도록이면 Next/link를 이용하는 것이 좋으며 router를 사용하더라도 a태그를 크롤링할 수 있게 집어넣어주는 기능을 만들어두는것이 좋을거 같습니다.