Last Reviewed: 2026-02-13

Content Publisher Tutorial for Next.js

Integrate Content Publisher with a Next.js site on Pantheon

Discuss in Slack

Edit this page on GitHub Report an issue with this doc

Information:

Beta support for Next.js

This documentation describes support for Next.js that is under active development and is available only to customers who have been individually approved as part of our Private Beta program.

To request an invite, submit this form.

If you are migrating an existing Next.js site from our Front-End Sites offering please see our guide on migrating from Front-End Sites.

Pantheon's Content Publisher shines as a way to send content straight from Google Docs to a Next.js site hosted on Pantheon. This tutorial will walk you through the steps needed to make a simple site combining the two.

Learning Objectives

This tutorial will walk you through:

• Making a new Next.js codebase using the Next.js Content Publisher Starter.
• Creating a new GitHub repository to hold that codebase.
• Creating a new Pantheon site that will build and run the code from that repository.
• Creating a Content Publisher collection that will send content to the Next.js site.
• Configuring environment variables on Pantheon to connect the Next.js site to the Content Publisher collection.

Requirements

• Access granted for the Next.js Private Beta Program
• A GitHub account with SSH configured
• A Content Publisher account with Administrator access
• Install the following applications:
  • Git
  • Terminus*
  • Terminus Secrets Manager Plugin
  • Content Publisher requirements:
    • Node.js and npm
    • Content Publisher CLI*
    • Content Publisher Google Docs add-on
  • Optional:
    • Terminus Node Logs Plugin

* Requires logging in after installation.

Create a Content Publisher collection

Before you can make a Next.js site to display content from Content Publisher, we will need a Content Publisher collection. You can reuse an existing Content Publisher collection if you have one, but for this tutorial we will make a new one.

1. Go to the Content Publisher dashboard and log in.

2. Next create a new collection by clicking the "New collection" button.

3. Enter something simple for Collection name like "Next.js tutorial content".

4. For the URL field, enter the URL of the Next.js site you intend to make a Pantheon. You can change this field later. For instance, use https://dev-my-site-name.pantheonsite.io if you intend to make a site with a machine name of my-site-name.

1. Set Collection access. Since this collection is meant to be a tutorial, you may want to select Only managers and authorized users.

2. Click Create collection.

Get Content Publisher ID and Token

Now that we have a Content Publisher collection, we can grab variables for the collection ID and a token that we will soon give to Next.js.

1. From the Tokens tab of the Content Publisher dashboard click Create access token and fill in the prompt. The token will only be shown once, copy it to a local text file and delete it later.

2. From the Home tab of the Content Publisher dashboard find and select your new collection. Copy the collection ID to the same text file. For example:

Create a local Next.js codebase

With all the requirements above in place, we will now make a local codebase for our Next.js site.

Run this command (replacing my-site-name with a unique name for your site):

You can answer the interactive prompts that follow with "no" since we have not yet made a Content Publisher collection or token to go with this site.

When the command completes, you will have a simple Next.js codebase on your local machine in a directory named my-site-name.

Create a GitHub repository

Next, we will create a new repository on GitHub to hold the codebase we just made.

You can do this via GitHub's web interface or via the command line.

Leave the repository empty for now and do not add a README, .gitignore, or license.

Since this repository is meant to be a tutorial, you may want to make it private.

Push the codebase to GitHub

Now, we will push the codebase we made with cpub init to the new repository on GitHub.

1. First, change into the directory holding the codebase:

1. Next, initialize a new Git repository:

1. Next, add the files in the directory to the new Git repository:

1. Next, commit the files to the new Git repository:

1. Finally, add the GitHub repository as a remote and push the code to it (replacing myname and my-site-name with your GitHub username or organization and the name of the repository you created):

Create a new Pantheon site

With a GitHub repository holding our Next.js codebase, we can now create a new Pantheon site and use Pantheon's GitHub Application to trigger builds in response to code changes.

1. Go to the workspace and click the Create New Site button. Then click Next.js.
2. Click Connect next to GitHub. You will be prompted to install and authorize the Pantheon Site Integration GitHub application.
3. Select the newly authorized account, then click Continue.
4. In the Configure Site step, switch tabs to Use existing repository, then enter a Site name and select your existing repository from the dropdown menu.

Next enter your Content Publisher Collection ID and Token using the variables PCC_SITE_ID and PCC_TOKEN.

You can name complete the form and site creation will begin.

(Optional) Review Build Status from the CLI

To view the status of that process, run this command, replacing <site> with your sitename:

Publish from Google Docs to your Next.js site

1. Create a new Google Doc and connect it to your collection using the Google Docs add-on.
2. Publish your new page using the add-on.
3. Click View live content and you should see your new page, for example: