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 content for empty spaces.
yarn
Copy .env.example
to .env
and adapt the environment to your setup:
CF_SPACE_ID
: The ID of a Compose compatible space to be usedCF_DELIVERY_ACCESS_TOKEN
: A delivery API key for the spaceCF_PREVIEW_ACCESS_TOKEN
: A preview API key for the space
and then
yarn run dev
to start the website on http://localhost:3000
You can use Vercel to easily deploy the app remotely.
- Open your Vercel dashboard and click on "New project".
- Click on "Import a Third-Party Git Repository" and enter the url of this repo.
- Choose the Vercel scope where you want to deploy the app.
- For example your personal scope.
- 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.
public/
src/
├ components
├ lib
│ ├ translations/
│ ├ 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).
We use cf-content-types-generator to keep the Content Types definitions in src/lib/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
- File an issue here on GitHub:
. Make sure to remove any credential from your code before sharing it.
This project is licensed under the MIT license.