
This tutorial will guide you through how to get started with Next.js for Drupal.

You will learn how to setup Drupal and connect a Next.js site to display your content.

Let's get started!


Introduction


Start by creating a new site and adding the [Decoupled](https://github.com/voidagency/vactory_starter_kit/tree/2.x/modules/vactory_decoupled) module.

<Callout>

If you have an existing Vactory Drupal site, you can skip to the next part.

</Callout>

## Install Docker

Download and install [Docker Desktop](https://www.docker.com/products/docker-desktop/)

## Clone the repository

```sh
git clone git@bitbucket.org:adminvoid/vactory8.git
```

Navigate to `vactory8` folder and git checkout to `develop` branch

```sh
git checkout develop
```

## Install Drupal

Startup docker services using `docker-compose`

```sh
docker-compose up -d
```

Wait for the services to finish starting up, and then install the dependencies using `composer`

```sh
docker exec vactory_php composer install
```

Once this is done, you can open the site available at [http://localhost:8080](http://localhost:8080) and proceed with installation.

---

## Need help?

We understand there's more than a few steps to properly configure Drupal, so here is a video to help you get through these difficult times.

<Loom src="https://www.loom.com/embed/d4edef158a3145ba9ad5f8ab6fbbd373" />
<Loom src="https://www.loom.com/embed/04307af76df64b419d29341354869fec" />


Install Drupal


1. Visit `/admin/modules`.
2. Enable the following modules: **JSON:API** (`vactory_decoupled`, `vactory_decoupled_router`).


Enable Modules


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

We are going to use the [basic starter](https://bitbucket.org/adminvoid/vactory_next).

---

## Install Node.js

Start by installing Node.js on your system, download it from https://nodejs.org/en/download/

<Callout>

We're always on the move upgrading everything from packages, dependencies to Node.js versions.
We highly recommend installing Node.js using [nvm](https://github.com/nvm-sh/nvm). `nvm` allows you to quickly install and use different versions of node via the command line.

</Callout>

---

---

## Create Project

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

```sh
git clone git@bitbucket.org:adminvoid/vactory_next.git
```

---

---

## Install dependencies

Run the following command to install dependencies using `yarn`:

```sh
cd vactory_next
yarn install
```

---

## Connect Drupal

To connect the Next.js project to Drupal, we use [environment variables](https://nextjs.org/docs/basic-features/environment-variables).

1. Navigate `./apps/starter`
1. Copy `.env.example` to `.env`.
1. Fill in the following **Environment variables**:

```txt title=.env
NEXT_DRUPAL_BASE_URL=http://localhost:8080
NEXT_IMAGE_DOMAIN=localhost
NEXT_BASE_URL=http://localhost:3000
```

---

## Start Development Server

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

Visit [http://localhost:3000](http://localhost:3000) to view the site.

---

## Need help?

We understand there's more than a few steps to properly configure Next.js for Drupal, so here is a video to help you get through these difficult times.

<Loom src="https://www.loom.com/embed/92e5f94251e14cc899f27baf4afc8840" />
<Loom src="https://www.loom.com/embed/b50f2e1873a64170bb2e35c6313bf1f9" />


Create Next.js project


You can now ready to create content.

Add a new page or edit the Homepage on your Drupal site and refresh your Next.js site to see the published page.


Create Content


Congratulations. You have successfully install, configure and connect a Next.js site to Drupal. 🎉

---

## What's Next?

Take a look at the [documentation](/docs) to learn more about decoupling Drupal with Next.js.

---

## Need help?

We understand there's more than a few steps to properly configure Next.js for Drupal.

It is built this way for flexibility.

If you need help, feel free to create an issue on [Redmine](http://redmine3.void.fr/projects).

You can also reach out on [Slack](https://voidagency.slack.com/archives/C015WBM3TR9).


Getting Started

Architecture

Configuration

Building Pages

Cross Content

Caching

Front

Features

Vactory Next Optimisation

Vactory Next Changelog

Deployment

Create Content