**Next.js 13+ (app router 기반)**으로 구성된 AppBar, SideDrawer, Footer가 포함된 기본 블로그 레이아웃 구조 예제입니다. 이 구조는 app 디렉토리를 사용하는 최신 Next.js 스타일에 맞게 설계되어 있습니다.
✅ 폴더 구조 (app router 기반)
/app
├ layout.tsx # 전체 공통 레이아웃
├ page.tsx # 홈 페이지
└ /about
└ page.tsx # About 페이지
/components
├ AppBar.tsx
├ SideDrawer.tsx
└ Footer.tsx
/styles
└ globals.css✅ 1. app/layout.tsx
import './globals.css'
import AppBar from '@/components/AppBar'
import SideDrawer from '@/components/SideDrawer'
import Footer from '@/components/Footer'
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'My Blog',
description: 'A simple blog with Next.js App Router',
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className="flex flex-col min-h-screen">
<AppBar />
<div className="flex flex-1">
<SideDrawer />
<main className="flex-1 p-4">{children}</main>
</div>
<Footer />
</body>
</html>
)
}✅ 2. app/page.tsx
export default function Home() {
return (
<div>
<h1 className="text-2xl font-bold mb-4">Welcome to My Blog</h1>
<p>This is the homepage using the Next.js app directory.</p>
</div>
)
}✅ 3. app/about/page.tsx
export default function AboutPage() {
return (
<div>
<h1 className="text-xl font-bold mb-2">About</h1>
<p>This is the about page.</p>
</div>
)
}✅ 4. components/AppBar.tsx
export default function AppBar() {
return (
<header className="bg-blue-600 text-white p-4">
<h1 className="text-lg font-bold">My Blog</h1>
</header>
)
}✅ 5. components/SideDrawer.tsx
import Link from 'next/link'
export default function SideDrawer() {
return (
<aside className="hidden md:block w-64 bg-gray-100 p-4 border-r">
<nav className="space-y-2">
<Link href="/" className="block hover:text-blue-600">Home</Link>
<Link href="/about" className="block hover:text-blue-600">About</Link>
</nav>
</aside>
)
}✅ 6. components/Footer.tsx
export default function Footer() {
return (
<footer className="bg-gray-200 text-center py-3 text-sm text-gray-700">
© 2025 My Blog
</footer>
)
}✅ 7. styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind 설정이 아직 안 되어 있다면 tailwind.config.js, postcss.config.js 등을 함께 구성해드릴 수 있어요.
이제 npm run dev 혹은 yarn dev로 실행하면 App Router 방식의 기본 블로그 UI가 작동합니다.
'ChatGPT와 Next.js 공부' 카테고리의 다른 글
| Next.js 레이아웃에서 Side Drawer(사이드바)를 토글 (0) | 2025.05.13 |
|---|---|
| Next.js에서 AppBar, SideDrawer, Footer가 포함된 레이아웃 구현 (0) | 2025.05.12 |
| Next.js 프로젝트에서 app 폴더와 pages 폴더 차이는? (0) | 2025.05.12 |
| next.js 간단한 실행 예제 (0) | 2025.05.11 |
| Tailwind CSS IntelliSense (0) | 2025.05.11 |