Integrating Next.js and Wagtail: Building a Headless, Content-Driven Website

Fullstack web app with Nextjs and Wagtail
Image by Peng Boris

In the fast-paced world of web development, creating a scalable and content-driven website has never been easier. With the perfect combination of Next.js and Wagtail, you can build a headless website that's not only easy to manage but also dynamic and efficient. In this tutorial, we'll take you through the process of integrating Next.js and Wagtail, step by step.

Here is a preview of what we are building:

Check out the live version of the website

1) Setup Your CMS

A) Using Traleor CMS

The quickest way to get started is by using Traleor CMS, a fully managed Wagtail-based CMS solution that allows you to create your headless website in just 15 minutes without any coding skills. All you need is a browser and an internet connection. Read the written tutorial or watch the video below:

B) Install and Set up Your Wagtail Website from Scratch

For those who prefer a more hands-on approach, you can install and configure your own headless Wagtail site from scratch. Thibaud Colas, one of Wagtail's core contributors, documented the steps thoroughly for a workshop at DjangoCon Europe 2023. This option requires some experience with Python and Django. Follow the workshop

For this tutorial, our primary focus is on using Wagtail, a scalable solution trusted by renowned organizations like Google and NASA. However, you can integrate any headless CMS of your choice, such as WordPress, Sanity, Strapi, Directus, Agility CMS, Hygraph, and more.

2) Setup Your Next.js Website

A) Next.js Weblog Template

If you're using a Wagtail-based CMS, we've created a Next.js Weblog Template that streamlines the integration process. Leveraging the power of wagtail-js, this template simplifies data fetching from your Wagtail website. You won't need to worry about setting up your own fetching logic or library. This template provides production-ready code for seamless integration. [View Live Site]

B) Setup Next.js from Scratch

Alternatively, you can quickly set up your Next.js website using 'create-next-app' or your preferred method, along with your chosen setup for Next.js.

Note: While you can use any fetching library or CMS client of your choice if you're using Wagtail, we highly recommend utilizing wagtail-js.

3) Fetching Content from Your CMS

A) Using Traleor CMS

If you opt for Traleor, you'll need to set up your API keys for data fetching. We make use of wagtail-js to simplify the process.

a) Log in to your Traleor dashboard.

b) Navigate to your Profile and select API Access.

c) Create and save an API key in a secure environment.

d) Create your .env file and add your website URL and API key. (See .env.example)

e) Run the website and experience the magic. You can now customize the UI to your liking or build a new one.

Creating API access
Create API Key Overlay

B) Your Wagtail-based CMS

For other Wagtail CMS options, you can easily plug and play with the help of wagtail-js.

a) Set up the .env as shown above, with the appropriate baseURL, apiPath, and headers.

b) Run the demo app, and it should work out of the box.

4) Going Live

To take your website live, you'll need to deploy your Next.js application. The easiest way to do this is by using Vercel, although other deployment options are available. Additionally, you will need to take care of the backend:

A) With Traleor CMS

You won't have to do anything special, as the Wagtail instance is fully managed. Simply log into your dashboard and create/manage your content.

B) Your Wagtail-based CMS

You'll need to deploy your API to make it accessible over the internet. Digital Ocean community blog has a comprehensive tutorial to guide you through deploying on an Ubuntu server. Alternatively, you can choose to deploy it in a way that you're most comfortable with, such as Heroku, or Coolify (An open-source & self-hostable Heroku / Netlify alternative)


By following the steps outlined in this tutorial, you'll be well on your way to creating a headless, content-driven website that's efficient and easy to manage. The integration of Next.js and Wagtail empowers you to build a web application that can scale with your needs and deliver an exceptional user experience. Happy coding!

twitter share icon
facebook share icon
linkedin share icon
whatsapp share icon
Copy Link