3. 메인페이지, 레이아웃 구성 및 네비게이션 추가
페이지 설정 및 메인 페이지 구현
- 경로: /
- 기능: 앱의 홈 페이지로, 주요 링크와 간단한 소개를 제공합니다.
- 렌더링 방식: Static Site Generation (SSG)
- 빌드 시점에 페이지를 정적으로 생성합니다.
- 요구사항:
- 글로벌 레이아웃을 설정하고 네비게이션 메뉴를 추가하여 페이지 간 이동이 가능하도록 합니다.
- 챔피언 목록, 아이템 목록, 로테이션 정보 페이지로 이동할 수 있는 링크를 제공합니다.
- 힌트:
- Next.js의 App Router를 사용하여 레이아웃과 페이지를 구성합니다.
- layout.tsx 파일에서 글로벌 네비게이션을 설정하고, 공통 레이아웃을 정의합니다.
- Tailwind CSS를 활용하여 스타일링을 적용합니다.
- 정적 콘텐츠이므로 SSG를 사용하여 빠른 로딩 속도를 제공합니다.
💡 추가 팁:
- 홈 페이지에 앱의 소개와 사용 방법 등을 추가하여 사용자 친화적으로 만들 수 있습니다.
- 네비게이션을 활용하여 다른 페이지로 쉽게 이동할 수 있도록 구성하세요.
- 레이아웃 컴포넌트를 통해 전체 페이지에 공통적으로 적용되는 요소를 관리할 수 있습니다.
- 메타데이터 설정을 통해 SEO를 향상시킬 수 있습니다.
export default function Home() {
return (
<div>
<h1>리그 오브 레전드 정보 앱</h1>
<p>Riot Games API를 활용하여 챔피언과 각종 아이템 정보를 제공합니다.</p>
</div>
);
}import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
const inter = Inter({ subsets: ["latin"] });
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,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<nav>
<ul>
<li>
<Link href={"/"}>홈</Link>
</li>
<li>
<Link href={"/champions"}>챔피언</Link>
</li>
<li>
<Link href={"/items"}>아이템</Link>
</li>
<li>
<Link href={"/rotation"}>로테이션</Link>
</li>
</ul>
</nav>
<main>{children}</main>
</body>
</html>
);
}'스파르타코딩클럽 > 과제' 카테고리의 다른 글
| [Next.js/Typescript] LOL_Dex: NextJS에서 환경변수 사용하기 (0) | 2024.12.19 |
|---|---|
| [Next.js/Typescript] LOL_Dex: 컴포넌트에서 버전 정보 전달하기 (0) | 2024.12.19 |
| [Next.js + TypeScript] 리그 오브 레전드 정보 도감 만들기 (0) | 2024.12.11 |
| [React 아웃소싱 프로젝트] 지도에 커스텀 오버레이 생성하기 (1) | 2024.12.02 |
| [뉴스피드 프로젝트] 게시글 작성 페이지_이미지 업로드 (1) | 2024.11.18 |