첫 Project

~20 min · create-next-app, project structure, Turbopack

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

CLI 가 주는 것

한 command 면 TypeScript, ESLint, Tailwind (선택), App Router, dev/prod 둘 다 Turbopack on 으로 작동하는 app 이 나와:

경로	역할
`app/layout.tsx`	필수 root layout. + 만드는 자리.
`app/page.tsx`	`/` route.
`app/globals.css`	Global style (Tailwind import 도 여기).
`public/`	Root 에서 서빙되는 static asset (`/favicon.ico` 등).
`next.config.ts`	Framework config — TypeScript 로 직접 씀.
`tsconfig.json`	`@/*` import alias 미리 설정된 TypeScript.

Skip 못 하는 root layout

Root layout 은 hard requirement: 과 render 해야 하고, 모든 route 를 wrap 해. Common pattern: 여기서 font load 하고 의 className 으로 적용.

Default 가 된 Turbopack

v16 부터 Turbopack 이 next dev 와 next build 둘 다 default. --turbopack 안 붙여도 돼. Webpack 대비 reported 수치: ~3.8× cold start, ~9× HMR, ~2.3× prod build. File-system cache 가 warm start 더 빨라지게 해.

Code

Bootstrap + run·bash

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

필수 root layout·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>
  );
}

next.config.ts 가 이제 TypeScript 네이티브·ts

import type { NextConfig } from 'next';

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

export default nextConfig;

External links

Exercise

새 project 만들고 두 번째 route 를 app/about/page.tsx 에 추가, root layout 에 top nav 넣어서 /about Link 박아. Turbopack HMR 이 page state 안 잃고 layout re-render 하는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousNext.js vs 대안 Next →퀴즈 · 4 questions

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.