Next.js: 환경 세팅 및 기초 (Step 1)

대상 버전: Next.js 14 / 15+ (App Router) 공식 문서: Next.js Documentation

1. Next.js 소개

Next.js 는 Vercel에서 만든 React 기반의 풀스택 프레임워크입니다. 파일 시스템 기반 라우팅과 강력한 렌더링 전략(SSR, SSG, ISR)을 제공합니다.

• App Router: 최신 Next.js 버전의 핵심인 새로운 라우팅 시스템입니다.
• 서버 컴포넌트: 서버에서 미리 렌더링하여 클라이언트에 보내는 고성능 컴포넌트입니다.

---

2. 프로젝트 시작하기 (npx)

가장 권장되는 프로젝트 시작 방식은 create-next-app입니다.

npx create-next-app@latest my-next-site

설치 옵션 (권장 사항):

• TypeScript: Yes (안정성 확보)
• ESLint: Yes
• Tailwind CSS: Yes (스타일링 생산성 극대화)
• App Router: Yes (최신 표준 권장)

---

3. 폴더 구조 파악

• app/: 모든 라우트(페이지)와 레이아웃이 위치하는 핵심 폴더.
• public/: 정적 이미지 및 자산이 위치하는 곳.
• next.config.js: 프레임워크 설정을 담당하는 파일.

---

4. 첫 번째 페이지 만들기 (page.tsx)

app/page.tsx 파일이 루트 경로(/)를 담당합니다.

export default function Home() {
  return (
    <main>
      <h1>Next.js 세계에 오신 것을 환영합니다!</h1>
      <p>App Router 기반의 고성능 앱을 구축해 보세요.</p>
    </main>
  );
}