Create Next Contentful App

The easiest way to get started with Next.js + Contenful is by using create-next-contentful-app. This CLI tool enables you to quickly start building a new Next.js + Contentful application, with everything set up for you.

Features

• Interactivity.
• Starter project full usable and deployable.
• Frequent updates.
• Easy to learn.
• (WIP) Full documentation.
• More in process.

Before to run the command and create your Next.js + Contentful project, you must to have a Contentful space and create the necesary keys to setup the project and space content.

Contentful setup

1. Create a Contentful account

If you haven't created a Contentful account, go here and create it, you can use Google or Github if you prefer.

2. Create the Contentful space

Once you create your account you will be given the option to create your space, if it does not appear you can go to the menu and click on the "Add space" button and follow the instructions (you can use a free space and then upgrade the plan).

3. Configure locales

In the Settings menu, you can access the "Locales" section.

Once there, you can create and/or configure your locales; at least one (the main one) is required for the operation of the project.

Remember to take into account the code of the language selected as the main language for the installation of the project; in the case of this example, we see that it is en-US.

4. Create the CMA Token

For the creation of the content model and the loading of the initial content it is necessary to create an access token to the Content Management API. To do this you must go to the menu Settings -> CMS Tokens

Once there, click on the "Create personal access token" button and follow the instructions.

Remember to add an expiration date according to your needs and security.

Copy and save the token in a safe place, at least until you perform the installation, because once you click the "Done" button, you will not be able to see the token again.

5. Create CDA Token

For the functioning of the website it is required to have the access tokens to the Content Management API and content in draft (preview token). To create these tokens you must go to the Settings -> API Keys menu:

Click on the "Add API keys" button.

Set an appropriate name and description; remember for security reasons to keep several API keys for your different environments.

Once created you can view the tokens by clicking on the "show" button in the "Content Delivery API - access token" and "Content Preview API - access token" fields.

One you finished your Contentful space setup, use the following command:

Interactive

You can create a new project interactively by running:

npx create-next-contentful-app@latest
# or
yarn create next-contentful-app
# or
pnpm create next-contentful-app
# or
bunx create-next-contentful-app

You will be asked for the name of your project, and then whether you want to create a TypeScript project:

✔ Would you like to create the content model to your Contentful space? … No / Yes
✔ Would you like to import the initial data to your Contentful space? … No / Yes

Select Yes to install the initial contentful model and content examples.

Non-interactive

You can also pass command line arguments to set up a new project non-interactively. See create-next-contentful-app --help:

Usage: create-next-contentful-app <project-directory> [options]

Options:
  -v, --version                          Output the current version

  --debug                                Output extra debugging (default: false)

  --cf-space-id <contentful-space-id>    ID of your Contentful space
  
  --cf-cda-token <contentful-cda-token>  Contentful delivery access token to query your contentful space/environment

  --cf-env <contentful-environment>      Contentful environment identifier

  -h, --help                             display help for command

Why use Create Next Contentful App?

create-next-contentful-app allows you to create a new Next.js + Contentful app within seconds. It is updated periodically maintained the lastest stable versions of Next.js and the packages needed for the project to run correctly, and includes a number of benefits:

• Interactive Experience: Running npx create-next-contentful-app@latest (with no arguments) launches an interactive experience that guides you through setting up a project.
• Reduces waiting times in development: With the base installation of your project you can start implementing and developing your project and worry about what is really important.
• All connected: The template we have created and used for the installation comes with everything pre-configured: GraphQL connection to the Contentful space, content invalidation APIs, implemented block system, richtext support with relations, live preview support, among many other things.