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.
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.
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)
Conclusion
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!
