In November of 2021, Chapter Three unveiled Next-Drupal to the world as a new way for creating front ends for the Drupal CMS. Interest in this innovative decoupled solution has continually increased amid a growing headless market, the question of the best way to host a decoupled website is still evolving.
Since the launch of Next-Drupal.org, Chapter Three has been exploring various hosting options for our decoupled projects. Thankfully, some providers – most notably Pantheon – offer comprehensive hosting platforms for CMS and Next.js. Not all hosting platforms are set up to host a decoupled Drupal site which requires a LAMP stack for the CMS and Node hosting for the Next.js front end.
A combined provider solution like that provided by Pantheon offers several advantages, which include:
- Streamlined contracts
- Unified billing
- Cross-platform tooling and workflows
- Flexibility to run hybrid decoupled models
- Consolidated management of all your sites
Last year, Chapter Three collaborated with Pantheon to develop components for the Next-Drupal installation for use by Pantheon customers. We then successfully implemented it for one of our clients, the not-for-profit organization Templeton World Charity.
How it works
To deploy your Next-Drupal site on Pantheon, follow the steps provided below.
Step 1 - Create your new Drupal project on Pantheon.
1. Visit the Pantheon dashboard and click Create New Site.
2. Select Drupal with Composer
3. Fill in a site name and click continue.
4. Once Pantheon is done deploying your site, you can go ahead and install Drupal.
Step 2 - Add the Next.js for Pantheon module
1. From your site dashboard on Pantheon, click Clone with Git and clone a local copy of your site.
2. Open composer.json and add the following under repositories:
{
"type": "vcs",
"url": "git@github.com:chapter-three/pantheon-next.git"
}
3.Add the following patches under extra
"extra": {
"patches": {
"drupal/subrequests": {
"Get same results on different request": "<https://www.drupal.org/files/issues/2019-07-18/change_request_type-63049395-09.patch>"
},
"drupal/decoupled_router": {
"Unable to resolve path on node in other language than default": "<https://www.drupal.org/files/issues/2021-05-05/3111456-34.patch>"
}
},
}
4. Run the following command to add the pantheon_next module and dependencies:
composer require chapter-three/pantheon_next:dev-master cweagans/composer-patches,
5. Commit and push your code to Pantheon
Step 3 - Run the Next.js Install
1. On your Drupal site, visit /admin/modules and enable the Next.js for Pantheon module and dependencies.
2. Next, visit /admin/config/services/next/pantheon and click Run Installer.
This will create a Next.js site for you. If you select Environment Variables under Operations, you can see the variables required to connect your Drupal site to the Next.js front-end (see step 4).
Step 4 - Create a Next.js site
Create a new Next.js site using the starter on your local machine.
npx create-next-app -e <https://github.com/chapter-three/pantheon-next-starter>
2. Commit and push this code to a repository on GitHub.
3. On the Pantheon Dashboard, click Create New Site and select Import Repository under Front-End Site
4. Connect your GitHub account and select the repository for the Next.js site created in step 2.
5. On the Configure Site step, fill in the Environment Variables from the site created above in Drupal (See step 3)
6. Click Continue
Step 5 - Update Next.js URLs
Once your Next.js site has been deployed on Pantheon, you need to update the Next.js URLs on Drupal.
1. Visit your Next.js site on the Pantheon Dashboard and copy the deployment URL.
2. On your Drupal site, visit /admin/config/services/next/sites and edit your Next.js site.
3. Update the Base URL and the Preview URL
That’s it. You’ve successfully created a Drupal site and connected a Next.js front-end on Pantheon. All that remains is for you to manage your content using Drupal while content updates are sent to the next.js front end instantly. All features that make Drupal a great CMS are thus made available in a headless format using Next-Drupal.
With the user-friendly Pantheon dashboard, you benefit from being able to view your CMS (Drupal) and your Next.js site.
We are seeing wonderful performance with the Pantheon next.js front-end service.
As a Pantheon partner, Chapter Three has not only developed Next-Drupal.org but also crafted components of the Next-Pantheon installation profile.
Chapter Three has a proven decoupled practice and is a leader in Next-Drupal development. We are ready to help your company transition to a decoupled architecture using Pantheon's comprehensive solution.
Drupal is indeed a stellar CMS and one whose capabilities truly come to life in decoupled environments. If you're looking to free yourself from traditional Drupal and embrace the headless revolution, the combined Next-Drupal and Pantheon platform is definitely the way to go.
