framework

작성자: contentstack

Next.js, Tailwind v4, PostCSS, 패키지 스크립트, 그리고 kickstart-next를 위한 이미지 최적화 구성입니다.

npx skills add https://github.com/contentstack/kickstart-next --skill framework

Framework – kickstart-next

When to use

  • You are changing Next.js configuration, Tailwind/PostCSS pipeline, or root dependency versions.
  • You need to allow new remote image hostnames for next/image.
  • You are adjusting npm scripts or verifying how production builds are produced.

Instructions

Package scripts and dependencies

  • package.json defines:
    • dev: next dev
    • build: next build
    • start: next start
    • lint: eslint .
  • Major runtime deps: Next.js 16, React 19, @contentstack/delivery-sdk, @contentstack/live-preview-utils, @timbenniks/contentstack-endpoints, isomorphic-dompurify.
  • Styling/tooling: Tailwind CSS 4, @tailwindcss/postcss, TypeScript 5, ESLint 9, eslint-config-next 16.

Next.js config

  • next.config.mjs sets images.remotePatterns:
    • If NEXT_PUBLIC_CONTENTSTACK_IMAGE_HOSTNAME is set, a single pattern uses that hostname.
    • Otherwise: images.contentstack.io and *-images.contentstack.com (wildcard subdomain).
  • Any new CDN or asset hostname used with next/image must be added here (or supplied via the env hostname above).

PostCSS and Tailwind

  • postcss.config.mjs registers the @tailwindcss/postcss plugin (Tailwind v4 pipeline).
  • app/globals.css uses @import "tailwindcss" and an @layer base block documenting Tailwind v4 border defaults and global body / a rules. New global styles should stay consistent with this setup.

Build and runtime

  • Standard Node/Next: npm run build produces the Next production bundle; npm run start serves it. There are no custom native binaries or non-npm packaging steps in this repo.

contentstack의 다른 스킬

cms-assets
contentstack
개발자에게 Contentstack에서 자산을 구성, 전달, 변환하는 방법에 대해 조언합니다. 폴더 구조, Image Delivery API 변환, 게시를 다룹니다...
cms-branches-aliases
contentstack
개발자에게 콘텐츠 개발 격리를 위한 Contentstack 브랜치와 무중단 콘텐츠 배포를 위한 별칭 사용에 대해 조언합니다. 브랜치 전략, …
cms-data-modeling-best-practices
contentstack
개발자들이 Contentstack에서 가장 간단하고 재사용 가능한 구조로 콘텐츠를 모델링하도록 안내합니다. 이 스킬은 콘텐츠 유형, 참조, 전역 필드를 언제 사용해야 하는지 설명합니다.
cms-live-preview-visual-builder-support-assistant
contentstack
Contentstack Live Preview 및 Visual Builder 구현을 진단하고 안내합니다. 미리보기 컨텍스트를 추적하고, 손상된 계약을 식별하며, 다음을 권장합니다…
cms-releases
contentstack
개발자들이 Contentstack Releases를 사용하여 조정되고 원자적인 콘텐츠 배포를 수행하는 방법에 대해 조언합니다. 릴리스 생성, 항목 관리, 단계적 배포 등을 다룹니다. …
cms-roles-permissions
contentstack
개발자들에게 Contentstack에서 역할, 권한, 팀, 토큰 액세스를 설계하는 방법을 조언합니다. 기본 제공 역할, 사용자 지정 역할, 권한 병합 등을 설명합니다.
cms-taxonomy
contentstack
개발자들에게 Contentstack Taxonomy를 구조화되고 계층적인 콘텐츠 분류 및 전달 측 필터링에 사용하는 방법에 대해 조언합니다. 분류 체계와 태그의 차이 등을 다룹니다…
cms-tokens-authentication
contentstack
개발자에게 프론트엔드, 백엔드, 자동화, 타사 앱 사용 사례에 적합한 Contentstack 인증 방법과 토큰 유형 선택에 대해 조언합니다.…