[Next.js] Link 사용하기

Setup - Create a Next.js App | Learn Next.js (nextjs.org)

Learn | Next.js

참고하여 Next.js에 Navigate 기능인 Link를 달아보려고 합니다.

 

1. pages/posts/first-post.jsx를 생성해줍니다.

import Link from 'next/link';

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

2. index.js 편집

<h1 className="title">
	Read <Link href="/posts/first-post">this page!</Link>
</h1>

 

[this page] 클릭하면

서버통신이 없이 빠르게 이동하는  것을 확인할 수 있습니다.