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