Next.js 정적 사이트
사용 시점
랜딩 페이지, 기업 사이트, 캠페인 페이지, 포트폴리오 또는 블로그에 사용하세요. 결과물은 프론트엔드 전용이며, HTML/CSS/JS로 내보내져 Cloudflare Pages에 게시됩니다.
사용하지 마세요 로그인, 회원가입, 데이터베이스, 관리자 패널, 결제, 업로드 또는 자체 API가 필요한 경우. 이러한 경우 sistema-fullstack 스킬을 사용하세요.
프로젝트 생성
- 이름, 최종 도메인, 페이지 목적, 문의 양식 존재 여부를 확인합니다.
- 정적 사이트 저장소를 사용합니다:
git clone https://github.com/guibean/nextjs-template.git <slug>
cd <slug>
git remote remove origin
git remote add origin https://github.com/guibean/<slug>.git
.env.example에서.env.local을 생성하고NEXT_PUBLIC_SITE_URL, 이름, 저자, 이메일을 입력합니다.pnpm install,pnpm lint,pnpm typecheck,pnpm build를 실행합니다.- 그런 다음에야 콘텐츠를 변경합니다.
규칙
- 백엔드 종속성을 추가하지 마세요.
- 필요에 따라 shadcn 컴포넌트를 설치합니다:
pnpm exec shadcn add dialog
pnpm exec shadcn add @aceternity/spotlight
- Aceternity 블록의 경우 라이선스를 확인하고 컴포넌트가 필요한 경우에만
motion을 설치합니다. - 페이지당 하나의
h1과 heading 계층 구조를 유지합니다. - 모든 새 페이지는
createMetadata, 사이트맵 항목 및 탐색 가능한 링크가 필요합니다. sizes와pnpm images로 처리된 이미지와 함께next/image를 사용합니다.- 이 프로필에서는
output: "server", Server Actions 또는 Next API Routes를 사용하지 마세요. - 양식: Turnstile +
functions/api/contact.ts+ Resend를 유지합니다.
전달 전 체크리스트
references/seo-checklist.md를 읽고 다음을 확인합니다:
- metadata, canonical, Open Graph 및 robots
- 사이트맵에 모든 공개 페이지 포함
llms.txt업데이트됨assets/images/및public/images/에 이미지 생성됨- 하나의
h1, 대비, 가시적 포커스 및 키보드 탐색 - 외부 링크에 적절한
rel속성 pnpm lint,pnpm typecheck,pnpm build통과- Lighthouse 네 가지 카테고리에서 ≥ 95
- 양식/분석이 있는 경우 개인정보 보호정책 업데이트됨
Cloudflare Pages 배포
- Build command:
pnpm build - Output directory:
out - Node: 24
- 공개 변수는 빌드 시, 비밀 변수는 Functions에서 사용
NEXT_PUBLIC_SITE_URL,TURNSTILE_HOSTNAME,CONTACT_ALLOWED_ORIGIN에 도메인 구성