페이지 연결하기

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 7번째.

아무도 도달할 수 없는 두 개의 페이지는 아직 사이트라고 할 수 없습니다. 링크가 필요하며, Next.js에는 자체 링크 구성 요소가 있습니다:

import Link from 'next/link';

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

<a>처럼 보이고, 완성된 HTML에서는 실제로 <a> 태그입니다: 동일한 href를 가지며, 마우스 우클릭이 가능하고, 스크린 리더와 검색 엔진이 읽을 수 있습니다. 그렇다면 왜 그냥 <a href="/about">라고 쓰지 않을까요?

브라우저가 일반 링크를 처리하는 방식 때문입니다. 브라우저는 현재 페이지를 버리고 완전히 새로운 페이지를 로드합니다. 모든 스크립트가 다시 다운로드되고, React가 처음부터 다시 부팅되며, 메모리에 있는 모든 것(열려 있는 메뉴, 작성 중이던 폼, 장바구니의 항목 등)이 사라집니다.

Link는 클릭을 가로채서 실제로 변경되는 화면의 일부만 교체합니다. 앱이 다시 시작되지 않으므로 상태가 유지되고 새 페이지가 즉시 나타납니다.

<a href>: 전체 새로고침, 앱 다시 시작, 상태 손실
<Link href>: 동일한 URL, HTML 내 동일한 <a>, 새로고침 없음

규칙은 간단합니다: 앱 내부에서는 항상 Link를 사용하세요. 일반 <a> 태그는 사이트를 벗어나는 링크용으로 남겨두세요.

챌린지

쉬움

두 페이지가 존재하지만 이들 사이를 이동할 방법이 없습니다. Link를 사용하여 페이지들을 연결하세요.

두 파일 모두에서 next/link로부터 Link를 import하세요.
app/page.jsx에 id="to-about" 속성을 가진 /about으로 가는 링크를 추가하세요.
app/about/page.jsx에 id="to-home" 속성을 가진 /로 되돌아가는 링크를 추가하세요.

링크 텍스트는 자유롭게 작성하면 됩니다. 테스트에서는 각 링크를 클릭하고 올바른 페이지에 도달했는지 확인합니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}