첫 프로젝트 세우기

생성기가 만들어 주는 뼈대

create-next-app 한 번이면 TypeScript, ESLint, App Router와 개발 서버가 연결된 프로젝트가 생겨. 생성 뒤에는 파일을 무작정 지우기 전에 각 파일이 맡은 책임부터 확인해.

경로	책임
`app/layout.tsx`	모든 라우트를 감싸는 필수 루트 레이아웃
`app/page.tsx`	`/` 주소의 화면
`app/globals.css`	전역 스타일과 Tailwind 진입점
`public/`	루트 주소에서 제공할 정적 파일
`next.config.ts`	프레임워크 설정
`tsconfig.json`	TypeScript와 import alias 설정

루트 레이아웃은 생략할 수 없어

루트 레이아웃은 <html>과 <body>를 직접 그려야 해. 언어, 기본 글꼴, body 클래스, 전역 provider처럼 앱 전체가 상속할 것을 여기에 둬. 페이지마다 반복하면 나중에 바꿀 때 반드시 어긋나.

Turbopack은 이제 기본 경로야

Next.js 16에서는 next dev와 next build가 모두 Turbopack을 기본으로 사용해. 오래된 튜토리얼의 --turbopack 옵션은 더 이상 선택을 바꾸지 않아. 새 프로젝트가 느리다면 먼저 설정과 의존성을 보지, 옛 번들러로 되돌리는 것부터 시작하지 마.

첫날에 확인할 것

두 번째 라우트를 만들고, 루트 레이아웃에 공통 내비게이션을 둔 뒤, 파일을 저장했을 때 상태를 잃지 않고 갱신되는지 확인해. 생성 성공이 끝이 아니라, 관례가 실제로 어떻게 연결됐는지 눈으로 확인하는 데까지가 첫 프로젝트야.

생성 직후 기본 페이지를 꾸미기 전에 두 번째 라우트, 공통 레이아웃, 로딩 경계를 하나씩 만들어 봐. 파일을 옮길 때 URL이 어떻게 바뀌고, 레이아웃 상태가 어디까지 유지되며, Turbopack 갱신이 어떤 상태를 보존하는지 직접 확인해. 관례를 눈으로 검증하면 나중에 구조를 추측하지 않아.

생성기가 성공했다는 사실은 production 준비를 뜻하지 않아. 기본 메타데이터, 환경 변수 경계, 오류 화면, 배포 런타임은 아직 제품 결정으로 남아 있어. 반대로 첫날부터 모든 설정을 바꾸면 공식 기본값의 이점도 잃어. 실제 요구가 생길 때까지 기본값을 기준선으로 보존해. 새 프로젝트에서 /about과 느린 데이터 라우트를 만들고 layout·loading·error를 각각 실행해 봐. 개발 서버 갱신뿐 아니라 production build 결과에서 정적·동적 분류와 chunk를 확인하고, 첫 배포 URL에서 같은 행동이 이어지는 데까지가 생성기 검증이야.

Code

프로젝트 만들고 실행하기·bash

npx create-next-app@latest my-app
cd my-app
npm run dev

필수 루트 레이아웃·tsx

// app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: { template: '%s | My App', default: 'My App' },
  description: 'Built with Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

TypeScript를 바로 읽는 next.config.ts·ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: { reactCompiler: false },
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.example.com' },
    ],
  },
};

export default nextConfig;

생성기가 만들어 주는 뼈대

루트 레이아웃은 생략할 수 없어

Turbopack은 이제 기본 경로야

첫날에 확인할 것

Code

External links

Exercise

Progress

댓글 0