Next.js 튜토리얼: 2. Navigate Between Pages

Create a New Page

pages 디렉토리 안에 posts라는 디렉토리 생성
pages/posts/first-post.js 생성

first-post.js에 해당 코드 작성

export default function FirstPost() {
  return <h1>First Post</h1>;
}

http://localhost:3000/posts/first-post
접속

결과

❗️👀 여기서 알 수 있는 것

• Next.js 페이지는 pages 안에 있는 react 컴포넌트임
• pages 안에 있는 파일 경로가 곧 URL path임

Link Component<Link> 사용
1. link import
2. <a>태그 <Link>로 감싸기

index.js

import Link

import Link from "next/link";

return 부분에 작성

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

first-post

import Link from "next/link";

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

}

결과

Back to 클릭하면 http://localhost:3000/ 로 돌아감(첫화면)

❗️Client-Side Navigation-애매하게 이해가 간다. 다시 한 번 더 읽어보기