Vibe Coding

Next.js

React로 웹사이트를 만드는 가장 쉬운 방법

by Kainos·2026.04·7분 읽기

왜 Next.js인가?

React만으로도 웹사이트를 만들 수 있지만, 라우팅, SEO, 빌드 설정 등 직접 해야 할 게 많습니다. Next.js는 이런 것들을 프레임워크 레벨에서 해결해줍니다.

route

파일 기반 라우팅

폴더 구조가 곧 URL. /about 폴더 만들면 /about 페이지 완성

SEO 최적화

정적 생성으로 검색엔진이 페이지 내용을 제대로 인식

image

이미지 최적화

next/image로 자동 리사이징, 지연 로딩, WebP 변환

bolt

빠른 개발

Hot Reload, TypeScript 기본 지원, 생산성 높은 DX

정적 빌드 (Static Export)

kainos.kr은 Next.js의 정적 빌드 기능을 사용합니다. 빌드 시점에 모든 페이지를 HTML로 생성해서 서버 없이 운영합니다.

next.config.ts

const nextConfig = {
  output: 'export',  // 정적 빌드
  images: {
    unoptimized: true  // 정적 빌드시 필요
  }
}

이렇게 하면 out/ 폴더에 순수 HTML/CSS/JS가 생성되고, 이걸 Cloudflare Pages에 업로드하면 끝입니다. 서버 비용 ₩0.

프로젝트 구조

kainos.kr 구조

src/app/
  layout.tsx          # 루트 레이아웃
  globals.css         # 전역 스타일
 
  (public)/           # 공개 사이트
    layout.tsx        # Header + Footer
    page.tsx          # 메인 페이지
    painters/         # 화가 120명
    musicians/        # 음악가 100명
    insights/         # 인사이트 아티클
    projects/         # 프로젝트 가이드
 
  (internal)/         # 비공개 앱

Route Groups (괄호 폴더)를 사용해서 공개 사이트와 비공개 앱을 분리합니다. 각각 다른 레이아웃, 다른 디자인 시스템을 적용할 수 있어요.

AI 코딩과의 궁합

Next.js는 바이브 코딩에 최적화된 프레임워크입니다. 파일 구조가 명확해서 AI가 어디에 코드를 작성해야 하는지 쉽게 파악합니다.

Claude에게 요청:
"/insights에 새 아티클 페이지 만들어줘"

Claude가 이해:
→ src/app/(public)/insights/[slug]/page.tsx 생성
→ 기존 패턴 따라 컴포넌트 구조 작성

함께 사용하는 기술

TypeScript

타입 안전성

Tailwind CSS

유틸리티 스타일링

next/font

폰트 최적화

next/image

이미지 최적화

비용

무료

MIT 라이선스 오픈소스

프레임워크 자체는 무료. 호스팅은 Cloudflare Pages(무료)에서. Vercel에 종속되지 않고 어디서든 배포 가능합니다.

팁

folder

App Router 사용

Pages Router 대신 App Router(app/) 권장. 최신 기능 지원

code

Server Component 활용

기본이 서버 컴포넌트. 클라이언트 필요할 때만 'use client'

description

Metadata API

각 페이지에 metadata export로 SEO 메타태그 쉽게 설정

함께 사용하는 도구

Cloudflare Supabase Claude Code

왜 Next.js인가?

route

파일 기반 라우팅

폴더 구조가 곧 URL. /about 폴더 만들면 /about 페이지 완성

SEO 최적화

정적 생성으로 검색엔진이 페이지 내용을 제대로 인식

image

이미지 최적화

next/image로 자동 리사이징, 지연 로딩, WebP 변환

bolt

빠른 개발

Hot Reload, TypeScript 기본 지원, 생산성 높은 DX

정적 빌드 (Static Export)

kainos.kr은 Next.js의 정적 빌드 기능을 사용합니다. 빌드 시점에 모든 페이지를 HTML로 생성해서 서버 없이 운영합니다.

next.config.ts

const nextConfig = {
  output: 'export',  // 정적 빌드
  images: {
    unoptimized: true  // 정적 빌드시 필요
  }
}

이렇게 하면 out/ 폴더에 순수 HTML/CSS/JS가 생성되고, 이걸 Cloudflare Pages에 업로드하면 끝입니다. 서버 비용 ₩0.

프로젝트 구조

kainos.kr 구조

src/app/
  layout.tsx          # 루트 레이아웃
  globals.css         # 전역 스타일
 
  (public)/           # 공개 사이트
    layout.tsx        # Header + Footer
    page.tsx          # 메인 페이지
    painters/         # 화가 120명
    musicians/        # 음악가 100명
    insights/         # 인사이트 아티클
    projects/         # 프로젝트 가이드
 
  (internal)/         # 비공개 앱

Route Groups (괄호 폴더)를 사용해서 공개 사이트와 비공개 앱을 분리합니다. 각각 다른 레이아웃, 다른 디자인 시스템을 적용할 수 있어요.

AI 코딩과의 궁합

Next.js는 바이브 코딩에 최적화된 프레임워크입니다. 파일 구조가 명확해서 AI가 어디에 코드를 작성해야 하는지 쉽게 파악합니다.