Ch 03. 프로젝트 구조 파악하기 — 소설처럼 읽는 Next.js

프로젝트 폴더 전체 보기

create-next-app이 만들어준 프로젝트의 구조입니다.

my-blog/├── app/                    ← 페이지와 레이아웃│   ├── favicon.ico│   ├── globals.css│   ├── layout.tsx          ← 최상위 레이아웃│   └── page.tsx            ← 홈 페이지 (/)├── public/                 ← 정적 파일 (이미지, 폰트 등)├── .eslintrc.json          ← ESLint 설정├── .gitignore├── next.config.ts          ← Next.js 설정├── package.json├── postcss.config.mjs      ← TailwindCSS 설정├── tailwind.config.ts      ← TailwindCSS 커스터마이징└── tsconfig.json           ← TypeScript 설정

각 파일의 역할

app/ 폴더

Next.js App Router의 핵심 폴더입니다. 이 폴더 안의 파일 구조가 곧 URL 구조가 됩니다.

layout.tsx: 모든 페이지를 감싸는 공통 레이아웃. <html>, <body> 태그가 여기 있습니다.
page.tsx: 각 경로의 페이지 컴포넌트. app/page.tsx는 / 경로에 해당합니다.
globals.css: 전체 앱에 적용되는 CSS. TailwindCSS 기본 설정이 여기 있습니다.

public/ 폴더

이미지, 폰트, 파비콘 같은 정적 파일을 넣어둡니다. public/logo.png 파일은 브라우저에서 /logo.png로 접근할 수 있습니다.

next.config.ts

Next.js의 동작을 커스터마이징합니다. 외부 이미지 도메인 허용, 환경변수 설정 등을 여기서 합니다.

// next.config.tsimport type { NextConfig } from "next";const nextConfig: NextConfig = {  images: {    remotePatterns: [      {        protocol: "https",        hostname: "example.com",      },    ],  },};export default nextConfig;```text## layout.tsx 살펴보기`app/layout.tsx`는 Next.js 앱의 뼈대입니다.```tsx// app/layout.tsximport type { Metadata } from "next";import { Geist } from "next/font/google";import "./globals.css";const geist = Geist({ subsets: ["latin"] });export const metadata: Metadata = {  title: "My Blog",  description: "Next.js로 만든 블로그",};export default function RootLayout({  children,}: {  children: React.ReactNode;}) {  return (    <html lang="ko">      <body className={geist.className}>{children}</body>    </html>  );}

children은 각 페이지의 내용입니다. 사용자가 어떤 페이지를 방문하든, 그 페이지의 컴포넌트가 children 자리에 들어갑니다.

metadata는 <head> 태그의 <title>, <meta> 태그를 관리합니다. 각 페이지에서 덮어쓸 수도 있습니다.

다음 챕터에서는 TailwindCSS 설정을 완성합니다.