Content Publisher Tutorial for Next.js

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 Alpha 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 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):

 pcc init my-site-name --eslint --ts --appRouter

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 pcc init to the new repository on GitHub.

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

   cd my-site-name

2. Next, initialize a new Git repository:

   git init

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

   git add .

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

   git commit -m "Initial commit"

5. 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):

   git remote add origin [email protected]:myname/my-site-name.git
   git push -u origin main

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. Click Deploy site:

   

5. Click Begin Deployment. Do not close the tab or navigate away from this page until the workflow is complete.

The build process will return an error because we have not yet configured the environment variables needed to connect to Content Publisher.

(Optional) You can see this progression of build statuses using Terminus:

terminus node:logs:build:list my-site.dev

To make the build and deployment succeed, will will need a Content Publisher collection and token.

Create a Content Publisher collection

Now let's make a Content Publisher collection that will send content to our new Next.js site.

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 your new Pantheon site's Dev environment, like https://dev-my-site-name.pantheonsite.io.

   Information:

   Tutorial vs. production usage

   When using this combination of Content Publisher and Next.js in production, you would likely use the URL of your live environment here. For more information on deploying to Test and Live environments, see Deploying to Test and Live.

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

6. Click Create collection.

Connect Content Publisher to your site

Now that we have a Content Publisher collection, we can configure the environment variables needed to connect our Next.js site to that collection.

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 your clipboard now for use in the following step.

2. Set PCC_TOKEN as an environment variable on Pantheon using Terminus Secrets. Replace my-site-name and your-token-here:

   terminus secret:site:set my-site-name  PCC_TOKEN your-token-here --type=env --scope=web,ic --no-interaction

3. From the Home tab of the Content Publisher dashboard find and select your new collection. Copy the collection ID. For example:

   

4. Set PCC_SITE_ID as an environment variable on Pantheon using Terminus Secrets. Replace my-site-name and your-collection-id-here:

   terminus secret:site:set my-site-name  PCC_SITE_ID your-collection-id-here --type=env --scope=web,ic --no-interaction

Trigger another build

To see the changes take effect make another commit to the GitHub repository to trigger a new build and deployment. For example, you can add a new line to the README file in the main branch to trigger a build on Dev.

(Optional) Review Build Status from the CLI

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

terminus node:logs:build:list <site>

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: