Kickstart Next.js

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

• Deep-dive videos:
  • Live Preview internals
  • Modular Blocks usage
  • Rich Text rendering
• Documentation:
  • Contentstack Docs – Next.js Kickstart
  • Visual Builder Guide
• Community & Support:
  • Join our Discord community for real-time help and discussion.
  • Explore full courses on the Contentstack Academy.