Next.js Overview

Compatibility and Requirements

• A Google Workspace user account
• Node Version 18 LTS
• npm Version 8.6.11

Usage

Content Publisher Toolkit

The Content Publisher Toolkit (Github and NPM) is an SDK packaged alongside Next.js starter kits and a command-line interface tool. Specifically, it includes:

• Content Publisher SDKs: Integrates Content Publisher with web applications, in this context Next.js
• Content Publisher CLI: Interacts with the Content Publisher API, also used to install the following starters
• Next.js Starters: Can be used to quickly spin up a new Next.js site with Content Publisher integration, or can be used to reference implementation methods for your own integration efforts elsewhere.
  • JavaScript
  • TypeScript and ESLint
  • App Router TypeScript and ESLint

Install this toolkit globally on your local workstation:

npm add @pantheon-systems/pcc-cli --global

After installing, you must login:

pcc login

This command will open a tab in your web browser where you can either select an already logged-in Google account or login to a new one.

Create a new Next.js site using Content Publisher starters

By default, the npm package manager is used. If you prefer another package manager, you can add one of the following options to your initialization command:

• --use-pnpm
• --use-yarn

For the initialization commands shown below, replace project-name with a unique name for your project.

Next.js JavaScript

pcc init project-name  

Next.js TypeScript with ESLint

pcc init project-name --ts --eslint

Next.js TypeScript with ESLint and App Router

pcc init project-name --ts --eslint --appRouter

For step by step instructions, see the following tutorials:

• Using a starter to spin up a new Pantheon hosted Next.js site (Beta access required)
• Using a starter to spin up a new local Next.js site, which you can then deploy to a host of your choice

Integrate Content Publisher with an existing Next.js site

From the project root of your existing site’s codebase:

1. Add the SDK as a site dependency
2. Connect your existing Next.js site to a collection in Content Publisher:
   • Create a new collection or use an existing collection
     1. Use the Collection ID for PCC_SITE_ID in the next step
     2. Create an Access Token for PCC_TOKEN in the next step
   • Create these environment variables wherever you host your Next.js site:
     1. PCC_SITE_ID
     2. PCC_TOKEN
   • Add those variables to your site’s .env.local file for local development usage.
3. Use starter kits as references for integration implementation based on your usage requirements.