Loading…
PayloadCMS + Next.js 15로 회사 홈페이지 만들기
글 22개
기술블로그PayloadCMS 3.x와 Next.js 15 App Router로 회사 홈페이지를 처음부터 구축한 과정. 디자인 토큰 설정부터 블록 기반 페이지 빌더까지, 초기 아키텍처 결정이 왜 중요한지 정리했다.
기술블로그PayloadCMS + Next.js 15 프로젝트를 멀티스테이지 Docker 빌드로 경량화하고, Kubernetes 매니페스트를 작성해 홈랩 클러스터에 올린 과정을 정리했습니다. standalone 모드의 장점과 Health Check 연동까지 다룹니다.
기술블로그GitHub Actions처럼 쓰려고 했던 Gitea Actions. DinD 환경에서 표준 액션이 전부 안 먹히는 바람에 7번의 커밋 끝에 파이프라인을 완성한 과정을 정리했다.
기술블로그로컬에서 잘 돌아가던 Next.js 15 + PayloadCMS 프로젝트가 Docker 빌드에서 7개의 에러를 연쇄적으로 터뜨렸다. ESM/CJS 충돌부터 React 19 breaking change, DB 없는 빌드 환경 대응까지 하나씩 해결한 과정을 정리한다.
기술블로그앱 코드에 K8s 매니페스트가 섞여 있던 구조를 GitOps로 분리하고, Staging에서 검증된 이미지를 Production으로 프로모션하는 워크플로우를 만든 과정. 태그 자동 해석과 멱등성 보장까지.
기술블로그무색 홈페이지를 미니멀에서 안티브루탈리즘으로 전면 리뉴얼한 과정. 디자인 토큰만 잘 분리해두면 색상 5개, 폰트 3종 교체로 사이트 전체 분위기가 바뀐다.
기술블로그PayloadCMS에 MCP 플러그인을 붙여서 AI 에이전트가 블로그 글을 자동으로 작성하고 저장하는 파이프라인을 만들었다. n8n 웹훅으로 발행 알림까지 자동화한 과정을 정리했다.
기술블로그PayloadCMS 3.x의 Lexical 에디터에 코드 블록과 Live Preview를 추가하면서 겪은 삽질을 정리했다. 커스텀 Feature 하나 넣으려면 서버, 클라이언트, import map, 시리얼라이저까지 4개 레이어를 전부 건드려야 한다.
기술블로그Gitea Actions 워크플로우, Dockerfile, .dockerignore 세 곳을 동시에 손봐서 빌드 시간을 줄인 과정. Docker 레이어 캐시부터 BuildKit 마운트 캐시, 병렬 push까지 4개 커밋에 걸친 점진적 최적화 기록이다.
기술블로그린트 에러를 CI에서 발견하고 수정해서 다시 푸시하는 삽질, 이제 그만하고 싶었다. husky와 lint-staged로 커밋 시점에 자동 검증하는 Git 훅을 붙인 이야기.
기술블로그PayloadCMS에 Series 컬렉션을 추가하고, relationship 필드로 포스트와 연결하고, 탭 필터링 UI로 시리즈별 콘텐츠 탐색을 구현한 과정.
기술블로그SEO 제로 상태에서 robots.ts, 동적 sitemap, generateMetadata, JSON-LD까지 하루 만에 구현한 과정. Next.js 메타데이터 API의 실전 활용기.
기술블로그PayloadCMS 3.77이 요구하는 Next.js 16 업그레이드에 맞춰 Tailwind v4 CSS-first 전환, React Compiler 활성화까지 하루 만에 동시 진행한 실전 기록.
기술블로그K8s 롤링 업데이트 중 Version Skew, PID 1 시그널 누락, public/ 미포함 같은 Next.js 셀프호스팅의 실전 함정들과 해결책을 정리했다.
기술블로그Cache Components → useCache → ISR. Next.js 16의 새 캐싱 메커니즘을 세 번 시도하고 두 번 실패한 뒤, 결국 ISR로 돌아온 하루 12커밋 삽질기.
기술블로그/blog 하나에 섞여 있던 콘텐츠를 /tech-blog, /essay, /research로 분리하면서 파일 29개를 수정한 대수술 기록. 공통 컴포넌트 추출, warm-cache, 대규모 작업 흐름.
기술블로그Next.js 16 canary에서 ISR 페이지를 배포하다 발견한 세 가지 문서에 없는 함정. searchParams와 revalidate 충돌, 리다이렉트 라우트의 loading.tsx 문제, NextResponse.json 호환성 이슈를 정리했다.
에세이안티브루탈리즘 디자인이 '음성 AI 연구 회사'라는 정체성과 맞지 않았다. 미니멀 디자인으로 전면 전환하고, Canvas API로 음성 파형 히어로 배경을 만든 과정과 32개 파일 수정의 교훈.
기술블로그Mermaid 다이어그램 렌더링, FAQ 구조화 데이터, OG 이미지 치수, Favicon, Cloudflare CDN 캐시까지. 하나씩은 작은 개선이지만 모이면 기술 블로그의 품질이 확 달라진다.
기술블로그revalidate = 60을 설정했는데 왜 모든 페이지가 fully dynamic일까? Google Search Console 색인 경고에서 시작된 디버깅이 Next.js 16 canary의 문서화되지 않은 ISR 조건을 밝혀냈다.
기술블로그Google Analytics 없이 웹 트래픽을 분석하고 싶었다. 셀프호스팅 Umami를 연동하다 Chrome의 Private Network Access 차단에 부딪혔고, Next.js rewrites로 프록시하는 방법으로 해결했다.
기술블로그AdSense "저가치 콘텐츠" 거부를 받았다. 진짜 원인은 콘텐츠가 아니라 sitemap이 5개 URL만 반환하고 있었던 것. 법적 페이지 추가, sitemap ISR 적용, About/Contact 페이지까지 — 사이트 완성도를 높인 기록.