typescript-style

作者: contentstack

在編輯 TypeScript 或 React 檔案時使用,並符合此儲存庫的編譯器與 ESLint 慣例。

npx skills add https://github.com/contentstack/kickstart-next-ssr --skill typescript-style

TypeScript style – kickstart-next-ssr

When to use

  • Adding or changing .ts / .tsx files
  • Deciding server vs client components or public env usage
  • Aligning with ESLint rules for this project

Instructions

Compiler

  • tsconfig.json enables strict, noEmit, jsx: "react-jsx", moduleResolution: "bundler", and the Next.js TypeScript plugin.
  • Path alias: @/* maps to the repository root (e.g. @/lib/contentstack, @/components/ContentstackLivePreview).

React / Next.js boundaries

  • Server Components are the default. Use the "use client" directive only when you need hooks, browser APIs, or client-only SDK init—see components/ContentstackLivePreview.tsx.
  • Async server components are used in app/page.tsx (searchParams as a Promise per Next.js 16 patterns).

ESLint

  • .eslintrc.json extends next/core-web-vitals and next/typescript.
  • @typescript-eslint/no-explicit-any is off; prefer proper types from the SDK or lib/types.ts when practical.

Env types

  • Browser-exposed configuration uses NEXT_PUBLIC_* only. Do not assume secret server-only env vars exist unless you add them explicitly and document them.

來自 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驗證方法與權杖類型。…