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中設計角色、權限、團隊和Token存取權限的建議。解釋內建角色、自訂角色、權限合併等。
cms-taxonomy
contentstack
為開發人員提供關於使用 Contentstack Taxonomy 進行結構化、階層式內容分類及傳遞端篩選的建議。涵蓋 taxonomy 與 tags 的比較,…
cms-tokens-authentication
contentstack
為開發人員提供建議,協助他們為前端、後端、自動化及第三方應用程式使用情境選擇正確的Contentstack驗證方法與權杖類型。…