This is a Next.js example project that integrates with Contentful to display knowledge base articles. This project includes the following functionality:
- Next.js App Router
- Article listing on homepage
- Article detail pages
- On-demand revalidation with Next.js Route Handlers and Contentful Webhooks
- Content Preview with Next.js Draft Mode and Contentful Content Preview
For a complete guide on how to integrate Next.js App Router and Contentful, see the Next.js App Router and Contentful Integration Guide.
This project requires the following environment variables to be set:
CONTENTFUL_SPACE_ID=<Replace with your Contentful Space ID>
CONTENTFUL_ACCESS_TOKEN=<Replace with your Contentful access token>
CONTENTFUL_PREVIEW_ACCESS_TOKEN=<Replace with your Contentful preview access token>
CONTENTFUL_REVALIDATE_SECRET=<Replace with a secret string to be set in Contentful's webhook settings>
CONTENTFUL_PREVIEW_SECRET=<Replace with a secret string to be set in Contentful's Content Preview settings>
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.