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:

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

Connect Drupal

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

  1. Copy .env.example to .env.local.
  2. Fill in the following Environment variables:

.env.local

NEXT_PUBLIC_DRUPAL_BASE_URL=http://example.com
NEXT_IMAGE_DOMAIN=example

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.