Compose Starter: Help Center + Next.js

This is a sample website frontend to help you get started with Compose and Next.js. You can use this example with Compose's quick start "Simple website" content model for empty spaces.

Getting started

Installing dependencies

yarn

Running locally

Copy .env.example to .env and adapt the environment to your setup:

• CF_SPACE_ID: The ID of a Compose compatible space to be used
• CF_DELIVERY_ACCESS_TOKEN: A delivery API key for the space
• CF_PREVIEW_ACCESS_TOKEN: A preview API key for the space

and then

yarn run dev

to start the website on http://localhost:3000

Deploy to Vercel

You can use Vercel to easily deploy the app by clicking the deploy button below:

For manual deployment, you can following the steps below:

1. Open your Vercel dashboard and click on "New project".
2. Click on "Import a Third-Party Git Repository" and enter the url of this repo.
3. Choose the Vercel scope where you want to deploy the app.
   • For example your personal scope.
4. Add the 3 environment variables in the project settings:
   • CF_SPACE_ID: The ID of a Compose compatible space to be used;
   • CF_DELIVERY_ACCESS_TOKEN: A delivery API key for the space;
   • CF_PREVIEW_ACCESS_TOKEN: A preview API key for the space.

You are all set! When the deployment run completes, you will see the app at the url generated by Vercel. It can be seen in the overview page of the new project.

Tech used

• Next.js 12.x
• TypeScript 4.x
• Tailwind CSS

Project structure

public/
src/
  ├ components
  ├ lib
  │   ├ translations/
  │   ├ generated-types/
  │   ├ api.ts
  │   └ ... etc
  │
  ├ pages/
  │    ├ [locale]/
  │    │   ├ articles/
  │    │   │    └ [slug].tsx
  │    │   │
  │    │   ├ [slug].tsx
  │    │   └ index.ts
  │    │
  │    ├ ...
  │    └ index.tsx
  │
  └ styles/
next.config.js
...

• src/pages Lists all the pages/routes on the website. See the official Next.js documentation about pages for more information.

• src/components It contains all React components other than Pages. The most important components here, those under src/components/renderer, correspond directly to the Content Types we support previewing.

  The block-renderer.tsx responsibility is to correctly render a given entry depending on its Content Type.

• src/lib

  It contains any code that isn't a component or a Page, notably the fetching and translation logic and Content Types definitions (see below).

Generating Content Types

We use cf-content-types-generator to keep the Content Types definitions in src/lib/generated-types in sync with the space we use.

# Credentials to be used by cf-content-types-generator (see package.json)
export CF_SPACE_ID=<space-id>
export CF_CMA_TOKEN=<your-cma-token>

# Generate
yarn generate-types

Reach out to us

You have questions about how to use this repo?

• Reach out to our community forum:
• Jump into our community slack channel:

You found a bug or want to improve this repo?

• File an issue here on GitHub: . Make sure to remove any credential from your code before sharing it.

You need to share confidential information or have other questions?

• File a support ticket at our Contentful Customer Support:

License

This project is licensed under the MIT license.