Next.js 기본 사용법(2) - 페이지

이번 포스트에서는 페이지와 라우팅에 대해 알아본다.

아래에 사용될 코드들은 예제의 부분을 따로 떼어내서 개념 설명에만 사용할 예정으로, 직접적인 예제 실습을 원하면 공식 문서의 예제를 따라하는 것을 권장한다.

https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website 

Learn | Next.js

 

1. 기본 라우팅

Next.js의 재밌는 점은 pages 폴더 아래의 폴더 혹은 파일들이 라우팅이 된다는 점이다.

이미 예제를 따라하며 만든 구성으로 그 외의 것들은 무시하고 about.js만 생성한다.

내용은 간단하게 아래와 같이 만든다.

// about.js

function About() {
  return <div>About</div>
}

export default About

localhost:3000/about을 통해 접속해보면 아래와 같이 뜨는 것을 확인할 수 있다.

2. 다이나믹 라우팅(동적 경로)

이제 Next.js의 또 하나 재밌는 점을 살펴본다. Next.js는 다이나믹 라우팅이라 하여 동적 경로가 있는 페이지를 지원한다.

 예를 들어 위 구성처럼 posts 폴더를 만들고 그 아래에 [id].js 파일을 만든다.

그러면, '/posts/1', '/posts/2' 와 같이 라우팅이 된다.

 

3. Link 컴포넌트

기존에 사용했던 <a>태그 대신에 Next.js에서는 Link 컴포넌트를 사용하여 <a>태그를 래핑한다.

이를 사용하면 다른 페이지로의 클라이언트 측 이동이 가능해진다.

import Link from 'next/link'

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