[Next.js 15] a태그 말고 Link 쓰세요 – SPA를 위한 라우팅 방식

Next.js는 파일 기반 라우팅을 제공하기 때문에,
특정 URL로 이동하고 싶다면 해당 경로의 폴더와 page.js(page.tsx)파일만 만들면 된다.

---

/about 페이지 생성하기

/about으로 라우팅한다고 가정해보자.
1. app/about/ 폴더를 만든다.
2. app/about/page.js 파일을 생성한다.

app/
 └ about/
    └ page.tsx

/about 경로로 접근하면 해당 페이지가 자동으로 렌더링된다.

---

❌ 그냥 <a href="/about"> 쓰면 안 되는 이유

리액트에서는 SPA(Single Page Application) 구조를 유지하기 위해 클라이언트에서 페이지를 전환하더라도 전체 새로고침 없이 전환하는 것이 중요하다.
하지만 아래처럼 <a> 태그를 사용하면

export default function Home() {
  return (
    <main>
      <p>
        <a href="/about">About us</a>
      </p>
    </main>
  );
}

• 탭의 새로고침 아이콘이 X로 일시적으로 변함
• 주소는 이동되지만 브라우저가 전체 페이지를 새로 다운(로딩)
• 결국 SPA가 아닌 전통적인 웹 방식처럼 동작하게 된다.

---

✅ Link 컴포넌트를 사용하자

Next.js에서는 이 문제를 해결하기 위해 Link컴포넌트를 제공한다.

import Link from "next/link";

export default function Home() {
  return (
    <main>
      <p>
        <Link href="/about">About Us</Link>
      </p>
    </main>
  );
}

• 새로고침 없이페이지가 전환됨
• 백그라운드에서 미리 렌더링이 일어나서 빠른 전환 가능
• SPA 특성을 유지함

---

동작 간단 요약

Link컴포넌트를 렌더링하면, 백그라운드에서 다음 페이지 내용을 미리 서버에 렌더링한다.
이후, 사용자가 클릭하면 클라이언트측에서 기존 HTML을 유지하면서 필요한 부분만 업데이트한다.
이로써 부드러운 전환과 빠른 응답이 가능한 것이다.

---

💡 Next.js에서는 Link 컴포넌트를 사용하자.