framework

Next.js, Tailwind v4, PostCSS, scripts de package et configuration d'optimisation d'images pour 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.

Plus de skills de contentstack

cms-assets
contentstack
Conseiller les développeurs sur l'organisation, la livraison et la transformation des assets dans Contentstack. Couvrir la structure des dossiers, les transformations de l'API de livraison d'images, la publication…
cms-branches-aliases
contentstack
Conseiller les développeurs sur l'utilisation des branches Contentstack pour le développement de contenu isolé et des alias pour des déploiements de contenu sans temps d'arrêt. Couvrir la stratégie de branche,…
cms-data-modeling-best-practices
contentstack
Guidez les développeurs pour modéliser le contenu dans Contentstack en utilisant la structure réutilisable la plus simple. La compétence explique quand utiliser les types de contenu, les références, les éléments globaux…
cms-live-preview-visual-builder-support-assistant
contentstack
Diagnostiquer et guider les implémentations de Contentstack Live Preview et Visual Builder. Retracer le contexte d'aperçu, identifier le contrat rompu et recommander le…
cms-releases
contentstack
Conseiller les développeurs sur l'utilisation de Contentstack Releases pour un déploiement coordonné et atomique de contenu. Couvrir la création de releases, la gestion des éléments, le déploiement par étapes,…
cms-roles-permissions
contentstack
Conseiller les développeurs sur la conception des rôles, des permissions, des équipes et de l'accès par jeton dans Contentstack. Expliquer les rôles intégrés, les rôles personnalisés, la fusion des permissions,…
cms-taxonomy
contentstack
Conseiller les développeurs sur l'utilisation de Contentstack Taxonomy pour la classification structurée et hiérarchique du contenu et le filtrage côté livraison. Couvre la taxonomie par rapport aux balises,…
cms-tokens-authentication
contentstack
Conseiller les développeurs sur le choix de la méthode d'authentification Contentstack et du type de jeton adaptés aux cas d'utilisation frontend, backend, d'automatisation et d'applications tierces.…