icon안동민 개발노트

페이지 생성하기

 App Router에서 페이지를 생성하는 것은 Next.js 애플리케이션 구축의 기본입니다.

 이 절에서는 page.js 파일을 사용하여 페이지를 생성하는 방법과 그 역할에 대해 자세히 알아보겠습니다.

page.js 파일의 역할

 page.js 파일은 App Router에서 라우트의 UI를 정의하는 핵심 파일입니다.

 이 파일은 해당 라우트의 고유한 콘텐츠를 포함하며, 다음과 같은 특징을 가집니다.

  1. 기본적으로 서버 컴포넌트입니다.
  2. default 내보내기를 사용하여 React 컴포넌트를 정의합니다.
  3. 파일 경로가 URL 경로와 직접적으로 대응됩니다.

기본 페이지 구조

 다음은 기본적인 page.js 파일의 구조입니다.

// app/page.js
import React from 'react';
 
export default function Home() {
  return (
    <div>
      <h1>Welcome to my Next.js App</h1>
      <p>This is the home page.</p>
    </div>
  );
}

 이 파일은 애플리케이션의 루트 경로 /에 대응하는 홈 페이지를 생성합니다.

메타데이터 설정

 Next.js 13부터는 page.js 파일 내에서 직접 메타데이터를 설정할 수 있습니다. 이는 SEO와 소셜 미디어 공유를 위해 중요합니다.

// app/about/page.js
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn more about our company',
};
 
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a passionate team dedicated to creating amazing web experiences.</p>
    </div>
  );
}

 이 예제는 /about 경로에 대한 페이지를 생성하고, 해당 페이지의 메타데이터를 설정합니다.

정적 페이지 vs 동적 페이지

  1. 정적 페이지
  • 빌드 시점에 생성되어 모든 요청에 대해 동일한 콘텐츠를 제공합니다.
  • 성능이 뛰어나고 CDN에 쉽게 캐시할 수 있습니다.
예제
// app/contact/page.js
export default function Contact() {
  return (
    <div>
      <h1>Contact Us</h1>
      <p>Email: [email protected]</p>
    </div>
  );
}
  1. 동적 페이지
  • 요청 시점에 데이터를 가져와 페이지를 생성합니다.
  • 사용자별 또는 실시간 데이터를 표시해야 할 때 유용합니다.
예제
// app/posts/[id]/page.js
async function getPost(id) {
  const res = await fetch(`https://api.example.com/posts/${id}`);
  return res.json();
}
 
export default async function Post({ params }) {
  const post = await getPost(params.id);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

 이 예제는 /posts/1, /posts/2 등의 동적 라우트를 처리합니다.

5장 페이지 및 레이아웃 컴포넌트와의 연결

 이 절에서 배운 페이지 생성 방법은 5장 "페이지 및 레이아웃 컴포넌트"의 기초가 됩니다. 5장에서는 여기서 생성한 페이지들을 레이아웃 컴포넌트와 결합하여 더 복잡한 페이지 구조를 만드는 방법을 학습하게 됩니다. 또한, 페이지 간의 데이터 공유와 컴포넌트 재사용 등 고급 주제도 다루게 될 것입니다.

실습 : 여러 유형의 페이지 생성하기

 다음 요구사항을 만족하는 페이지들을 생성해보세요.

  1. 홈 페이지 /
  • 웹사이트 소개와 주요 기능 나열
  • 메타데이터 설정 (제목: "Welcome to My Next.js App")
  1. 소개 페이지 /about
  • 회사나 개인 소개 내용 포함
  • 메타데이터 설정 (제목: "About Us", 설명: "Learn more about our company")
  1. 연락처 페이지 /contact
  • 연락 정보 (이메일, 전화번호 등) 표시
  • 메타데이터 설정 (제목: "Contact Us", 설명: "Get in touch with us")
  1. 동적 블로그 포스트 페이지 /blog/[slug]
  • URL 파라미터를 사용하여 동적 콘텐츠 표시
  • 메타데이터를 동적으로 설정

 각 페이지에 대해

  1. 적절한 위치에 page.js 파일을 생성합니다.
  2. 페이지 컴포넌트를 구현합니다.
  3. 메타데이터를 설정합니다.
  4. 필요한 경우 데이터 페칭 로직을 추가합니다.

 이 실습을 통해 다양한 유형의 페이지를 생성하고, 정적 및 동적 라우팅을 실제로 구현해볼 수 있습니다.

 이는 실제 Next.js 애플리케이션을 개발할 때 필요한 기본 스킬을 익히는 데 도움이 될 것입니다.

App Router 구조 이해하기레이아웃 컴포넌트 사용하기