Next.js

Next.js는 React 기반의 프레임워크로, 현대 웹앱 및 쇼핑몰 개발에 최적화된 서버사이드 렌더링과 파일 기반 라우팅, API 라우트, 동적 데이터 처리 등 다양한 기능을 제공합니다.

Next.js 개요

Next.js는 React 애플리케이션의 파일 시스템을 기반한 app 디렉토리 구조(Next.js 13 이상)와 강력한 서버 렌더링, 정적 페이지 생성(SSG)·SSR·ISR 등을 지원하는 풀스택 프레임워크입니다. 쇼핑몰, 블로그, 대시보드 등 복잡한 웹서비스에 적합하도록 최적화되어 있습니다.^[2][10]

주요 특징 및 도입 이유

• 파일 기반 app 라우팅: /app 폴더 내의 파일 구조로 각 페이지와 라우트 자동 생성.^[10]
• 서버사이드 렌더링(SSR) 및 정적 페이지(SSG): 검색 최적화(SEO), 빠른 초기 로드에 강점.^[2][10]
• API 라우트 내장: /app/api 폴더에서 백엔드 API 엔드포인트 구축 가능.^[2]
• CSR, SSR, SSG, ISR 등 다양한 렌더링 방식 지원: 제품 상세, 주문 내역 등 요구에 맞게 선택 가능.^[10][2]
• 동적 라우팅: app/products/[id]/page.tsx 구조와 같이 파라미터 기반 동적 페이지 생성.^[4][2]
• React 생태계와 최적 통합: Redux, React Query, Zustand 등 상태관리와 손쉽게 연동.^[8][2]

단계별 예시: 쇼핑몰 구현 기본 흐름

1. 프로젝트 생성 및 기본 구조 세팅

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

• /app 내부에 page.tsx 추가로 라우트 생성, /app/products 디렉토리로 상품 목록 페이지 분리.^[10]

2. 상품 목록/상세 페이지 App 라우팅

상품 리스트 예시 (app/products/page.tsx)

import Link from 'next/link';

export default async function ProductsPage() {
  const products = await fetch('https://domain.com/api/products').then(res => res.json());

  return (
    <main>
      <h1>상품 목록</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <Link href={`/products/${product.id}`}>{product.title}</Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

• Next.js의 서버컴포넌트 기능을 활용.^[2][10]

상품 상세 예시 (app/products/[id]/page.tsx)

import { notFound } from 'next/navigation';

export default async function ProductDetailPage({ params }) {
  const product = await fetch(`https://domain.com/api/products/${params.id}`).then(res => res.json());
  if (!product) notFound();

  return (
    <main>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
      <p>가격: {product.price}원</p>
    </main>
  );
}

• 동적 라우팅을 통해 product id별 페이지 생성.^[4][2]

3. API 라우트 활용 (app/api/products/route.ts)

// app/api/products/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  // 실제 DB 연결/쿼리 대신 예시 데이터 반환
  return NextResponse.json([
    { id: 1, title: '상품 1', price: 12000 },
    { id: 2, title: '상품 2', price: 19000 }
  ]);
}

• Next.js 서버 내에서 독립적인 API 엔드포인트 제공. 프론트엔드와 백엔드를 자연스럽게 통합.^[4][2]

4. 상태관리 및 카트 기능 (React Context/Zustand 활용)

// app/_context/CartContext.tsx
import { createContext, useContext, useState } from 'react';

const CartContext = createContext();

export function CartProvider({ children }) {
  const [cart, setCart] = useState([]);
  const addToCart = item => setCart(c => [...c, item]);
  return (
    <CartContext.Provider value={{ cart, addToCart }}>
      {children}
    </CartContext.Provider>
  );
}
export const useCart = () => useContext(CartContext);

• app/layout.tsx에서 CartProvider로 전체 앱 감싸기.^[8][2]

5. 관리자 페이지/주문/회원 기능 등 확장

• /app/admin 디렉토리 및 라우트 파일 생성(상품 관리, 주문 관리 기능 구현)
• 인증 상태에 따른 미들웨어/route group 적용
• 결제, 주문 내역, 리뷰, 마이페이지 등 점진적 파일 추가로 자연스럽게 확장 구성.^[6]

전체 요약

Next.js(특히 13버전 이상)는 파일 기반 app 라우팅, SSR/SSG, 동적 라우팅, API 통합, React 상태관리 등 쇼핑몰 개발에 특화된 초현대적 기능을 제공합니다. app 폴더 내 라우팅과 API 경로, React Context·Zustand 등 유연한 상태관리로 대규모 쇼핑몰/마켓플레이스/관리자 시스템을 단계적으로 설계·구현할 수 있습니다. 확장성, 성능, 유지보수성 등에서 최신 전자상거래 프로젝트에 매우 적합합니다.^{[6][8][10][2]}