페이지 컴포넌트 작성

Next.js에서 페이지 컴포넌트는 애플리케이션의 각 라우트에 대한 UI를 정의하는 핵심 요소입니다.

이 절에서는 페이지 컴포넌트의 개념, 작성 방법, 그리고 주요 특성에 대해 알아보겠습니다.

page.js 파일의 역할

page.js 파일은 Next.js의 App Router에서 특정 라우트의 UI를 정의합니다.

이 파일은 해당 경로에 대한 고유한 페이지 컨텐츠를 포함합니다.

기본 구조

페이지 컴포넌트의 기본 구조는 다음과 같습니다.

app/page.js

export default function Page() {
  return (
    <div>
      <h1>Welcome to my page</h1>
    </div>
  )
}

이 컴포넌트는 기본적으로 서버 컴포넌트로 동작합니다.

메타데이터 설정

Next.js 13 이상에서는 페이지별 메타데이터를 쉽게 설정할 수 있습니다.

app/page.js

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'My Page Title',
  description: 'This is my page description',
}
 
export default function Page() {
  return <h1>Welcome to my page</h1>
}

이 메타데이터는 SEO와 소셜 미디어 공유에 중요합니다.

서버 컴포넌트로서의 페이지 특성

Next.js의 페이지 컴포넌트는 기본적으로 서버 컴포넌트입니다.

이는 다음과 같은 장점을 제공합니다.

초기 페이지 로드 성능 향상 : 서버에서 렌더링되어 클라이언트로 전송되므로 초기 로드 시간이 빨라집니다.
SEO 최적화 : 서버에서 렌더링되므로 검색 엔진이 컨텐츠를 쉽게 인식할 수 있습니다.
보안 : 서버 사이드 로직을 클라이언트에 노출하지 않고 실행할 수 있습니다.
데이터 접근 : 데이터베이스나 파일 시스템에 직접 접근할 수 있습니다.

동적 데이터 처리

서버 컴포넌트에서는 비동기 함수를 사용하여 동적 데이터를 쉽게 처리할 수 있습니다.

app/page.js

async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
  return <div>{data.message}</div>
}

7장 서버, 클라이언트 컴포넌트와의 연결

5장에서 다루는 페이지 컴포넌트는 7장의 서버 컴포넌트 개념과 직접적으로 연결됩니다.

페이지 컴포넌트는 기본적으로 서버 컴포넌트이지만, 필요에 따라 클라이언트 컴포넌트를 포함할 수 있습니다.

7장에서는 이 두 가지 유형의 컴포넌트를 언제, 어떻게 사용해야 하는지 더 자세히 다루게 됩니다.

실습 : 다양한 유형의 페이지 만들기

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

홈 페이지 /
About 페이지 /about
Contact 페이지 /contact

각 페이지에 적절한 메타데이터를 설정하고, 간단한 컨텐츠를 포함시키세요.

구현 단계

app/page.js

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Welcome to My Website',
  description: 'This is the home page of my awesome website',
}
 
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <p>This is the home page. Feel free to explore!</p>
    </div>
  )
}

app/about/page.js

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

app/contact/page.js

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Contact Us',
  description: 'Get in touch with our team',
}
 
export default function ContactPage() {
  return (
    <div>
      <h1>Contact Us</h1>
      <p>Email: contact@example.com</p>
      <p>Phone: (123) 456-7890</p>
    </div>
  )
}

이 실습을 통해 기본적인 페이지 구조를 만들고, 각 페이지에 적절한 메타데이터를 설정하는 방법을 익힐 수 있습니다.

또한, 서버 컴포넌트로서의 페이지 특성을 활용하여 필요한 경우 비동기 데이터 페칭을 구현해볼 수 있습니다.

이전으로 다음으로