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認証方法とトークンタイプの選択について、開発者にアドバイスします。…