6단계: 정적 페이지 추가와 라우팅 확장

정적 페이지 추가와 라우팅 확장

Pliny는 블로그 외에도 정적 페이지를 쉽게 추가할 수 있도록 구성되어 있습니다.
pages/ 디렉토리에 직접 컴포넌트를 작성하면 라우팅과 SEO가 자동으로 적용됩니다.

6-1. 정적 페이지란?

• MDX가 아닌 일반 .tsx 컴포넌트 파일로 작성
• /about, /contact, /projects 등의 페이지 구성
• 블로그처럼 SEO, Tailwind 스타일, 다크모드 적용 가능

6-2. 새로운 페이지 생성 예시

/pages/about.tsx

import { PageSEO } from '@/components/SEO'
import siteMetadata from '@/data/siteMetadata'

export default function About() {
  return (
    <>
      <PageSEO title={`About - ${siteMetadata.author}`} description="소개 페이지입니다" />
      <div className="mt-4 text-gray-700 dark:text-gray-300">
        <h1 className="text-3xl font-bold mb-4">About</h1>
        <p>포텐(Poten) 팀은 콘텐츠 자동화를 통해...</p>
      </div>
    </>
  )
}

• PageSEO → 메타 태그 자동 구성
• siteMetadata → 공통 정보 참조 가능

6-3. 라우팅 확장 구조

6-4. 메뉴에 반영하기

data/headerNavLinks.ts 수정:

const headerNavLinks = [
  { href: '/', title: 'Home' },
  { href: '/blog', title: 'Blog' },
  { href: '/about', title: 'About' },
  { href: '/contact', title: 'Contact' },
]

• 이 배열에 항목 추가 시, 상단 네비게이션 자동 반영됨

6-5. 추가 UI 구성 힌트

• Tailwind 유틸리티를 활용해 다양한 레이아웃 가능
• components/ 폴더에 UI 분리해서 재사용 가능
• 다크모드는 자동 반영됨 (dark: 클래스 활용)

요약

• 정적 페이지는 pages/ 디렉토리에 직접 추가
• PageSEO로 SEO 자동 처리
• headerNavLinks.ts에서 메뉴 노출 제어
• 소개, 팀, 채용, 포트폴리오 페이지 등 다양한 확장 가능

심화학습

Q1. 정적 페이지도 MDX로 작성하고 싶다면 어떤 구조로 만들어야 할까?

A: content/pages/*.mdx 구조를 만들고 defineDocumentType으로 등록한 후, 커스텀 라우터를 구현하거나 getStaticPaths를 통해 연결할 수 있습니다.

Q2. SEO 메타 정보를 페이지마다 커스터마이징하는 가장 깔끔한 방법은 무엇일까?

A: PageSEO 컴포넌트를 사용해 title, description을 페이지 컴포넌트에서 명시적으로 전달하면, 깔끔하게 각 페이지별 메타 구성이 가능합니다.

Q3. 정적 페이지에서 공통 레이아웃을 공유하고 싶을 때 HOC나 커스텀 Layout 컴포넌트를 어떻게 구성해야 할까?

A: components/Layout.tsx로 공통 레이아웃을 만들고, 각 페이지에서 return <Layout><main>...</main></Layout> 구조로 감싸는 방식이 일반적입니다.