Next.js app/layout.tsx는 모든 페이지에서 공통으로 쓰이는 레이아웃
layout.tsx
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
// function RootLayout() 함수이름이 컴포넌트이름
// {children} props로 들어오는 자식 컴포넌트
// return jsx를 반환
// TypeScript에서는 props 타입 정의 ({ children: React.ReactNode }) 가능
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang='ko'>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-black text-white`}
>
{/* 헤더 */}
<header className='fixed top-0 left-0 w-full bg-black shadow z-50'>
<nav className='max-w-4xl mx-auto px-4 py-3 flex justify-between'>
<span className='font-bold'>SUJINJEONG PORTPOLIO</span>
<ul className='flex gap-4'>
<li>
<a href='/'>홈</a>
</li>
<li>
<a href='/about'>About</a>
</li>
<li>
<a href='/projects'>projects</a>
</li>
<li>
<a href='/contact'>contact</a>
</li>
</ul>
</nav>
</header>
{/* 본문 (헤더 높이만큼 여백 줘야 함) */}
<main className='pt-16'>{children}</main>
{/* 푸터 */}
<footer className='fixed bottom-0 left-0 w-full bg-black-200 text-center py-3 shadow'>
© 2025 내 사이트
</footer>
</body>
</html>
);
}
page.tsx
import Link from "next/link";
export default function Home() {
return (
<main className='flex flex-col items-center justify-center min-h-screen p-6'>
<h1 className='text-4xl font-bold'>안녕하세요, 제 포트폴리오입니다!</h1>
<p className='mt-4 text-lg text-gray-600'>
Next.js + TailwindCSS로 만든 개인 사이트 🚀
</p>
<Link
href='/about'
className='mt-6 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600'
>
About
</Link>
</main>
);
}
app/about/page.tsx
export default function About() {
return (
<main className='p-6'>
<h1 className='text-3xl font-semibold'>About Me</h1>
<p className='mt-2 text-gray-700'>
저는 프론트엔드 개발자 입문자입니다~~~✨
</p>
</main>
);
}
이렇게 하고 디렉토리에서 http://localhost:3000/about 들어가면
화면이 이렇게 나온당!
그럼 헤더부분은 분리랑, 링크 Link넣어서 이동되는지 확인!
기록하기