SkillsAdd

contentstack/kickstart-next-ssr · Archived

contentstack-kickstart

Use when changing Contentstack SDK usage, Live Preview, env configuration, or content queries in kickstart-next-ssr.

First seen Jul 16, 2026

Installation

$ npx skills add contentstack/kickstart-next-ssr --skill contentstack-kickstart
View on skills.sh ↗ GitHub repository ↗

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

dev-workflow Same source · more installs
contentstack/kickstart-next-ssr

Use when setting up the repo locally, running npm scripts, or understanding CI and contribution…

2 installs
code-review Same source · more installs
contentstack/kickstart-next-ssr

Use when preparing or reviewing a pull request for kickstart-next-ssr.

2 installs
typescript-style Same source
contentstack/kickstart-next-ssr

Use when editing TypeScript or React files and matching this repo’s compiler and ESLint convent…

1 installs
testing Same source
contentstack/kickstart-next-ssr

Use when verifying changes without an automated test suite, or planning how to test this kickst…

1 installs

Also in this package

Other skills from contentstack/kickstart-next-ssr.

npx skills add contentstack/kickstart-next-ssr
dev-workflow 2 code-review 2 typescript-style 1 testing 1 framework 1

Browse all from contentstack/kickstart-next-ssr

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

License LICENSE
Default branch main
Open issues 0
Status Archived

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,649 B
  • docs SUMMARY.md 146 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1 installs

SKILL.md

Contentstack kickstart – kickstart-next-ssr

When to use

  • Editing how the stack is created or how Live Preview is wired
  • Adding or changing content types, queries, or types for entries
  • Updating environment variable names or documentation

Instructions

Entry points in this repo

File Role
[lib/contentstack.ts](../../lib/contentstack.ts) getStack(), initLivePreview(), getPage() — core SDK and preview behavior
[app/page.tsx](../../app/page.tsx) Server page: reads Live Preview searchParams, applies livePreviewQuery, fetches page
[components/ContentstackLivePreview.tsx](../../components/ContentstackLivePreview.tsx) Client component: calls initLivePreview() when preview is enabled
[lib/types.ts](../../lib/types.ts) TypeScript shapes for Page and nested modular blocks (matches seeded content)
[app/layout.tsx](../../app/layout.tsx) Imports [app/globals.css](../../app/globals.css) and mounts <ContentstackLivePreview /> after {children}

Request isolation (getStack)

  • Always create a fresh stack per server request when handling delivery or preview on the server. See the comments in [lib/contentstack.ts](../../lib/contentstack.ts): a shared instance can leak Live Preview configuration across concurrent requests.
  • getPage(url, stackInstance?) accepts an optional stack so the caller can configure Live Preview on the same instance before fetching.

Live Preview (SSR)

  1. URL/query: Contentstack adds query parameters (e.g. livepreview, contenttypeuid, entryuid, preview_timestamp). [app/page.tsx](../../app/page.tsx) reads them from searchParams.
  2. Server: If live_preview is present, call stack.livePreviewQuery({ ... }) on the stack from getStack(), then pass that stack into getPage("/", stack).
  3. Client: [components/ContentstackLivePreview.tsx](../../components/ContentstackLivePreview.tsx) runs initLivePreview() inside useEffect when NEXTPUBLICCONTENTSTACK_PREVIEW === "true". That uses ssr: true and mode: "builder" in [lib/contentstack.ts](../../lib/contentstack.ts).

Content query

  • Default page fetch uses content type page, field url with QueryOperation.EQUALS, wired in [lib/contentstack.ts](../../lib/contentstack.ts).
  • When preview is enabled, contentstack.Utils.addEditableTags is applied to the entry for visual building.

Environment variables

Documented in [README.md](../../README.md). All are NEXTPUBLIC* in this template (browser-visible). Typical set:

  • NEXTPUBLICCONTENTSTACKAPIKEY
  • NEXTPUBLICCONTENTSTACKDELIVERYTOKEN
  • NEXTPUBLICCONTENTSTACKPREVIEWTOKEN
  • NEXTPUBLICCONTENTSTACK_REGION
  • NEXTPUBLICCONTENTSTACK_ENVIRONMENT
  • NEXTPUBLICCONTENTSTACK_PREVIEW

Optional overrides for hosts (used internally at Contentstack) appear in [lib/contentstack.ts](../../lib/contentstack.ts): NEXTPUBLICCONTENTSTACKCONTENTDELIVERY, NEXTPUBLICCONTENTSTACKPREVIEWHOST, NEXTPUBLICCONTENTSTACKCONTENTAPPLICATION, NEXTPUBLICCONTENTSTACKIMAGEHOSTNAME (see [next.config.mjs](../../next.config.mjs) for image host allowlist).

Dependencies

  • @contentstack/delivery-sdk — stack and queries
  • @contentstack/live-preview-utils — ContentstackLivePreview.init, types like IStackSdk
  • @timbenniks/contentstack-endpoints — region and endpoint resolution
  • isomorphic-dompurify — sanitization where used in UI