Subchapter 8.1

Next.js Setup

references/nextjs-setup.mdMarkdown3 KBView on GitHub

Use this as the baseline setup for adding Contentful to an existing Next.js project.

If router type is not specified, use App Router patterns by default.

0) Check latest Next.js release when needed

If you need to give version-specific setup or upgrade guidance, verify the current stable release first:

Next.js Setup · Contentful Next.js · contentful/skills · Skills Docs

CONTENTFUL_SPACE_ID=your_space_id
CONTENTFUL_ACCESS_TOKEN=your_cda_access_token
CONTENTFUL_PREVIEW_ACCESS_TOKEN=your_cpa_access_token
CONTENTFUL_ENVIRONMENT_ALIAS=master
# optional fallback if alias is not used
CONTENTFUL_ENVIRONMENT_ID=master

// lib/contentful/client.ts
import { createClient } from "contentful";

export function createContentfulClient(preview = false) {
  return createClient({
    space: process.env.CONTENTFUL_SPACE_ID as string,
    environment:
      process.env.CONTENTFUL_ENVIRONMENT_ALIAS ||
      process.env.CONTENTFUL_ENVIRONMENT_ID ||
      "master",
    accessToken: preview
      ? (process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN as string)
      : (process.env.CONTENTFUL_ACCESS_TOKEN as string),
    host: preview ? "preview.contentful.com" : undefined,
  });
}

// lib/contentful/queries.ts
import { createContentfulClient } from "./client";

export async function getEntryById(entryId: string, preview = false) {
  const client = createContentfulClient(preview);
  return client.getEntry(entryId);
}

Next.js Setup

0) Check latest Next.js release when needed

Next.js Setup

0) Check latest Next.js release when needed

1) Install SDK

2) Configure environment variables

3) Create a shared client factory

4) Query entries in server context

5) Keep tokens server-side

6) Prefer aliases for deployments