framework

作者: contentstack

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.

来自 contentstack 的更多技能

brand-kit-assistant
contentstack
就Contentstack Brand Kit的概念、设置、治理及品牌化AI生成向用户提供建议。将API相关任务路由到正确的Brand Kit功能或…
official
cms-assets
contentstack
为开发人员提供关于在Contentstack中组织、交付和转换资产的建议。涵盖文件夹结构、Image Delivery API转换、发布……
official
cms-branches-aliases
contentstack
指导开发者使用Contentstack分支进行隔离的内容开发,并使用别名实现零停机的内容部署。涵盖分支策略、…
official
cms-data-modeling-best-practices
contentstack
指导开发者在Contentstack中使用最简单可复用的结构来建模内容。该技能解释了何时使用内容类型、引用、全局…
official
cms-entries
contentstack
为开发者提供关于查询、本地化、版本管理、发布和构建Contentstack条目的建议,以实现高效交付。重点关注CDA的使用、引用……
official
cms-environments-publishing
contentstack
为开发人员提供关于配置环境、发布内容、使用交付和预览令牌、利用Sync API以及了解CDN和…的建议
official
cms-live-preview-visual-builder-support-assistant
contentstack
诊断并指导Contentstack Live Preview和Visual Builder的实施。追踪预览上下文,识别损坏的契约,并推荐…
official
cms-localization
contentstack
Advise developers on Contentstack localization: language setup, fallback chains, localized vs unlocalized entries, non-localizable fields, and multi-locale…
official