Kickstart Next.js

Kickstart Next.js

coding
8m 58s
Intermediate
Released: June 4, 2025
Overview

Kickstart Next.js: Code Overview

A lightweight Next.js boilerplate to get you up and running with Contentstack—complete with live preview, Visual Builder support, and essential content types.

Features

  • Barebones setup: Minimal code to connect a Next.js 15 app (using the App Router) to Contentstack.
  • Live Preview: Instantly preview content edits in-context.
  • Visual Builder: Click-to-edit UI overlays for titles, images, and rich text.
  • Modular Blocks: Demonstrates Contentstack’s block-based content modeling.
  • Rich Text & Images: Built-in support for rendering Contentstack rich text fields and media assets.
  • Tailwind CSS: Utility-first styling out of the box.

Prerequisites

  • Node.js >= 18
  • Next.js 15 (App directory)
  • A Contentstack account with:
    • Stack API Key
    • Delivery Token
    • Environment (“development”, “preview”, etc.)
    • Live Preview API Key
Read the docs for a deeper explanation: https://www.contentstack.com/docs/developers/kickstarts/next/

Extending the Kickstart

  1. Add Additional Content Types
    Copy the pattern in lib/contentstack.ts to initialize and query new types—e.g., blog_post, author.
  2. Modular Blocks
    Explore modular blocks in the “Modular Blocks” demo page; see our Modular Blocks Docs.
  3. Rich Text Customization
    Use the @contentstack/rich-text-react-renderer to map rich-text JSON to custom React components. See the other video in the Kickstart Learning path.
  4. Deployment
    Host on Content Launch, Vercel, Netlify, or your preferred platform. Ensure environment variables are set for API keys & tokens.

Next Steps & Resources

Open Feedback Modal