ํ๋ก์ ํธ ์์ฑ
- Next.js ํ๋ก์ ํธ ์์ฑ
npx create-next-app@latest์์ ๊ฐ์ด ๋ช ๋ น์ด๋ฅผ ์ ๋ ฅํ ํ
ํ์ํ ์ต์ ์ ์ ํ ํ ํ๋ก์ ํธ ์์ฑ! ์์ฑํ ํ๋ก์ ํธ๋ฅผ ์คํํ๋ ๋ฐฉ๋ฒ์ react ์ ๋์ผํ๋ค. yarn dev ๋ฅผ ์ ๋ ฅํด ์ฃผ๋ฉด ๋๋ค!
๋ ์ด์์ ์ค์
๋ด๊ฐ ๋ง๋ค ํ์ด์ง๋ ๋ชจ๋ ํ์ด์ง์ ๊ณตํต์ผ๋ก ์๋ ๋ ์ด์์์ด ํ์ํ๊ณ ๊ทธ ๋ ์ด์์์ ํ์ด์ง๋ฅผ ์ด๋ํ๋ ๋งํฌ๊ฐ ํ์ํ๋ค.
- root ์ layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import Link from "next/link";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<header className="flex gap-10">
<Link href={"/"}>ํ</Link>
<Link href={"/champions"}>์ฑํผ์ธ ๋ชฉ๋ก</Link>
<Link href={"/items"}>์์ดํ
๋ชฉ๋ก</Link>
<Link href={"/rotation"}>์ฑํผ์ธ ๋กํ
์ด์
</Link>
</header>
{children}
<footer>
<div>
<p>ํธํฐ์
๋๋ค.</p>
</div>
</footer>
</body>
</html>
);
}์ด๋ ๊ฒ ํ๋ฉด header ๋ถ๋ถ๊ณผ footer ๋ ๋ชจ๋ ํ์ด์ง์์ ๊ณตํต์ผ๋ก ๋ณด์ด๊ฒ ๋๋ค.
๊ทธ๋ค์ 3๊ฐ์ ํ์ด์ง๋ฅผ ํด๋น ๊ฒฝ๋ก์ ๋ง๋ค์ด์ฃผ์๋ค.
- src/app/champions/page.tsx
- src/app/items/page.tsx
- src/app/rotation/page.tsx
์์ฑ๋ณธ์ ์์ ๊ฐ๋ค.