Create Next.js project

Create a new Next.js project using the starter


Now that we have completed the Drupal configuration, we can create our Next.js project.

We are going to use the basic starter.

Create Project

Run the following command to create a new Next.js project:

Using Basic Starter

npx create-next-app -e https://github.com/chapter-three/next-drupal-basic-starter

Using Basic Starter with DrupalClient

If you would like to use the new `DrupalClient`, use the following command instead:

npx create-next-app -e https://github.com/chapter-three/next-drupal-basic-starter-client

Connect Drupal

To connect the Next.js project to Drupal, we use environment variables.

  1. Copy `.env.example` to `.env.local`.
  2. On the Drupal site, visit /admin/config/services/next.
  3. Click Environment variables.
  4. Copy and paste the values into the `.env.local` file created above.

Remember to fill in the `DRUPAL_CLIENT_ID` and the `DRUPAL_CLIENT_SECRET`.

Start Development Server

To start the Next.js development server, run `npm run dev` or `yarn dev`. This starts the development server on `http://localhost:3000`.

Visit http://localhost:3000 to view the site.