#Pabal Web 템플릿

Pabal Web 정적 사이트 템플릿 사용 안내.

#개요

• Next.js 16 (App Router) 정적 사이트
• Node.js LTS 18+ 및 Yarn (yarn.lock 사용)
• 사용자 노출 데이터는 public/에 있으며, 앱 코드는 건드릴 일이 거의 없습니다

#템플릿 사용

1. GitHub 저장소 페이지에서 Use this template 클릭.
2. 새 저장소 이름을 입력하고 생성.
3. 생성된 저장소를 로컬로 클론.

#프로젝트 설정

1. 의존성 설치:

   yarn install
   

2. .env.local.example을 .env.local로 복사하고 값 설정:

   NEXT_PUBLIC_SITE_URL=http://localhost:3000
   GOOGLE_INDEXING_URL=https://labs.quartz.best
   NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=YOUR_GOOGLE_SITE_VERIFICATION_CODE_HERE
   

3. 예제 에셋 복사:

   cp -r examples/public/* public/
   

   • public/products/[slug]/에서 제품 에셋(설정, 로케일, 스크린샷, 아이콘)을 업데이트하세요.
   • public/site/에서 개발자/조직 정보를 업데이트하세요.
   • web:og-generate 스크립트가 OG 이미지를 자동 생성합니다.

4. MCP 설정(선택 사항이지만 권장):

   • Pabal MCP: Configure Credentials 가이드를 따라 인증을 설정하고, 기존 스토어 데이터가 있으면 apps-init를 실행하세요.
   • Pabal Web MCP: init-project를 실행해 공개 데이터를 자동 생성하세요.

#빌드 및 배포

• 정적 빌드(out/):

  yarn build
  

• 빌드 결과 로컬 미리보기:

  yarn start
  

• Vercel 배포: yarn build 결과가 out/인지 확인하고 NEXT_PUBLIC_SITE_URL을 설정하세요. 인덱싱이 필요하면 GOOGLE_INDEXING_URL을 추가하세요.
• 기타 정적 호스트(S3/CloudFront, Netlify 등): out/ 디렉터리를 업로드하세요.
• 배포 후 라우트 확인:
  • /{product}
  • /{product}/privacy-policy
  • /{product}/terms-of-use

#Google 사이트 인증

1. Google Search Console에서 인증 코드를 발급받습니다.
2. .env.local에 추가합니다:

   NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=your_verification_code_here
   

3. seo:index-google 스크립트가 이 값을 사용해 URL을 제출합니다.

#템플릿과 동기화

1. 템플릿 저장소를 upstream으로 추가(1회):

   git remote add upstream https://github.com/quartz-labs-dev/pabal-web.git
   

2. 업데이트 가져오기:

   git fetch upstream
   

3. 병합 또는 리베이스:

   git merge upstream/main --allow-unrelated-histories
   # 또는
   git rebase upstream/main --allow-unrelated-histories
   

4. origin에 푸시:

   git push origin main