#Next.js

17 편의 글

Next.js로 쇼핑몰 만들기 #5 주문 완료 페이지와 배포
7 분 소요

Next.js로 쇼핑몰 만들기 #5 주문 완료 페이지와 배포

주문 완료 페이지를 만들어 시리즈의 사용자 흐름을 닫고, Vercel 에 배포해 실제로 인터넷에 띄웁니다. 메모리 저장소의 한계와 실서비스로 가려면 손봐야 할 곳까지 짚으며 마무리합니다.

Next.js로 쇼핑몰 만들기 #4 체크아웃과 결제 시뮬레이션
7 분 소요

Next.js로 쇼핑몰 만들기 #4 체크아웃과 결제 시뮬레이션

Server Actions 로 주문을 생성하고, 가짜 결제 게이트웨이로 성공/실패를 시뮬레이션합니다. useActionState 와 useFormStatus 로 폼 상태를 다루는 실전 패턴까지 정리합니다.

Next.js로 쇼핑몰 만들기 #3 장바구니
7 분 소요

Next.js로 쇼핑몰 만들기 #3 장바구니

Client Context 와 localStorage 로 장바구니 상태를 관리합니다. 새로고침해도 유지되는 영속 카트, 수량 변경, 합계 계산, hydration 안전 패턴까지 정리합니다.

Next.js로 쇼핑몰 만들기 #2 상품 카탈로그
6 분 소요

Next.js로 쇼핑몰 만들기 #2 상품 카탈로그

Server Component로 상품 목록과 상세 페이지를 만들고, searchParams 로 카테고리 필터를 붙입니다. next/image, generateStaticParams, notFound 까지 한 번에 정리합니다.

Next.js로 쇼핑몰 만들기 #1 시작과 설계
8 분 소요

Next.js로 쇼핑몰 만들기 #1 시작과 설계

Next.js App Router로 쇼핑몰을 처음부터 만듭니다. 첫 글은 요구사항, 기술 결정, 라우트 구조, 상품 데이터 모델, 프로젝트 셋업까지 정리합니다.

도커 실전 강좌 #3 React/Next.js 빌드 컨테이너 — standalone과 NEXT_PUBLIC의 의미
8 분 소요

도커 실전 강좌 #3 React/Next.js 빌드 컨테이너 — standalone과 NEXT_PUBLIC의 의미

Next.js 앱을 컨테이너에 담는 흐름을 정리합니다. standalone output을 쓴 deps → build → runner 세 단계, NEXT_PUBLIC 환경변수가 빌드 시점에 굳는 문제, 정적 export 옵션, Vite 같은 SPA를 nginx로 호스팅하는 방식까지 살펴보겠습니다.

Next.js로 블로그 만들기 #5 SEO와 배포 (마무리)
8 분 소요

Next.js로 블로그 만들기 #5 SEO와 배포 (마무리)

metadata API로 검색 엔진 최적화를 하고, sitemap과 RSS를 만들고, Vercel에 배포해 실제로 인터넷에 띄웁니다. 시리즈와 리액트 콘텐츠 31편 전체 회고로 마무리합니다.

Next.js로 블로그 만들기 #4 댓글 (Server Actions)
8 분 소요

Next.js로 블로그 만들기 #4 댓글 (Server Actions)

글마다 댓글을 달 수 있게 합니다. Server Actions로 폼 제출과 검증을 처리하고, useActionState로 UX를 다듬는 패턴을 실전에 적용합니다.

Next.js로 블로그 만들기 #3 태그와 검색
7 분 소요

Next.js로 블로그 만들기 #3 태그와 검색

태그별 글 모음 페이지와 URL 쿼리 파라미터로 동작하는 검색 기능을 추가합니다. 동적 라우트의 두 가지 패턴(generateStaticParams vs searchParams)이 한 번에 등장합니다.

Next.js로 블로그 만들기 #2 글 목록과 상세 페이지
7 분 소요

Next.js로 블로그 만들기 #2 글 목록과 상세 페이지

Server Component에서 fs로 MDX 파일을 직접 읽고, 동적 라우트에서 본문을 컴파일해 화면에 그리는 핵심 흐름을 만듭니다.

Next.js로 블로그 만들기 #1 시작과 설계
7 분 소요

Next.js로 블로그 만들기 #1 시작과 설계

모던 리액트 시리즈에서 배운 Server Components와 Server Actions를 실전 프로젝트에 적용해봅니다. 첫 글은 요구사항, 데이터 모델, 폴더 구조, MDX 셋업까지 정리합니다.

모던 리액트 + Next.js #6 Server Actions와 폼 (마무리)
10 분 소요

모던 리액트 + Next.js #6 Server Actions와 폼 (마무리)

Server Actions로 폼 제출과 서버 데이터 변경을 단순하게 다루고, useActionState/useFormStatus로 UX를 다듬는 패턴, 그리고 시리즈 회고로 마무리합니다.