이번 포스트에서는 리그 오브 레전드 정보를 제공하는 앱의 메인 페이지를 설정하고, 글로벌 레이아웃과 네비게이션을 추가하는 방법에 대해 다룹니다. 이 과정에서는 Next.js의 App Router와 SSG (Static Site Generation) 방식을 활용하여 성능을 최적화했습니다.
1. 페이지 설정 및 메인 페이지 구현
- 경로: /
- 기능: 앱의 홈 페이지로, 주요 링크와 간단한 소개를 제공합니다.
- 렌더링 방식: Static Site Generation (SSG)
- 빌드 시점에 페이지를 정적으로 생성하여 빠른 로딩 속도를 제공합니다.
구현 방식:
- 홈 페이지 생성: page.tsx에서 홈 페이지를 간단하게 소개하고, 리그 오브 레전드 앱의 핵심 정보를 설명합니다.
- 글로벌 레이아웃 구성: layout.tsx 파일에서 공통 레이아웃을 설정하고 네비게이션 메뉴를 추가하여 앱 전반에 적용되는 글로벌 스타일과 구조를 제공합니다.
- Tailwind CSS 스타일링: layout.tsx와 개별 페이지에서 Tailwind CSS를 사용하여 간결하고 일관성 있는 스타일을 적용합니다.
- 정적 렌더링 적용: Next.js의 SSG 기능을 활용하여 앱의 성능을 최적화하고, 빠르게 로드될 수 있도록 페이지를 정적으로 생성합니다.
코드 구현
page.tsx 파일에서는 홈 페이지를 구성하였습니다. 다음과 같이 기본적인 정보를 담고 있습니다:
// page.tsx
import Link from "next/link";
export default function Home() {
return (
<div className="container mx-auto p-4 text-center">
<h1 className="text-4xl font-bold mb-4">리그 오브 레전드 정보 앱</h1>
<p className="mb-6">Riot Games API를 활용하여 챔피언과 아이템 정보를 제공합니다.</p>
</div>
);
}
이 코드는 간단한 텍스트와 소개 내용을 포함하고 있으며, 차후 필요한 데이터를 Riot Games API에서 불러올 수 있는 기반을 마련해 둡니다.
2. 글로벌 레이아웃과 네비게이션 추가
앱의 전반적인 레이아웃은 layout.tsx에서 정의되었습니다. 네비게이션 메뉴를 통해 사용자는 앱 내의 다른 페이지로 쉽게 이동할 수 있습니다. 아래는 네비게이션이 포함된 layout.tsx 코드입니다:
// layout.tsx
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import Link from "next/link";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
export const metadata: Metadata = {
title: "League of Legends Info App",
description: "Get the latest information on champions, items, and more from Riot Games API.",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<nav className="bg-gray-800 text-white p-4">
<ul className="flex space-x-6 justify-center">
<li>
<Link href="/" className="hover:text-gray-400">Home</Link>
</li>
<li>
<Link href="/champions" className="hover:text-gray-400">Champions</Link>
</li>
<li>
<Link href="/items" className="hover:text-gray-400">Items</Link>
</li>
<li>
<Link href="/rotation" className="hover:text-gray-400">Rotation</Link>
</li>
</ul>
</nav>
<main>{children}</main>
</body>
</html>
);
}
이제 사용자들은 상단의 네비게이션 바를 통해 홈 페이지, 챔피언 목록, 아이템 목록, 로테이션 정보 페이지로 쉽게 이동할 수 있습니다.
- 홈 페이지에 앱의 소개와 사용 방법 등을 추가하여 사용자 친화적으로 만들 수 있습니다.
- 레이아웃 컴포넌트를 통해 전체 페이지에 공통적으로 적용되는 요소를 관리할 수 있으며, 메타데이터 설정을 통해 SEO를 향상시킬 수 있습니다.
이 단계에서 우리는 메인 페이지와 글로벌 레이아웃을 성공적으로 구성하였으며, 사용자에게 원활한 탐색 경험을 제공할 수 있는 기반을 마련했습니다.