Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 등 강력한 기능들을 제공하며, 특히
레이아웃 구성과 페이지 작성을 간편하게 만들 수 있는 구조를 가지고 있습니다.
이번 글에서는 App Router를 통해 중첩 라우팅과 중첩 레이아웃을 활용한 페이지 구성 방법을 알아보겠습니다.
1. App Router란?
Next.js 13+부터 도입된 App Router는 기존의 pages 디렉토리 대신, app 디렉토리를 사용하여 라우팅을 구성합니다. 이 새로운 라우팅 시스템은 파일 기반 라우팅을 유지하면서도 서버 컴포넌트와 클라이언트 컴포넌트를 쉽게 조합할 수 있게 해줍니다.
App Router의 특징
- 중첩 레이아웃(Nested Layout): 부모-자식 관계의 UI 구조를 효율적으로 정의 가능.
- 코드 스플리팅: 각 라우트는 독립적으로 로드되어 초기 로딩 속도를 최적화.
- 서버 컴포넌트 지원: 서버에서 데이터를 처리하고 컴포넌트를 렌더링 가능.
2. 중첩 레이아웃과 페이지 생성
중첩 레이아웃은 여러 페이지에서 공통적으로 사용하는 UI를 계층적으로 구성할 수 있는 강력한 방법입니다. 다음은 app 디렉토리 기반으로 중첩 레이아웃을 만드는 방법입니다.
2-1 기본 디렉토리 구조
app/
├── layout.js # 최상위 레이아웃
├── page.js # 루트 페이지
├── dashboard/
│ ├── layout.js # 대시보드 레이아웃
│ ├── page.js # 대시보드 기본 페이지
│ ├── customers/
│ │ ├── page.js # 대시보드 > customers 페이지
2-2 최상위 레이아웃 구성
app/layout.js 파일은 애플리케이션의 최상위 레이아웃을 정의합니다. 여기서 공통 UI 요소(예: 헤더, 네비게이션, 푸터)를 설정합니다.
//app/layout.js
import '@/app/ui/global.css'
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}( 위 코드는 지난번 예제에 사용한 코드입니다.)
2-3 중첩 레이아웃 추가
app/dashboard/layout.js 파일에서 대시보드 전용 레이아웃을 정의합니다. 이 레이아웃은 dashboard 경로와 그 하위 경로에만 적용됩니다.
//app/dashboard/layout.js
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}
2.4 페이지 작성
기본 페이지 작성
app/page.js는 루트 경로(/)에 해당하는 기본 페이지입니다.
//app/page.js
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css'
import { lusitana } from './ui/fonts';
import Image from 'next/image';
export default function Page() {
return (
<main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
<AcmeLogo />
</div>
<div className="mt-4 flex grow flex-col gap-4 md:flex-row">
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
<div className={styles.shape}></div>
{/* <div className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"/> */}
<p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
<strong>Welcome to Acme.</strong> This is the example for the{' '}
<a href="https://nextjs.org/learn/" className="text-blue-500">
Next.js Learn Course
</a>
, brought to you by Vercel.
</p>
<Link
href="/login"
className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
>
<span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
</Link>
</div>
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
{/* Add Hero Images Here */}
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className='hidden md:block'
alt= "Screenshots of the dashboard project showing desktop version"
/>
<Image
src="/hero-mobile.png"
width={560}
height={620}
className='block md:hidden'
alt= "Screenshots of the dashboard project showing desktop version"
/>
</div>
</div>
</main>
);
}
대시보드 페이지 작성
app/dashboard/page.js는 /dashboard 경로에 해당하는 페이지입니다.
//app/dashboard/page.js
export default function Page() {
return <p>Dashboard Page</p>;
}
대시보드 > customers 페이지 작성
app/dashboard/customers/page.js는 /dashboard/customers 경로에 해당하는 페이지입니다.
export default function Page(){
return <p>Customers Page</p>
}
결과 화면
3. 라우팅 구조 이해
위 코드를 통해 다음과 같은 중첩 라우팅이 동작합니다:
- /: 최상위 레이아웃(app/layout.js) + app/page.js
- /dashboard: 최상위 레이아웃 + 대시보드 레이아웃(app/dashboard/layout.js) + app/dashboard/page.js
- /dashboard/customers: 최상위 레이아웃 + 대시보드 레이아웃 + app/dashboard/customers/page.js
https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages
Learn Next.js: Creating Layouts and Pages | Next.js
Create the dashboard routes and a shared layout that can be shared between multiple pages.
nextjs.org
'Next.js' 카테고리의 다른 글
| [Next.js] Next.js 공식문서 6장 데이터베이스 설정 에러 해결 (1) | 2024.11.26 |
|---|---|
| [Next.js] Next.js 페이지 이동 구현하기 (Link, usePathName 사용 ) (0) | 2024.11.25 |
| [Next.js] Next.js 글꼴 및 이미지 적용하기 (0) | 2024.11.18 |
| [Next.js] Next.js CSS 스타일링 (0) | 2024.11.15 |
| [Next.js] Next.js 시작하기 ( ++ node 버전 이슈 해결 ) (4) | 2024.11.14 |
