framework

Cấu hình Next.js, Tailwind v4, PostCSS, package scripts và tối ưu hóa hình ảnh cho 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.

Thêm skills từ contentstack

cms-assets
contentstack
Hướng dẫn các nhà phát triển cách tổ chức, phân phối và chuyển đổi tài nguyên trong Contentstack. Bao gồm cấu trúc thư mục, các phép chuyển đổi của Image Delivery API, xuất bản…
cms-branches-aliases
contentstack
Tư vấn cho nhà phát triển về cách sử dụng Contentstack branches để phát triển nội dung độc lập và aliases để triển khai nội dung không gián đoạn. Bao gồm chiến lược branch,…
cms-data-modeling-best-practices
contentstack
Hướng dẫn các nhà phát triển mô hình hóa nội dung trong Contentstack bằng cấu trúc tái sử dụng đơn giản nhất. Kỹ năng này giải thích khi nào nên sử dụng loại nội dung, tham chiếu, toàn cục…
cms-live-preview-visual-builder-support-assistant
contentstack
Chẩn đoán và hướng dẫn triển khai Contentstack Live Preview và Visual Builder. Theo dõi ngữ cảnh xem trước, xác định hợp đồng bị hỏng, và đề xuất…
cms-releases
contentstack
Tư vấn cho nhà phát triển về cách sử dụng Contentstack Releases để triển khai nội dung đồng bộ và nguyên tử. Bao gồm tạo bản phát hành, quản lý mục, triển khai theo giai đoạn,…
cms-roles-permissions
contentstack
Tư vấn cho các nhà phát triển về việc thiết kế vai trò, quyền hạn, nhóm và quyền truy cập token trong Contentstack. Giải thích vai trò tích hợp sẵn, vai trò tùy chỉnh, việc hợp nhất quyền hạn,…
cms-taxonomy
contentstack
Tư vấn cho nhà phát triển về cách sử dụng Contentstack Taxonomy để phân loại nội dung có cấu trúc, phân cấp và lọc phía phân phối. Bao gồm sự khác biệt giữa taxonomy và tags,…
cms-tokens-authentication
contentstack
Tư vấn cho nhà phát triển cách chọn phương thức xác thực Contentstack và loại token phù hợp cho các trường hợp sử dụng frontend, backend, tự động hóa và ứng dụng bên thứ ba.…