Next.js 학습 자료

Next.js 프레임워크 학습을 위한 30장의 마크다운 자료입니다.

← 목록으로

Next.js 학습자료 - 챕터 19

챕터 19: 정적 라우팅 구현하기

서론 이전 챕터에서 라우팅의 개념과 Next.js의 파일 기반 라우팅 시스템을 이해했다면, 이제는 실제로 정적 라우팅을 구현해볼 차례입니다. 정적 라우팅은 미리 정해진 경로를 가진 페이지들을 만드는 것으로, 홈페이지, 소개 페이지, 연락처 페이지처럼 항상 동일한 URL을 가지는 페이지들을 의미합니다. Next.js에서 정적 라우팅을 구현하는 것은 놀라울 정도로 간단합니다. 폴더를 만들고 그 안에 page.js 파일을 넣기만 하면 됩니다. 하지만 이 간단함 속에는 강력한 기능들이 숨어있습니다. 이번 챕터에서는 실제로 여러 페이지를 만들고, 중첩된 라우트 구조를 구성하며, 사용자가 존재하지 않는 페이지에 접근했을 때 보여줄 404 페이지까지 구현해보겠습니다. 본론 첫 번째 정적 페이지 만들기 가장 기본적인 정적 라우팅부터 시작해봅시다. app 폴더 안에 새로운 폴더를 만들고 page.js 파일을 추가하면 됩니다: jsx// app/about/page.js export default function AboutPage() { return (

회사 소개

우리 회사는 2024년에 설립되었습니다.

최고의 서비스를 제공하기 위해 노력하고 있습니다.

) } 이제 브라우저에서 http://localhost:3000/about으로 접속하면 방금 만든 페이지를 볼 수 있습니다. 폴더 이름이 곧 URL 경로가 되는 것입니다! 여러 정적 페이지 구성하기 실제 웹사이트처럼 여러 페이지를 만들어봅시다: jsx// app/services/page.js export default function ServicesPage() { const services = [ { id: 1, title: '웹 개발', description: '반응형 웹사이트 제작' }, { id: 2, title: '앱 개발', description: '모바일 애플리케이션 개발' }, { id: 3, title: '디자인', description: 'UI/UX 디자인 서비스' } ]

return (

서비스 소개

{services.map(service => (

{service.title}

{service.description}

))}
) } jsx// app/contact/page.js export default function ContactPage() { return (

연락처

📍 주소

서울시 강남구 테헤란로 123

📞 전화번호

02-1234-5678

✉️ 이메일

contact@example.com

) } 중첩된 라우트 구조 만들기 실제 웹사이트는 종종 중첩된 URL 구조를 가집니다. 예를 들어 /products/category/items 같은 구조입니다. Next.js에서는 폴더를 중첩하여 이를 쉽게 구현할 수 있습니다: jsx// app/products/page.js export default function ProductsPage() { return (

전체 상품

전자제품

의류
) } jsx// app/products/electronics/page.js export default function ElectronicsPage() { const products = [ { id: 1, name: '노트북', price: '1,500,000원' }, { id: 2, name: '스마트폰', price: '1,200,000원' }, { id: 3, name: '태블릿', price: '800,000원' } ]

return (

전자제품

상품 > 전자제품 

    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {products.map(product => (
        <div key={product.id} className="bg-white p-6 rounded-lg shadow-md">
          <div className="h-32 bg-gray-200 rounded mb-4"></div>
          <h3 className="text-lg font-semibold">{product.name}</h3>
          <p className="text-blue-600 font-bold">{product.price}</p>
        </div>
      ))}
    </div>
  </div>
</div>

) } jsx// app/products/clothing/page.js export default function ClothingPage() { const products = [ { id: 1, name: '티셔츠', price: '29,000원' }, { id: 2, name: '청바지', price: '79,000원' }, { id: 3, name: '자켓', price: '150,000원' } ]

return (

의류

상품 > 의류 

    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {products.map(product => (
        <div key={product.id} className="bg-white p-6 rounded-lg shadow-md">
          <div className="h-32 bg-gray-200 rounded mb-4"></div>
          <h3 className="text-lg font-semibold">{product.name}</h3>
          <p className="text-green-600 font-bold">{product.price}</p>
        </div>
      ))}
    </div>
  </div>
</div>

) } 공통 레이아웃 적용하기 여러 페이지에서 공통으로 사용되는 네비게이션 바를 layout.js를 통해 구현할 수 있습니다: jsx// app/layout.js export default function RootLayout({ children }) { return (

{children} ) } 404 페이지 처리하기 사용자가 존재하지 않는 페이지에 접근했을 때 보여줄 404 페이지를 만들어봅시다: jsx// app/not-found.js export default function NotFound() { return (

404

페이지를 찾을 수 없습니다

요청하신 페이지가 존재하지 않거나 이동되었습니다.

홈으로 돌아가기
) } 실습: 간단한 블로그 구조 만들기 지금까지 배운 내용을 종합하여 간단한 블로그 구조를 만들어봅시다: jsx// app/blog/page.js export default function BlogPage() { const posts = [ { id: 1, title: 'Next.js 시작하기', date: '2024.01.15', category: '개발' }, { id: 2, title: '라우팅 이해하기', date: '2024.01.16', category: '개발' }, { id: 3, title: '컴포넌트 만들기', date: '2024.01.17', category: '튜토리얼' } ]

return (

블로그 

    <div className="space-y-6">
      {posts.map(post => (
        <article key={post.id} className="bg-white p-6 rounded-lg shadow-md">
          <div className="flex items-center mb-2">
            <span className="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">
              {post.category}
            </span>
            <span className="text-sm text-gray-500 ml-4">
              {post.date}
            </span>
          </div>
          <h2 className="text-2xl font-semibold text-gray-800 mb-2">
            {post.title}
          </h2>
          <p className="text-gray-600 mb-4">
            이것은 블로그 포스트의 요약 내용입니다. 
            클릭하면 전체 내용을 볼 수 있습니다.
          </p>
          <a href={`/blog/post-${post.id}`} 
             className="text-blue-600 hover:underline">
            자세히 읽기 →
          </a>
        </article>
      ))}
    </div>
  </div>
</div>

) } jsx// app/blog/categories/page.js export default function CategoriesPage() { const categories = [ { name: '개발', count: 15, color: 'blue' }, { name: '튜토리얼', count: 8, color: 'green' }, { name: '뉴스', count: 12, color: 'purple' }, { name: '팁', count: 6, color: 'yellow' } ]

return (

카테고리

블로그 > 카테고리 

    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {categories.map(category => (
        <div key={category.name} 
             className={`bg-${category.color}-100 p-6 rounded-lg text-center hover:bg-${category.color}-200 transition cursor-pointer`}>
          <h3 className={`text-xl font-semibold text-${category.color}-800`}>
            {category.name}
          </h3>
          <p className={`text-${category.color}-600 mt-2`}>
            {category.count}개 포스트
          </p>
        </div>
      ))}
    </div>
  </div>
</div>

) } 정적 페이지 최적화 팁 Next.js에서 정적 페이지를 만들 때 알아두면 좋은 팁들입니다: jsx// app/team/page.js // 메타데이터 설정 export const metadata = { title: '팀 소개 - MyWebsite', description: '우리 팀을 소개합니다' }

export default function TeamPage() { const teamMembers = [ { name: '김철수', role: 'CEO', image: '👨‍💼' }, { name: '이영희', role: 'CTO', image: '👩‍💻' }, { name: '박민수', role: 'Designer', image: '👨‍🎨' } ]

return (

우리 팀 

    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
      {teamMembers.map((member, index) => (
        <div key={index} className="text-center">
          <div className="text-8xl mb-4">{member.image}</div>
          <h3 className="text-xl font-semibold">{member.name}</h3>
          <p className="text-gray-600">{member.role}</p>
        </div>
      ))}
    </div>
  </div>
</div>

) } 결론 정적 라우팅은 Next.js에서 가장 기본적이면서도 중요한 기능입니다. 이번 챕터에서 우리는 단순한 페이지부터 중첩된 라우트 구조, 404 페이지 처리, 그리고 실제 블로그 구조까지 다양한 정적 라우팅 패턴을 구현해보았습니다. Next.js의 파일 기반 라우팅 시스템은 직관적이고 강력합니다. 폴더를 만들고 page.js 파일을 넣는 것만으로도 새로운 페이지가 생성되고, 폴더를 중첩하면 자연스럽게 URL 구조가 만들어집니다. 또한 layout.js를 통해 공통 요소를 효율적으로 관리할 수 있고, not-found.js로 404 페이지도 쉽게 커스터마이징할 수 있습니다. 정적 라우팅을 마스터하면 대부분의 웹사이트 구조를 구현할 수 있습니다. 회사 소개 사이트, 포트폴리오, 블로그 등 다양한 웹사이트가 정적 라우팅만으로도 충분히 구현 가능합니다. 다음 챕터에서는 동적 라우팅을 배워 더욱 유연하고 강력한 웹 애플리케이션을 만드는 방법을 알아보겠습니다!