3. Next.js 기본: 페이지 및 라우팅
3장: Next.js 기초 - 페이지와 라우팅
이번 장에서는 Next.js를 활용하여 웹 애플리케이션의 페이지 구조를 구성하고 라우팅을 설정하는 방법에 대해 알아보겠습니다. Next.js의 주요 특성 중 하나는 파일 기반 라우팅 시스템입니다. 여러분은 이 시스템을 쉽게 이해하고 사용할 수 있습니다.
기본 파일 및 폴더 구조
Next.js 애플리케이션을 만들면 기본적으로 다음과 같은 폴더 구조를 볼 수 있습니다:
my-app/
├── app/
├── pages/
├── public/
├── styles/pages 폴더
pages 폴더는 가장 먼저 이해해야 할 중요한 부분입니다. 이 폴더는 Next.js의 파일 기반 라우팅 시스템을 위한 핵심입니다. pages 폴더 안의 각 파일은 브라우저에서 접속 가능한 하나의 페이지를 나타냅니다. 예를 들어:
pages/
├── index.js // 홈페이지 (/)
├── about.js // /about 경로이 경우, 브라우저에서 http://localhost:3000으로 접속하면 index.js의 내용을 볼 수 있고, http://localhost:3000/about으로 접속하면 about.js의 내용을 볼 수 있습니다.
Next.js에서의 라우팅
정적 라우팅
정적 라우팅에서는 고정된 URL 경로를 사용하여 페이지를 구성합니다. 예를 들어, pages/contact.js 파일을 추가하면, /contact 경로로 접속할 수 있습니다.
동적 라우팅
Next.js에서는 동적 URL을 [] 문법을 사용하여 작성할 수 있습니다. 예를 들어, pages/post/[id].js 파일은 /post/123와 같은 경로를 설정할 수 있도록 합니다. 이를 useRouter를 사용하여 동적 데이터를 처리할 수 있습니다.
링크 설정
Next.js에서는 웹 페이지 간의 네비게이션을 돕는 <Link> 컴포넌트를 제공합니다. 이 컴포넌트를 사용하여 라우팅의 성능을 최적화할 수 있습니다:
import Link from 'next/link';
function Homepage() {
return (
<div>
<h1>홈페이지</h1>
<Link href='/about'><a>About 페이지로 이동</a></Link>
</div>
);
}App Router
Next.js 13에서는 새로운 방법인 App Router가 도입되었습니다. app 디렉토리를 이용하여 페이지와 레이아웃을 구성할 수 있습니다. 예를 들어, app/dashboard/page.js 파일은 /dashboard 경로를 제공합니다. App Router는 기존의 Pages Router보다 더 많은 기능을 지원합니다.
결론
Next.js의 파일 기반 라우팅 시스템은 매우 간단하면서도 강력한 웹 애플리케이션 구조를 제공합니다. 이번 장에서 배운 내용을 통해 Next.js에서 페이지를 생성하고 라우팅을 설정하는 기본적인 방법을 탐구할 수 있었습니다. 이후에는 레이아웃의 적용 및 더 복잡한 동적 요소를 다루는 방법을 배워보겠습니다.
