Next.js 시작하기(3)

라우팅

우선 시작하기에 앞서 npx로 Next앱을 만들거나 혹은 아래 명령어를 입력해 프로젝트를 다운받아야한다.

나는 명령어를 이용해 프로젝트를 다운받았다.

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/navigate-between-pages-starter"

이후

npm run dev

 

Next.js에서 pages폴더내에 생성한 파일 이름을 기반으로 라우팅을 실행합니다.

예를들어, pages/index.js는 '/', pages/posts/first-post.js는 /posts/first-post와 같이 라우팅됩니다.

우선 pages폴더에 posts폴더를 만든 후, first-post.js파일을 생성합니다.

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

이제 개발 서버가 실행 중인지 확인하고 http://localhost:3000/posts/first-post 를 방문하세요 . 다음 페이지가 표시됩니다.

이것이 Next.js에서 라우팅을 설정하는 방법입니다.

pages 폴더 아래에 js파일을 생성하면 해당 파일의 경로가 URL경로가 됩니다.

어떤 면에서는 HTML이나 PHP파일을 이용해 웹사이트를 구축하는 것과 유사합니다. HTML을 작성하는 대신 JSX를 작성하고 React구성요소를 사용합니다.

 

Link Component

보통 웹사이트의 페이지를 연결할 때 <a>태그를 사용합니다.

Next.js에서는 Link구성요소를 사용해 애플리케이션 페이지를 연결할 수 있습니다.

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <Link href="https://nextjs,org">Next.js!</Link>
    </div>
  );
}

또는 내부 링크를 연결할 때는 

<Link href="/post/first-post">First-post!</Link>

를 사용합니다.

물론 Next.js에서도 <a>링크를 사용할 수 있습니다.

그러나 그 차이점은 분명합니다.

<Link>태그를 이용하면 동일한 Next.js앱의 두 페이지간 Client-side Navigation(CSN)이 가능합니다.

CSN을 사용하면 페이지 전환이 브라우저에서 수행되는 기본 탐색보다 js를 사용하여 더 빠른 navigation이 가능합니다.

즉, CSN을 사용하는 <Link>와 달리 <a>태그는 페이지를 새로고침하며 새 코드를 받아옵니다.