Next App

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