페이지 생성하기
App Router에서 페이지를 생성하는 것은 Next.js 애플리케이션 구축의 기본입니다.
이 절에서는 page.js
파일을 사용하여 페이지를 생성하는 방법과 그 역할에 대해 자세히 알아보겠습니다.
page.js 파일의 역할
page.js
파일은 App Router에서 라우트의 UI를 정의하는 핵심 파일입니다.
이 파일은 해당 라우트의 고유한 콘텐츠를 포함하며, 다음과 같은 특징을 가집니다.
- 기본적으로 서버 컴포넌트입니다.
default
내보내기를 사용하여 React 컴포넌트를 정의합니다.- 파일 경로가 URL 경로와 직접적으로 대응됩니다.
기본 페이지 구조
다음은 기본적인 page.js
파일의 구조입니다.
이 파일은 애플리케이션의 루트 경로 /
에 대응하는 홈 페이지를 생성합니다.
메타데이터 설정
Next.js 13부터는 page.js
파일 내에서 직접 메타데이터를 설정할 수 있습니다.
이는 SEO와 소셜 미디어 공유를 위해 중요합니다.
이 예제는 /about
경로에 대한 페이지를 생성하고, 해당 페이지의 메타데이터를 설정합니다.
정적 페이지 vs 동적 페이지
1. 정적 페이지
- 빌드 시점에 생성되어 모든 요청에 대해 동일한 콘텐츠를 제공합니다.
- 성능이 뛰어나고 CDN에 쉽게 캐시할 수 있습니다.
2. 동적 페이지
- 요청 시점에 데이터를 가져와 페이지를 생성합니다.
- 사용자별 또는 실시간 데이터를 표시해야 할 때 유용합니다.
이 예제는 /posts/1
, /posts/2
등의 동적 라우트를 처리합니다.
5장 페이지 및 레이아웃 컴포넌트와의 연결
이 절에서 배운 페이지 생성 방법은 5장 "페이지 및 레이아웃 컴포넌트"의 기초가 됩니다.
5장에서는 여기서 생성한 페이지들을 레이아웃 컴포넌트와 결합하여 더 복잡한 페이지 구조를 만드는 방법을 학습하게 됩니다.
또한, 페이지 간의 데이터 공유와 컴포넌트 재사용 등 고급 주제도 다루게 될 것입니다.
실습 : 여러 유형의 페이지 생성하기
다음 요구사항을 만족하는 페이지들을 생성해보세요.
1. 홈 페이지 /
- 웹사이트 소개와 주요 기능 나열
- 메타데이터 설정 (제목: "Welcome to My Next.js App")
2. 소개 페이지 /about
- 회사나 개인 소개 내용 포함
- 메타데이터 설정 (제목: "About Us", 설명: "Learn more about our company")
3. 연락처 페이지 /contact
- 연락 정보 (이메일, 전화번호 등) 표시
- 메타데이터 설정 (제목: "Contact Us", 설명: "Get in touch with us")
4. 동적 블로그 포스트 페이지 /blog/[slug]
- URL 파라미터를 사용하여 동적 콘텐츠 표시
- 메타데이터를 동적으로 설정
각 페이지에 대해
- 적절한 위치에
page.js
파일을 생성합니다. - 페이지 컴포넌트를 구현합니다.
- 메타데이터를 설정합니다.
- 필요한 경우 데이터 페칭 로직을 추가합니다.
이 실습을 통해 다양한 유형의 페이지를 생성하고, 정적 및 동적 라우팅을 실제로 구현해볼 수 있습니다.
이는 실제 Next.js 애플리케이션을 개발할 때 필요한 기본 스킬을 익히는 데 도움이 될 것입니다.