Next.js app – kickstart-next
When to use
- You are adding or changing routes, layouts, or UI components.
- You are deciding client vs server components or how preview mode loads data.
Instructions
App Router
- app/layout.tsx is the root layout; app/page.tsx is the home route.
- app/page.tsx is an async Server Component when not in preview: it calls
getPage("/") and passes the result to the default import from @/components/Page.
Preview path (client)
- components/Preview.tsx is a Client Component (
"use client"). It initializes live preview in useEffect, subscribes to ContentstackLivePreview.onEntryChange, and refetches via getPage(path) when the URL path changes.
Page UI component
- components/Page.tsx default export is imported elsewhere as
Page (import Page from "@/components/Page"). The function implementing it is named ContentDisplay inside the file; treat the public name as Page when wiring props.
- It renders title, description,
next/image for assets, sanitized rich HTML via isomorphic-dompurify and dangerouslySetInnerHTML, and modular blocks with VB_EmptyBlockParentClass for empty Visual Builder state.
- Spread
page?.$ / block $ attributes onto DOM nodes so Live Preview can bind fields.
Images
- Use
next/image for remote images. Remote hostnames must stay allowed in next.config.mjs (images.remotePatterns and optional env hostname).
Imports
- Path alias
@/* maps to the repo root per tsconfig.json (e.g. @/lib/contentstack, @/components/Page).
