Next.js Contentful Starter

Jumpstart your Next.js Contentful project with Next.js App Router, TypeScript and GraphQL.

Get Started

Why This Starterkit?

Building content websites with Next.js and Contentful can be simple, we've also learned it can become complex quite quickly. This starterkit simplifies the process, providing a solid foundation with essential features that focus on managing content at scale.

Key Features

Next.js App Router

Leverage modern React Server Components for efficient data fetching and lean client bundles.

GraphQL + gql.tada

Benefit from GraphQL with TypeScript integration for type-safe data fetching.

Cypress Testing

Configured Cypress.io suite for both Component and E2E testing with BDD-style syntax.

Reference Component Architecture

UI best practices with Tailwind and shadcn/ui.

Component Renderer

Render full component trees using a mapping of contentTypes to React components.

Draft Mode & Live Preview

Preview mode for Contentful Preview API and Live Preview SDK for real-time content editing.

Content Source Maps

Optional Contentful Content Source Maps for automatic Live Preview SDK annotations.

Turborepo

Showcase multiple packages for design system, CLI tooling, and testing alongside the Next.js app.

TypeScript Integration

Full TypeScript support for enhanced developer productivity and code quality.