안녕하세요! 지난 1부에서 무사히 프로젝트 설치를 마치셨나요? 터미널에 뜬 하얀 글씨들을 보며 “이제 뭘 해야 하지?” 싶으셨을 텐데, 오늘부터 본격적으로 웹사이트의 모양새를 갖춰볼 테니 걱정 마세요.
오늘은 Next.js의 핵심 중의 핵심, App Router가 대체 뭔지 쉽게 알아보고 모든 페이지에 옷을 입혀줄 **공통 레이아웃(Layout)**을 직접 코딩해 보겠습니다. 주니어 개발자분들이 실무에서 가장 많이 만지게 될 부분이니 집중해서 따라와 주세요!
1. App Router, 어렵게 생각하지 마세요!
Next.js의 App Router는 쉽게 말해 **’폴더가 곧 주소’**가 되는 시스템입니다. 예를 들어 app 폴더 아래에 about이라는 폴더를 만들고 그 안에 page.tsx라는 파일을 만들면, 브라우저에서 내주소/about으로 바로 접속할 수 있게 됩니다. 정말 직관적이죠?
여러분의 VS Code 화면에서 꼭 확인해야 할 파일은 딱 3가지입니다.
- page.tsx: 실제 화면에 그려질 주인공입니다.
- layout.tsx: 이 페이지들을 감싸는 ‘공통 틀’입니다. 헤더나 푸터가 여기에 들어갑니다.
- not-found.tsx: 주소를 잘못 입력했을 때 “길을 잃으셨나요?”라고 알려주는 친절한 페이지입니다.
2. layout.tsx 은 왜 중요할까요?
여러분이 프로젝트를 열었을 때 app/layout.tsx 파일이 보인다면, 그게 바로 우리 웹사이트의 전체 뼈대입니다.
이 파일이 왜 고마운 존재냐면, 페이지를 이동할 때마다 매번 헤더나 푸터를 다시 그리지 않게 해주기 때문입니다. 덕분에 사용자는 끊김 없이 부드러운 웹사이트를 경험하게 되죠. 개발자의 작은 배려가 서비스의 퀄리티를 결정하는 지점입니다.
3. 실전 코딩: 나만의 공통 Layout (헤더와 푸터) 만들기
자, 이제 직접 코드를 수정해 볼 시간입니다. app/layout.tsx 파일을 열고 아래 코드를 참고해서 내용을 바꿔보세요. 주니어분들도 이해하기 쉽게 의미 있는 주석들을 달아두었습니다.
[app/layout.tsx 수정하기]
import "./globals.css";
// 우리 웹사이트의 이름과 설명을 적는 곳입니다 (SEO의 기본!)
export const metadata = {
title: "나만의 Next.js 웹사이트",
description: "차근차근 성장하는 개발자의 기록",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body className="flex flex-col min-h-screen">
{/* 공통 헤더: 서비스의 첫인상입니다 */}
<header className="p-4 bg-white border-b sticky top-0 z-50">
<nav className="max-w-5xl mx-auto flex justify-between items-center">
<h1 className="text-xl font-bold text-blue-600">MyDevBlog</h1>
<ul className="flex gap-4 text-sm font-medium text-gray-600">
<li className="hover:text-blue-500 cursor-pointer">홈</li>
<li className="hover:text-blue-500 cursor-pointer">소개</li>
<li className="hover:text-blue-500 cursor-pointer">프로젝트</li>
</ul>
</nav>
</header>
{/* 페이지 본문: 각 page.tsx의 내용이 여기에 들어옵니다 */}
<main className="flex-grow max-w-5xl mx-auto w-full p-6">
{children}
</main>
{/* 공통 푸터: 사이트의 마무리를 깔끔하게! */}
<footer className="p-8 bg-gray-50 border-t mt-12">
<div className="max-w-5xl mx-auto text-center text-gray-400 text-sm">
© 2026 MyDevBlog. 오늘보다 더 나은 내일의 개발자를 응원합니다.
</div>
</footer>
</body>
</html>
);
}
4. 알아두면 유용한 ‘한 끗’ 차이 팁
- Metadata의 힘:
title만 잘 적어도 구글 검색 결과가 달라집니다. 여러분의 이름을 넣어보세요! - Layout의 children:
{children}이라는 코드가 보이죠? 이건 각 페이지(page.tsx)에서 만든 내용이 헤더와 푸터 사이에 쏙 들어가도록 자리를 비워두는 역할을 합니다. - 푸터 고정하기: 본문 내용이 적으면 푸터가 화면 중간에 떠서 보기 싫을 때가 있죠?
flex flex-col min-h-screen설정을 쓰면 푸터가 항상 화면 맨 아래에 예쁘게 고정됩니다.
🔗 조금 더 깊게 알고 싶다면?
가장 정확한 공부는 공식 문서를 훑어보는 습관에서 시작됩니다.
마치며
오늘 우리는 웹사이트의 든든한 뼈대를 완성했습니다. 이제 어떤 페이지를 새로 만들어도 방금 우리가 공들여 만든 헤더와 푸터가 자동으로 따라붙을 거예요. 개발 효율이 확 올라가는 게 느껴지시나요?
다음 3부에서는 이 뼈대에 예쁜 색과 디자인을 입히는 [Tailwind CSS 실전 UI 컴포넌트] 편으로 돌아오겠습니다.
여러분의 코딩 여정을 진심으로 응원합니다. 궁금한 점이 생기면 언제든 고민하지 말고 다시 찾아주세요!
감사합니다.
다른 글도 함께 읽어보세요