[Next.js 로 롤 정보 사이트 만들기] 프로젝트 생성 및 레이아웃 구성

티스토리 뷰

🔥 프로젝트

[Next.js 로 롤 정보 사이트 만들기] 프로젝트 생성 및 레이아웃 구성

developer jungminji 2024. 9. 25. 21:55

프로젝트 생성

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

완성본은 위와 같다.

'🔥 프로젝트' 카테고리의 다른 글

[Next.js 로 롤 정보 사이트 만들기] footer 위치 이슈 (1)	2024.10.05
[Next.js 로 롤 정보 사이트 만들기] API KEY 발급 후 환경변수 설정 (0)	2024.09.27
[💁🏻‍♀️ mbti 테스트 만들기] 토큰 만료 이슈... 😵‍💫 (1)	2024.09.11
[🏐 포켓몬 도감 만들기][개인] Context API 사용해서 리팩토링하기 (0)	2024.08.24
[🏐 포켓몬 도감 만들기][개인] 대시보드 렌더링 방법에 대한 고민 (2)	2024.08.24

최근에 올라온 글

Total

Today

Yesterday

링크

Minji Log

티스토리 뷰

[Next.js 로 롤 정보 사이트 만들기] 프로젝트 생성 및 레이아웃 구성

프로젝트 생성

레이아웃 설정

'🔥 프로젝트' 카테고리의 다른 글

티스토리툴바