들어가기에 앞서
하단의 참고한 자료를 바탕으로 비전문가가 정리한 글이므로 오류가 있을 수 있습니다.
오류에 대한 피드백은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.
Page 생성과 Layout
Next.js에서는 두 가지 주요 라우팅 방식, 즉 App Router와 Pages Router를 제공합니다.
Page 생성
Next.js 13에서 도입된 App Router 방식에서는 app 폴더의 하위 폴더 이름을 라우트로 정의합니다. 아래는 예시 구조입니다.
app/
├── layout.tsx
├── page.tsx
├── about/
│ ├── layout.tsx
│ └── page.tsx
└── blog/
└── [id]/
└── page.tsx
components/
Plain Text
복사
이 폴더 구조에서는 app/about 하위 폴더에 page.tsx 파일을 추가하면 localhost:3000/about 페이지가 생성됩니다. app 폴더 내의 하위 폴더와 page, layout 파일은 Next.js에서 특별 취급을 받아 각각의 라우트로 매핑됩니다.
Pages Router 방식에서 pages 디렉토리 내부의 파일들이 자동으로 라우트로 매핑됩니다. 다만 App Router 방식과는 달리 파일 기반 라우팅을 사용합니다. 예를 들어, pages/index.tsx는 / 경로로, pages/about.tsx는 /about 경로로 매핑됩니다.
pages/
├── index.tsx
├── about.tsx
└── blog/
└── [id].tsx
Plain Text
복사
Layout
레이아웃 설정에서도 두 라우팅 방식 간에 차이점이 있습니다.
App Router 방식의 경우, 각 폴더에 layout.js(tsx) 파일을 추가하여 해당 폴더 내 모든 페이지에 적용할 레이아웃을 정의할 수 있습니다. 또한, 레이아웃을 중첩하여 사용할 수 있어, 더 복잡하고 유연한 페이지 구조를 만들 수 있습니다.
import type { Metadata } from "next";
import "./globals.css";
import MainHeader from "@/components/main-header/main-header";
export const metadata: Metadata = {
title: "NextLevel Food",
description: "Delicious meals, shared by a food-loving community.",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<MainHeader />
{children}
</body>
</html>
);
}
TypeScript
복사
위 코드는 app/layout.tsx에 작성한 코드로, 최상위 레이아웃으로서 모든 페이지에 공통으로 적용됩니다. head 태그가 없는 이유는 Next.js가 이면에서 해당 태그를 자동으로 처리하기 때문입니다. metadata 상수를 사용하여 레이아웃이나 페이지의 head 태그에 필요한 메타데이터를 자동으로 반영할 수 있습니다.
Pages Router 방식에서는 중첩 레이아웃을 구현하기 어렵습니다. 이 방식에서는 모든 페이지에 공통으로 적용될 레이아웃을 설정하기 위해 _app.js(tsx) 파일을 사용합니다. 이는 전체 애플리케이션에 하나의 공통 레이아웃을 정의하는 데는 적합하지만, App Router 방식처럼 각 폴더별로 중첩 레이아웃을 구현하는 것은 불가능합니다.
또한, Pages Router 방식에서는 _document.js(tsx) 파일을 사용하여 HTML 문서의 구조를 커스터마이징할 수 있습니다. 이 파일은 주로 HTML, head, body 태그 등을 설정하고, 전역 스타일 시트 또는 스크립트를 추가하며, 메타 태그를 설정하는 데 사용됩니다.
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Shell
복사
이와 같이 Next.js의 두 가지 라우팅 방식은 페이지와 레이아웃을 설정하는 데 있어 각기 다른 접근 방식을 취합니다. 프로젝트의 요구 사항과 복잡도에 따라 적합한 라우팅 방식을 선택할 수 있습니다. App Router는 중첩 레이아웃과 복잡한 페이지 구조를 쉽게 관리할 수 있도록 도와주며, Pages Router는 간단한 파일 기반 라우팅을 제공합니다.
