KainosPeople Archive
  • 인물
  • 인사이트
  • 프로젝트
  • 발견
  • 소개
인물인사이트프로젝트발견소개
AD
Kainos

시대를 초월한 거장들의 삶과 작품을 기록하고 탐구하는 인물 아카이브.

분야
화가 · Painters음악가 · Musicians과학자 · Scientists철학자 · Philosophers작가 · Writers감독 · Directors
콘텐츠
인사이트전체 인물프로젝트발견
Kainos
소개문의
© 2025 Kainos · People Archive. All rights reserved.
이용약관개인정보처리방침
Vibe Coding

Next.js

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

by Kainos·2026.04·7분 읽기

왜 Next.js인가?

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

route
파일 기반 라우팅
폴더 구조가 곧 URL. /about 폴더 만들면 /about 페이지 완성
search
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 메타태그 쉽게 설정

함께 사용하는 도구

CloudflareSupabaseClaude Code