Features

• Composable content through powerful & flexible content modeling.
• Localization ready.
• SEO ready.
• Incremental Static Regeneration with Next.js¹.
• Generation of GraphQL² typed code (schema, and types), in sync with the content types through graphql-codegen³.
• Enhanced Developer Experience with TypeScript⁴.

$~$

Getting started

To get started, read the following guidelines.

• Environment variables
• Dependencies
• Development
• Contentful API & GraphQL
• Deployment

$~$

Environment variables

In order to authenticate the requests to the Contentful APIs, the following values are necessary:

• Your space ID: https://www.contentful.com/help/find-space-id/
• Contentful Delivery API token: https://www.contentful.com/developers/docs/references/content-delivery-api/
• Contentful Preview API token: https://www.contentful.com/developers/docs/references/content-preview-api/

Rename the .env.example file to .env and add the necessary values.

$~$

Dependencies

To install the necessary dependencies, run:

yarn

Run the Starter Template in development mode

yarn dev

It should be up and running on http://localhost:3000.

All necessary dependencies are installed under node_modules and any necessary tools can be accessed via npm scripts.

$~$

Contentful API & GraphQL

This project makes use of Contentful's GraphQL API.

API calls made to the Contentful GraphQL endpoint are made through graphql-request.

The types are generated from the .graphql files located in the /lib/graphql/ directory:

1. lib/graphql/[fileName].graphql is detected by the codegen
2. lib/__generated/sdk.ts is generated
3. Within the generated file, their types and a new getSdk function are generated
4. The getSdk function can now be imported and used within the getStaticProps in the pages files

$~$

GraphQL & code generation

We use graphql-codegen to generate a type-safe API client, utilizing GraphQLClient as the "client".

---

Commands

In order to (re-)generate the GraphQL schema, types and sdk, please use either of the following commands:

• yarn graphql-codegen:generate generates a schema, types and code to fetch data from the Contentful APIs
• yarn graphql-codegen:watch similar to the generate command, but it runs as a watch task which will rerun the steps when changes are made in the .graphql files

The first steps of the codegen generate files that contain the GraphQL schema and matching TypeScript types. All these files are located in the src/lib/graphql folder. They're generated to the src/lib/__generated folder and ought to be committed once altered/added to the repository.

The TS types for these files are generated in the same location, in a __generated folder and like the other files ought to be committed.

---

Configuration

The configuration for the codegen can be found in codegen.ts, located in the root of the project.

$~$

---

License

MIT License, see LICENSE.

$~$

Footnotes

1. Next.js docs ↩

2. GraphQL docs ↩

3. graphql-codegen ↩

4. TypeScript ↩