A Blog Starter Template powered by Next.js & Contentful, pre-designed with optimized & adjustable pages, components, and data management.

$~$

Contentful provides content infrastructure for digital teams to power websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management, and delivery APIs, and a customizable web app that enables developers and content creators to ship their products faster.

$~$

The Starter Templates experience is currently only available to new users.

To benefit from this experience, please follow this link to create a new account: https://www.contentful.com/sign-up/?action=create_starter_template.

To immediately start auto installation of this template after creating a new account, please follow this link: https://www.contentful.com/sign-up/?action=create_starter_template&template_name=blog.

$~$

Follow this guide to understand the relationship between Contentful and the Starter Template source code through guided steps:

• Entry editing, and updates preview in the Starter Template application (online/locally)
• Content type editing in the Contentful web app, as well as in the Starter Template's code

$~$

• 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⁴.

$~$

To get started, read the following guidelines.

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

$~$

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

• Your domains base URL
• 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/
• Your space GraphQL endpoint: https://www.contentful.com/developers/docs/references/graphql/

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

$~$

To install the necessary dependencies, run:

yarn

yarn dev

The Starter Template 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.

$~$

It is recommended to use the Node version listed in the .nvmrc file, we recommend using nvm to easily switch between Node versions.

$~$

This repository makes use of Husky to enforce commit hooks.

The config for both the pre-commit and pre-push hooks can be found in the .husky folder, located in the root of the project.

Before allowing a commit, we require a successful result from the TypeScript compiler (tsc) and our lint-staged script will be run.

This ensures all ESLint and Prettier rules are enforced on the files that are staged to be committed.

The tsc command is run separately from the lint-staged step because we require the Typescript compiler to sample all files.

This is important to ensure that no deviating types were introduced by the codegen for example.

The same two tasks are run for pre-push and for pre-commit.

In case of wanting to bypass the pre-commit or pre-push hooks, pass a --noVerify flag to your Git commands.

⚠️ Make sure you only use this if you know why you're using it. ⚠️

$~$

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, they 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

$~$

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

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.

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

$~$

$~$

The Starter Template can be deployed to your hosting provider of choice.

We offer integrations with Vercel and Netlify to speed up the process by clicking one of the deploy buttons below. The GitHub repository and the necessary environment variables keys are pre-configured in the hosting provider space.

Vercel	Netlify
Environment variables docs	Environment variables docs

Make sure to add the necessary environment variables values to the hosting provider environment variables.

Once you have the Starter Template deployed on your hosting provider, you can update the Content preview URL in your space settings.

You can follow our guide to learn how to do so: https://www.contentful.com/help/setup-content-preview.

$~$

$~$

If you have a problem with this Starter Template, post a message in our Contentful Community Slack.

Can't find your answer there? You can file a feedback issue through this template.

If you have other problems with Contentful not related to the Starter Template, you can contact the Customer Support.

$~$

See CONTRIBUTING.md.

$~$

MIT License, see LICENSE.

$~$