Next.js: Integrating Contentful and TypeScript (App Router)

.env.local

CONTENTFUL_SPACE_ID=...             # The Contentful space in which the content is stored
CONTENTFUL_ACCESS_TOKEN=...         # Used to fetch content from Contentful
CONTENTFUL_PREVIEW_ACCESS_TOKEN=... # Used to fetch content/changes that is not yet published
CONTENTFUL_MANAGEMENT_TOKEN=...     # Used to generate TypeScript types for Contentful
CONTENTFUL_PREVIEW_SECRET=...       # Used to allow only editors to access preview mode

$ yarn add contentful
$ yarn add cf-content-types-generator --dev

$ export $(cat .env.local | awk '!/^\\s*#/' | awk '!/^\\s*$/')
$ cf-content-types-generator \
	--spaceId $CONTENTFUL_SPACE_ID \
	--token $CONTENTFUL_MANAGEMENT_TOKEN \
	-o src/contentful/types \
	-X

src/
	contentful/
		types/
			index.ts
			TypeBlogPost.ts

$ prettier --write src/contentful/types

package.json

{
	"scripts": {
		"types:contentful": "export $(cat .env.local | awk '!/^\\s*#/' | awk '!/^\\s*$/'); cf-content-types-generator --spaceId $CONTENTFUL_SPACE_ID --token $CONTENTFUL_MANAGEMENT_TOKEN -o src/contentful/types -X && prettier --write src/contentful/types"
	}
}

src/contentful/contentfulClient.ts

import { createClient } from 'contentful'

const { CONTENTFUL_SPACE_ID, CONTENTFUL_ACCESS_TOKEN, CONTENTFUL_PREVIEW_ACCESS_TOKEN } = process.env

// This is the standard Contentful client. It fetches
// content that has been published.
const client = createClient({
	space: CONTENTFUL_SPACE_ID!,
	accessToken: CONTENTFUL_ACCESS_TOKEN!,
})

// This is a Contentful client that's been configured
// to fetch drafts and unpublished content.
const previewClient = createClient({
	space: CONTENTFUL_SPACE_ID!,
	accessToken: CONTENTFUL_PREVIEW_ACCESS_TOKEN!,
	host: 'preview.contentful.com',
})

// This little helper will let us switch between the two
// clients easily:
export default function contentfulClient({ preview = false }) {
	if (preview) {
		return previewClient
	}

	return client
}

src/contentful/blogPosts.ts

import { TypeBlogPostSkeleton } from './types'
import { Entry } from 'contentful'
import { Document as RichTextDocument } from '@contentful/rich-text-types'
import contentfulClient from './contentfulClient'
import { ContentImage, parseContentfulContentImage } from './contentImage'

type BlogPostEntry = Entry<TypeBlogPostSkeleton, undefined, string>

// Our simplified version of a BlogPost.
// We don't need all the data that Contentful gives us.
export interface BlogPost {
	title: string
	slug: string
	body: RichTextDocument | null
	image: ContentImage | null
}

// A function to transform a Contentful blog post
// into our own BlogPost object.
export function parseContentfulBlogPost(blogPostEntry?: BlogPostEntry): BlogPost | null {
	if (!blogPostEntry) {
		return null
	}

	return {
		title: blogPostEntry.fields.title || '',
		slug: blogPostEntry.fields.slug,
		body: blogPostEntry.fields.body || null,
		image: parseContentfulContentImage(blogPostEntry.fields.image),
	}
}

// A function to fetch all blog posts.
// Optionally uses the Contentful content preview.
interface FetchBlogPostsOptions {
	preview: boolean
}
export async function fetchBlogPosts({ preview }: FetchBlogPostsOptions): Promise<BlogPost[]> {
	const contentful = contentfulClient({ preview })

	const blogPostsResult = await contentful.getEntries<TypeBlogPostSkeleton>({
		content_type: 'blogPost',
		include: 2,
		order: ['fields.title'],
	})

	return blogPostsResult.items.map((blogPostEntry) => parseContentfulBlogPost(blogPostEntry) as BlogPost)
}

// A function to fetch a single blog post by its slug.
// Optionally uses the Contentful content preview.
interface FetchBlogPostOptions {
	slug: string
	preview: boolean
}
export async function fetchBlogPost({ slug, preview }: FetchBlogPostOptions): Promise<BlogPost | null> {
	const contentful = contentfulClient({ preview })

	const blogPostsResult = await contentful.getEntries<TypeBlogPostSkeleton>({
		content_type: 'blogPost',
		'fields.slug': slug,
		include: 2,
	})

	return parseContentfulBlogPost(blogPostsResult.items[0])
}

src/contentful/contentImage.ts

import { Asset, AssetLink } from 'contentful'

// Our simplified version of an image asset.
// We don't need all the data that Contentful gives us.
export interface ContentImage {
	src: string
	alt: string
	width: number
	height: number
}

// A function to transform a Contentful image asset
// into our own ContentImage object.
export function parseContentfulContentImage(
	asset?: Asset<undefined, string> | { sys: AssetLink }
): ContentImage | null {
	if (!asset) {
		return null
	}

	if (!('fields' in asset)) {
		return null
	}

	return {
		src: asset.fields.file?.url || '',
		alt: asset.fields.description || '',
		width: asset.fields.file?.details.image?.width || 0,
		height: asset.fields.file?.details.image?.height || 0,
	}
}

src/app/page.tsx

import { draftMode } from 'next/headers'
import { fetchBlogPosts } from '../contentful/blogPosts'
import Link from 'next/link'

async function Home() {
	// Fetch blog posts using the content preview
	// if draft mode is enabled:
	const blogPosts = await fetchBlogPosts({ preview: draftMode().isEnabled })

	return (
		<main className="p-[6vw]">
			<div className="prose">
				<h1>My Contentful Blog</h1>
				<ul>
					{blogPosts.map((blogPost) => {
						return (
							<li key={blogPost.slug}>
								<Link href={`/${blogPost.slug}`}>{blogPost.title}</Link>
							</li>
						)
					})}
				</ul>
			</div>
		</main>
	)
}

export default Home

src/app/[slug]/page.tsx

import { Metadata, ResolvingMetadata } from 'next'
import { draftMode } from 'next/headers'
import { notFound } from 'next/navigation'
import { fetchBlogPost, fetchBlogPosts } from '../../contentful/blogPosts'
import Link from 'next/link'
import RichText from '../../contentful/RichText'

interface BlogPostPageParams {
	slug: string
}

interface BlogPostPageProps {
	params: BlogPostPageParams
}

// Tell Next.js about all our blog posts so
// they can be statically generated at build time.
export async function generateStaticParams(): Promise<BlogPostPageParams[]> {
	const blogPosts = await fetchBlogPosts({ preview: false })

	return blogPosts.map((post) => ({ slug: post.slug }))
}

// For each blog post, tell Next.js which metadata
// (e.g. page title) to display.
export async function generateMetadata({ params }: BlogPostPageProps, parent: ResolvingMetadata): Promise<Metadata> {
	const blogPost = await fetchBlogPost({ slug: params.slug, preview: draftMode().isEnabled })

	if (!blogPost) {
		return notFound()
	}

	return {
		title: blogPost.title,
	}
}

// The actual BlogPostPage component.
async function BlogPostPage({ params }: BlogPostPageProps) {
	// Fetch a single blog post by slug,
	// using the content preview if draft mode is enabled:
	const blogPost = await fetchBlogPost({ slug: params.slug, preview: draftMode().isEnabled })

	if (!blogPost) {
		// If a blog post can't be found,
		// tell Next.js to render a 404 page.
		return notFound()
	}

	return (
		<main className="p-[6vw]">
			<Link href="/">← Posts</Link>
			<div className="prose mt-8 border-t pt-8">
				{/* Render the blog post image */}
				{blogPost.image && (
					<img
						src={blogPost.image.src}
						// Use the Contentful Images API to render
						// responsive images. No next/image required:
						srcSet={`${blogPost.image.src}?w=300 1x, ${blogPost.image.src} 2x`}
						width={300}
						height={300}
						alt={blogPost.image.alt}
					/>
				)}

				{/* Render the blog post title */}
				<h1>{blogPost.title}</h1>

				{/* Render the blog post body */}
				<RichText document={blogPost.body} />
			</div>
		</main>
	)
}

export default BlogPostPage

src/contentful/RichText.tsx

import { Document as RichTextDocument } from '@contentful/rich-text-types'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'

type RichTextProps = {
	document: RichTextDocument | null
}

function RichText({ document }: RichTextProps) {
	if (!document) {
		return null
	}

	return <>{documentToReactComponents(document)}</>
}

export default RichText

src/app/api/draft/route.ts

import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'
const { CONTENTFUL_PREVIEW_SECRET } = process.env

export async function GET(request: Request) {
	const { searchParams } = new URL(request.url)
	if (searchParams.get('previewSecret') !== CONTENTFUL_PREVIEW_SECRET) {
		return new Response('Invalid token', { status: 401 })
	}

	draftMode().enable()

	redirect(searchParams.get('redirect') || '/')
}

<base-url>/api/draft?previewSecret=<preview-secret>&redirect=/{entry.fields.slug}

src/app/layout.tsx

// ...
function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<html lang="en">
			<body className={inter.className}>
				{draftMode().isEnabled && (
					<p className="bg-orange-200 py-4 px-[6vw]">
						Draft mode is on! <ExitDraftModeLink className="underline" />
					</p>
				)}
				{children}
			</body>
		</html>
	)
}
// ...

src/app/ExitDraftModeLink.tsx

'use client'
import { usePathname } from 'next/navigation'
import React from 'react'

function ExitDraftModeLink(props: React.HTMLProps<HTMLAnchorElement>) {
	const pathname = usePathname()

	return (
		<a href={`/api/disable-draft?redirect=${pathname}`} {...props}>
			Exit
		</a>
	)
}

export default ExitDraftModeLink

src/app/api/disable-draft/route.ts

import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'

export async function GET(request: Request) {
	const { searchParams } = new URL(request.url)

	draftMode().disable()

	redirect(searchParams.get('redirect') || '/')
}