Netlify Docs

Contact

Contentful Integration

This feature is in BETA.

Contentful is a headless Content Management System (CMS) built with an API-first architecture. You can upload content to Contentful, then organize and edit it on the Contentful web app interface.

Connect your Netlify site with a Contentful space using the Contentful Integration to streamline the way you work with your CMS and Netlify. With this integration, the Netlify app on your Contentful space installs once you connect your Netlify site to Contentful, so you can redeploy updated content in fewer steps, and without having to manually create webhooks.

The Contentful Integration also allows you to generate a preview link directly from the Netlify UI to preview your updated content before you publish it.

# Before you begin

To get started integrating Contentful with your Netlify site, make sure you have the following prerequisites:

  • an account with Contentful
  • a Contentful space to connect with a site
  • a site on Netlify that pulls content from Contentful

To use the features of the integration, your Contentful space needs content type and content already populated.

# Connect to Contentful on Netlify

Once you have your Contentful space and your Netlify site ready, you can connect to Contentful in the Netlify UI:

  1. Select your site, then select Integrations.
  2. Search integrations for Contentful to access the Contentful Integration.
  3. Select Enable.
  4. Once enabled, follow the prompts to log in to your Contentful account through OAuth. Successfully logging in to Contentful will redirect you back to the Netlify UI to complete your configuration.

The Contentful Integration is connected at the site level. If you want to enable it on multiple sites, you’ll need to follow the steps above for each site.

# Connect a space

When you connect a space to your Netlify site, the Netlify app installs in the sidebar of your Contentful space. This enables you to redeploy your site from the Contentful UI when you update content.

To configure your connection in the Netlify UI:

  1. If you haven’t already redirected here after logging in to Contentful, select Integrations > CMS > Contentful > View.

  2. Select a Contentful space from the menu, then select Connect.

  3. Choose how you want to redeploy your site for updates:

    • When entry published only

    • When entry published, unpublished, or deleted

  4. Select Create connection.

In addition to installing the Netlify app on your Contentful space, a successful connection generates a webhook linked to your Netlify site.

You can edit the settings for the webhook at any time from the Netlify UI by selecting Integrations > CMS > Contentful > View, then following the webhook link under Connected to Contentful to navigate to the webhook settings in Contentful.

# Test your connection

Navigate to your Contentful space and select Content to access your entries. Select the content name to open more details. Find the Netlify app on your Contentful space in the sidebar if your connection is successful.

If you add a new content type after enabling the integration, you’ll need to manually install the Netlify app on your Contentful space for that content type.

# Preview content

When you connect your Contentful space to your Netlify site, this also enables previews. In the Netlify UI, you can save an environment variable prefix and generate a snippet to add to your own code.

We recommend fetching your Contentful data from a serverless function. However, if you need to fetch your content in client-side code, the Preview Configuration section allows you to enter the prefix for the frontend build system or framework your site uses.

To configure your preview:

  1. Select Integrations > CMS > Contentful > View.
  2. In the Preview Configuration menu, enter your prefix in the Prefix field. For example, a site using Next.js would require the prefix NEXT_PUBLIC. Our frameworks environment variables doc includes a few framework-specific prefix examples.
  3. Select Save to save your prefix.

Note that this updates the preview code snippet below the Prefix field.

You can use this snippet in your own code wherever you’re pulling in Contentful content dynamically or at build time. This snippet conditionally renders either the preview or the production version of your site.

Below is an example of a code snippet for a site that uses Next.js:

const client = createClient({
  space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
  accessToken:
    process.env.NEXT_PUBLIC_IS_PREVIEW === "true"
      ? process.env.NEXT_PUBLIC_CONTENTFUL_PREVIEW_TOKEN
      : process.env.NEXT_PUBLIC_CONTENTFUL_DELIVERY_TOKEN,
});

// Alternatively you can use the CDN API as follows...
const baseUrl =
  process.env.NEXT_PUBLIC_IS_PREVIEW === "true"
    ? "preview.contentful.com"
    : "cdn.contentful.com";

Once you add this snippet to your site’s code, you can create a preview build from the Netlify UI. Select Create Preview to generate a preview of unpublished content.

Select Visit Preview to navigate to the preview version of your site.

# More resources

# Feedback

We welcome your feedback on the Contentful Integration. Fill out our survey to share your thoughts or ideas.