framework

Next.js, Tailwind v4, PostCSS, package scripts, and image optimization configuration for 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.

Lebih banyak skill dari contentstack

brand-kit-assistant
contentstack
Memberikan saran kepada pengguna tentang konsep Contentstack Brand Kit, pengaturan, tata kelola, dan pembuatan konten AI sesuai merek. Mengarahkan tugas khusus API ke kemampuan Brand Kit yang tepat atau…
official
cms-assets
contentstack
Advise developers on organizing, delivering, and transforming assets in Contentstack. Cover folder structure, Image Delivery API transformations, publishing…
official
cms-branches-aliases
contentstack
Memberi saran kepada pengembang tentang penggunaan cabang Contentstack untuk pengembangan konten terisolasi dan alias untuk deployment konten tanpa downtime. Mencakup strategi cabang,…
official
cms-data-modeling-best-practices
contentstack
Pandu pengembang untuk memodelkan konten di Contentstack menggunakan struktur yang paling sederhana dan dapat digunakan kembali. Skill ini menjelaskan kapan menggunakan tipe konten, referensi, 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
Advise developers on Contentstack localization: language setup, fallback chains, localized vs unlocalized entries, non-localizable fields, and multi-locale…
official