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 की और Skills

cms-assets
contentstack
डेवलपर्स को Contentstack में एसेट्स को व्यवस्थित करने, वितरित करने और बदलने के बारे में सलाह दें। फोल्डर संरचना, Image Delivery API ट्रांसफॉर्मेशन, प्रकाशन कवर करें...
cms-branches-aliases
contentstack
डेवलपर्स को Contentstack branches का उपयोग करके पृथक सामग्री विकास और aliases के लिए शून्य-डाउनटाइम सामग्री परिनियोजन पर सलाह दें। Branch रणनीति को कवर करें,…
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 का उपयोग करने पर सलाह दें। Taxonomy बनाम tags को कवर करता है,…
cms-tokens-authentication
contentstack
डेवलपर्स को फ्रंटएंड, बैकएंड, ऑटोमेशन और थर्ड-पार्टी ऐप उपयोग के मामलों के लिए सही Contentstack प्रमाणीकरण विधि और टोकन प्रकार चुनने पर सलाह दें।…