Next.js 01: Next.js 16 소개와 핵심 개념

React만 사용할 때 직접 결정해야 하는 것들

✅ Next.js가 기본 제공하는 것

Next.js를 사용하는 대표 기업들

React Compiler란?

React Compiler(이전 이름: React Forget)는 컴포넌트를 자동으로 최적화합니다. 개발자가 useMemo, useCallback, React.memo를 직접 작성하지 않아도 컴파일러가 자동으로 메모이제이션을 적용합니다.

function ProductCard({ product }) {
  // 매번 새 객체 생성 → 리렌더링
  const formattedPrice = useMemo(
    () => formatPrice(product.price),
    [product.price]
  );
  
  const handleClick = useCallback(
    () => addToCart(product.id),
    [product.id]
  );
  
  return (
    <Card onClick={handleClick}>
      <p>{formattedPrice}</p>
    </Card>
  );
}

// React Compiler가 자동 최적화!
function ProductCard({ product }) {
  const formattedPrice = formatPrice(
    product.price
  );
  
  const handleClick = () => {
    addToCart(product.id);
  };
  
  return (
    <Card onClick={handleClick}>
      <p>{formattedPrice}</p>
    </Card>
  );
}

React Compiler 활성화 방법

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,  // React Compiler 활성화
  },
};

export default nextConfig;

View Transitions 예제

'use client';

import { useRouter } from 'next/navigation';
import { useTransition } from 'react';

export function ProductLink({ product }) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  
  const handleClick = () => {
    // View Transition으로 부드러운 페이지 전환
    startTransition(() => {
      router.push(`/products/${product.id}`);
    });
  };
  
  return (
    <div 
      onClick={handleClick}
      style={{ viewTransitionName: `product-${product.id}` }}
      className={isPending ? 'opacity-50' : ''}
    >
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
    </div>
  );
}

viewTransitionName을 설정하면 해당 요소가 페이지 전환 시 자연스럽게 애니메이션됩니다. 상품 목록에서 상세 페이지로 이동할 때 이미지가 부드럽게 확대되는 효과를 줄 수 있습니다.

Webpack vs Turbopack 성능 비교

Turbopack 사용 방법

# 개발 서버에서 Turbopack 사용 (Next.js 16 기본값)
npm run dev

# 명시적으로 Turbopack 사용
npm run dev -- --turbopack

# 프로덕션 빌드 (아직 Webpack 사용)
npm run build

Next.js 16에서는 개발 모드에서 Turbopack이 기본입니다. 프로덕션 빌드는 안정성을 위해 아직 Webpack을 사용합니다.

캐싱 기본값 변경

Next.js 16에서는 캐싱을 원하면 명시적으로 설정해야 합니다. 이로 인해 "왜 데이터가 안 바뀌지?" 같은 혼란이 줄어들었습니다.

명시적 캐싱 설정 예제

// 캐시하지 않음 (기본값)
const products = await fetch('https://api.shop.com/products');

// 영구 캐시 (정적 데이터)
const categories = await fetch('https://api.shop.com/categories', {
  cache: 'force-cache'
});

// 60초마다 재검증 (ISR)
const featuredProducts = await fetch('https://api.shop.com/featured', {
  next: { revalidate: 60 }
});

// 태그 기반 캐시 무효화
const product = await fetch(`https://api.shop.com/products/${id}`, {
  next: { tags: ['product', `product-${id}`] }
});

PPR 개념 이해

%%{init: {'theme': 'neutral'}}%%
flowchart TB
    subgraph Page["상품 상세 페이지"]
        subgraph Static["정적 (빌드 시 생성)"]
            A["상품 이미지, 이름, 설명<br/>(변하지 않는 정보)"]
        end
        subgraph Dynamic1["동적 (요청 시 렌더링)"]
            B["재고 현황: 12개 남음<br/>현재 가격: ₩29,900"]
        end
        subgraph Dynamic2["동적 (스트리밍)"]
            C["추천 상품 (개인화)"]
        end
    end
    Static --> Dynamic1 --> Dynamic2

정적 부분은 CDN에서 즉시 제공되고, 동적 부분은 서버에서 스트리밍됩니다. 사용자는 정적 콘텐츠를 먼저 보고, 동적 콘텐츠가 로드되는 것을 기다립니다.

PPR 활성화 및 사용

// next.config.ts
const nextConfig = {
  experimental: {
    ppr: true,  // PPR 활성화
  },
};

// app/products/[id]/page.tsx
import { Suspense } from 'react';

// 정적 부분
async function ProductInfo({ id }) {
  const product = await getProduct(id);  // 빌드 시 실행
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

// 동적 부분
async function StockStatus({ id }) {
  const stock = await getStock(id);  // 요청 시 실행
  return <p>재고: {stock.quantity}개</p>;
}

export default function ProductPage({ params }) {
  return (
    <div>
      {/* 정적: 즉시 표시 */}
      <ProductInfo id={params.id} />
      
      {/* 동적: 스트리밍 */}
      <Suspense fallback={<p>재고 확인 중...</p>}>
        <StockStatus id={params.id} />
      </Suspense>
    </div>
  );
}

두 라우터의 핵심 차이

이커머스 라우트 구조 예시

app/
├── layout.tsx              # 공통 헤더/푸터
├── page.tsx                # 홈페이지
│
├── (home)/                 # Route Group: 홈 관련
│   ├── layout.tsx          # 홈 전용 레이아웃
│   └── page.tsx
│
├── (shop)/                 # Route Group: 쇼핑 관련
│   ├── layout.tsx          # 사이드바 포함 레이아웃
│   ├── products/
│   │   ├── page.tsx        # 상품 목록 (SSG + ISR)
│   │   ├── loading.tsx     # 상품 로딩 스켈레톤
│   │   └── [id]/
│   │       ├── page.tsx    # 상품 상세 (PPR)
│   │       └── loading.tsx
│   └── categories/
│       └── [slug]/
│           └── page.tsx    # 카테고리별 상품
│
├── (purchase-flow)/        # Route Group: 구매 플로우
│   ├── layout.tsx          # 단순화된 레이아웃 (헤더만)
│   ├── cart/
│   │   └── page.tsx        # 장바구니 (CSR)
│   ├── checkout/
│   │   └── page.tsx        # 결제 (SSR)
│   └── order/
│       └── [id]/
│           └── page.tsx    # 주문 완료
│
└── api/                    # API Routes
    ├── products/
    │   └── route.ts
    └── cart/
        └── route.ts

my-shop/
├── app/                    # 🎯 App Router (핵심!)
│   ├── layout.tsx          # 루트 레이아웃
│   ├── page.tsx            # 홈페이지 (/)
│   ├── globals.css         # 전역 스타일
│   └── favicon.ico         # 파비콘
│
├── public/                 # 📁 정적 파일
│   ├── images/             # 이미지 파일
│   └── fonts/              # 폰트 파일
│
├── components/             # 🧩 재사용 컴포넌트 (선택)
│   ├── ui/                 # UI 컴포넌트
│   └── ...
│
├── lib/                    # 📚 유틸리티 함수 (선택)
│   └── utils.ts
│
├── next.config.ts          # ⚙️ Next.js 설정
├── package.json            # 📦 의존성
├── tsconfig.json           # 🔷 TypeScript 설정
├── tailwind.config.ts      # 🎨 Tailwind 설정 (선택)
└── postcss.config.mjs      # CSS 후처리 설정

app/ 내 특수 파일들

각 파일의 실제 예시

// 루트 레이아웃 - 모든 페이지에 적용
import { Inter } from 'next/font/google';
import './globals.css';

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

export const metadata = {
  title: 'My Shop',
  description: '최고의 쇼핑몰',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body className={inter.className}>
        <header>헤더</header>
        <main>{children}</main>
        <footer>푸터</footer>
      </body>
    </html>
  );
}

// 상품 목록 로딩 중 표시되는 스켈레톤 UI
export default function ProductsLoading() {
  return (
    <div className="grid grid-cols-4 gap-4">
      {[...Array(8)].map((_, i) => (
        <div key={i} className="animate-pulse">
          <div className="bg-gray-200 h-48 rounded-lg" />
          <div className="bg-gray-200 h-4 mt-2 rounded" />
          <div className="bg-gray-200 h-4 mt-1 w-1/2 rounded" />
        </div>
      ))}
    </div>
  );
}

'use client'; // 에러 컴포넌트는 Client Component여야 함

export default function ProductsError({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div className="text-center py-10">
      <h2>상품을 불러오는데 실패했습니다</h2>
      <p className="text-muted-foreground">{error.message}</p>
      <button onClick={reset} className="mt-4 btn">
        다시 시도
      </button>
    </div>
  );
}

폴더 구조 → URL 매핑

public/
├── images/
│   ├── logo.png          → /images/logo.png
│   └── products/
│       └── item1.jpg     → /images/products/item1.jpg
├── fonts/
│   └── custom.woff2      → /fonts/custom.woff2
├── favicon.ico           → /favicon.ico
└── robots.txt            → /robots.txt

주의: public/ 폴더의 파일은 빌드 시 최적화되지 않습니다. 이미지는 가능하면 next/image를 사용하세요.

실무에서 사용하는 확장된 구조

my-ecommerce/
├── app/                      # 라우팅 & 페이지
│   ├── (home)/
│   ├── (shop)/
│   │   ├── products/
│   │   └── categories/
│   ├── (purchase-flow)/
│   │   ├── cart/
│   │   ├── checkout/
│   │   └── order/
│   ├── api/
│   ├── layout.tsx
│   └── globals.css
│
├── components/               # 재사용 컴포넌트
│   ├── ui/                   # 기본 UI (Button, Card...)
│   ├── forms/                # 폼 컴포넌트
│   └── layouts/              # 레이아웃 컴포넌트
│
├── lib/                      # 유틸리티
│   ├── api/                  # API 클라이언트
│   ├── hooks/                # 커스텀 훅
│   ├── utils/                # 헬퍼 함수
│   └── validations/          # Zod 스키마
│
├── types/                    # TypeScript 타입
│   ├── product.ts
│   ├── cart.ts
│   └── order.ts
│
├── stores/                   # 상태 관리 (Zustand)
│   ├── cart-store.ts
│   └── user-store.ts
│
├── public/                   # 정적 파일
│   └── images/
│
└── 설정 파일들...

npx create-next-app@latest my-shop

# 설치 옵션
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a 'src/' directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for 'next dev'? … Yes

npm install -D prettier prettier-plugin-tailwindcss

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "plugins": ["prettier-plugin-tailwindcss"]
}

cd my-shop
npm run dev

# http://localhost:3000 에서 확인

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

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

export const metadata: Metadata = {
  title: 'MyShop - 온라인 쇼핑몰',
  description: '다양한 상품을 만나보세요',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body className={inter.className}>
        <header className="border-b">
          <div className="container mx-auto flex h-16 items-center px-4">
            <a href="/" className="text-xl font-bold">MyShop</a>
            <nav className="ml-auto flex gap-4">
              <a href="/products">상품</a>
              <a href="/cart">장바구니</a>
            </nav>
          </div>
        </header>
        <main className="container mx-auto px-4 py-8">
          {children}
        </main>
        <footer className="border-t py-6 text-center text-sm">
          © 2026 MyShop
        </footer>
      </body>
    </html>
  );
}

export interface Product {
  id: string;
  name: string;
  price: number;
  image: string;
  category: string;
}

// Server Component (기본값)
async function getProducts() {
  // 실제로는 API 호출
  return [
    { id: '1', name: '스마트폰', price: 990000, image: '/phone.jpg', category: '전자기기' },
    { id: '2', name: '노트북', price: 1500000, image: '/laptop.jpg', category: '전자기기' },
  ];
}

export default async function HomePage() {
  const products = await getProducts();

  return (
    <div>
      <h1 className="text-3xl font-bold mb-8">인기 상품</h1>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {products.map((product) => (
          <a
            key={product.id}
            href={`/products/${product.id}`}
            className="border rounded-lg p-4 hover:shadow-lg"
          >
            <img
              src={product.image}
              alt={product.name}
              className="w-full aspect-square object-cover rounded"
            />
            <h2 className="mt-2 font-medium">{product.name}</h2>
            <p className="text-lg font-bold">
              {product.price.toLocaleString()}원
            </p>
          </a>
        ))}
      </div>
    </div>
  );
}

1. 1

   create-next-app으로 새 프로젝트 생성하기

2. 2

   app/page.tsx 수정하여 자신만의 홈페이지 만들기

3. 3

   app/about/page.tsx 추가하여 라우팅 확인하기