# Kickstart Next.js

### About this export

| Field | Value |
| --- | --- |
| **content_type** | standalone_content |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/content/kickstart-nextjs |
| **slug** | kickstart-nextjs |
| **title** | Kickstart Next.js |
| **markdown_file_url** | /academy/md/content/kickstart-nextjs.md |
| **generated_at** | 2026-05-04T05:36:57.721Z |

> **Academy MD v3** — standalone Academy content entry (not a multi-lesson course export).

## Overview

### Description

## 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/](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](https://www.contentstack.com/docs/developers/create-content-types/modular-blocks).
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](https://www.contentstack.com/docs/developers/kickstarts/next)
    *   [Visual Builder Guide](https://www.contentstack.com/academy/content/contentstack-live-preview-under-the-hood)
*   **Community & Support**:
    *   Join our [Discord community](https://community.contentstack.com) for real-time help and discussion.
    *   Explore full courses on the Contentstack Academy.

## Supplement for indexing

### Content summary

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.conte

### Retrieval tags

- Contentstack Academy
- kickstart-nextjs
- standalone content

### Indexing notes

Single-page standalone entry; index as one primary chunk. Slug: kickstart-nextjs.

### Asset references

_No image or video thumbnail URLs were extracted._

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |
| https://www.contentstack.com/docs/developers/kickstarts/next/ | `https://www.contentstack.com/docs/developers/kickstarts/next/` |
| Modular Blocks Docs | `https://www.contentstack.com/docs/developers/create-content-types/modular-blocks` |
| Contentstack Docs – Next.js Kickstart | `https://www.contentstack.com/docs/developers/kickstarts/next` |
| Visual Builder Guide | `https://www.contentstack.com/academy/content/contentstack-live-preview-under-the-hood` |
| Discord community | `https://community.contentstack.com` |