framework

Cấu hình Next.js, Tailwind v4, PostCSS, package scripts và tối ưu hóa hình ảnh cho 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.

Thêm skills từ contentstack

brand-kit-assistant
contentstack
Advise users on Contentstack Brand Kit concepts, setup, governance, and on-brand AI generation. Route API-specific tasks to the right Brand Kit capability or…
official
cms-assets
contentstack
Hướng dẫn các nhà phát triển cách tổ chức, phân phối và chuyển đổi tài nguyên trong Contentstack. Bao gồm cấu trúc thư mục, các phép chuyển đổi của Image Delivery API, xuất bản…
official
cms-branches-aliases
contentstack
Advise developers on using Contentstack branches for isolated content development and aliases for zero-downtime content deployments. Cover branch strategy,…
official
cms-data-modeling-best-practices
contentstack
Guide developers to model content in Contentstack using the simplest reusable structure. The skill explains when to use content types, references, global…
official
cms-entries
contentstack
Advise developers on querying, localizing, versioning, publishing, and structuring Contentstack entries for efficient delivery. Focus on CDA usage, reference…
official
cms-environments-publishing
contentstack
Advise developers on configuring environments, publishing content, using delivery and preview tokens, leveraging the Sync API, and understanding CDN and…
official
cms-live-preview-visual-builder-support-assistant
contentstack
Diagnose and guide Contentstack Live Preview and Visual Builder implementations. Trace preview context, identify the broken contract, and recommend the…
official
cms-localization
contentstack
Tư vấn cho nhà phát triển về bản địa hóa Contentstack: thiết lập ngôn ngữ, chuỗi dự phòng, mục nhập đã bản địa hóa và chưa bản địa hóa, trường không thể bản địa hóa, và đa ngôn ngữ…
official