Building a Website with Payload CMS and NextJS: Introduction & Overview - Part 1

Welcome to the exciting world of Payload CMS and NextJS! In this article, we'll dive deep into how to effectively combine these powerful tools to build dynamic websites. This guide is based on the insightful series created by AllAboutPayload, specifically designed for developers looking to enhance their web development skills. Let’s get started!

This article is the written step-by-step companion to our video tutorial, which you can find on YouTube at the following link: https://www.youtube.com/watch?v=Z3c7Y-Q5CuQ. For visual learners or those who prefer following along with video instruction, the video covers the same content and provides additional context and real-time demonstrations of each step in the process.

Table of Contents

• What You Will Learn
• When to Use Payload CMS with NextJS
• Understanding the Code Structure
• Costs and Infrastructure
• Comparing Payload CMS to WordPress
• Building Dynamic Pages
• Using the Old Pages Router
• Combining Repositories
• Plugins and Packages
• Cold Starts in Serverless Functions
• Live Preview Implementation
• SEO and Performance Optimization
• Conclusion
• FAQs

What You Will Learn

Throughout this series, we will cover several key topics to help you understand how to leverage Payload CMS with NextJS:

• An overview of using Payload CMS and NextJS together
• Building dynamic pages in Payload
• Auto-generating pages from collections
• Creating global components and managing global data
• Synchronizing the back end with the front end
• Implementing live previews
• Optimizing SEO and performance for your NextJS site

When to Use Payload CMS with NextJS

It's essential to understand the scenarios where using Payload CMS in combination with NextJS makes the most sense:

1. Building a Website

This is the most popular use case. If you’re looking to create a website, combining these two technologies is highly beneficial.

2. Internal Management Tools

For projects like CRM systems or support ticket management tools, Payload can be used standalone while integrating custom React components into its admin panel.

3. SaaS Products

If you want to build your own SaaS product, it’s advisable to have a separate front end that utilizes Payload as an API for the back end, allowing for custom layouts and designs.

In this series, we will focus primarily on building a website, as it represents the most common scenario.

Understanding the Code Structure

When working with Payload CMS and NextJS, we recommend using two separate repositories:

1. Back End: This will be your Payload CMS repository, which you can host on a server of your choice. We will be using Railway, but alternatives like AWS LightSail are also viable.
2. Front End: This will be your NextJS repository, which can be hosted on Vercel.

By separating these two components, you can take advantage of Vercel's features, such as:

• Global content delivery network for fast loading times
• Integrated DDoS protection
• Generous traffic limits
• Image optimization features

Costs and Infrastructure

The costs associated with hosting your back end and front end can vary based on the complexity of your project and the volume of editing traffic:

• Back end hosting costs will generally be between $4 to $10 per month.
• Your front end on Vercel can handle significant traffic without requiring extensive scaling.

Additionally, you will need:

• Object Storage: Free for the first 5GB on AWS
• Database: MongoDB Atlas, which has a great free plan
• Email Provider: Brivo, which allows sending up to 300 emails per day for free

Comparing Payload CMS to WordPress

One common question we often receive is whether Payload is similar to WordPress. The answer is nuanced:

While both are content management systems, the primary difference lies in their architecture:

• Payload is a Headless CMS: It does not generate any websites on its own. It serves as a hub for data, allowing developers to define collections and manage data effectively.
• No Visual Builder: Unlike WordPress, Payload does not offer a drag-and-drop editor. Instead, developers create templates in NextJS that will utilize data managed within Payload.

Building Dynamic Pages

To create a website using Payload and NextJS, you will need to build templates. These templates should include placeholder values that will be filled with actual data from the CMS during build time. Here’s how it works:

1. Create a template for a block article.
2. During the build process, NextJS retrieves all data from Payload.
3. NextJS fills in the template with the corresponding data for each article and generates static pages.

This approach allows you to efficiently manage content while ensuring that your front end is always up-to-date with the latest information.

Using the Old Pages Router

In this tutorial series, we will utilize the old pages router. While there’s a new app router available, we believe it's beneficial to stick with the familiar structure for now. This decision is made to ensure that the series remains accessible to those who have been using the pages router up until this point.

Combining Repositories

Although you can combine both the back end and front end into a single repository, we prefer to keep them separate. This separation allows for:

• Better utilization of Vercel’s platform and features
• Flexibility in managing additional functionalities within the Payload back end

Plugins and Packages

There are specific plugins and packages available for integrating Payload into a NextJS project. The most notable one is next-payload. However, we advise waiting for Payload version three, which will offer native NextJS support, thus avoiding potential issues and incompatibilities.

Cold Starts in Serverless Functions

When hosting your project on Vercel, be mindful of cold starts in serverless functions. Unlike traditional servers that run continuously, serverless functions spin up as needed. This means there may be a slight delay when accessing the admin panel, as Vercel initiates the function.

Live Preview Implementation

One of the most exciting features we’ll explore is implementing a live preview. This allows you to see how content entered into Payload appears on the front end in real time. This feature is invaluable for ensuring that your content looks exactly as intended before it goes live.

SEO and Performance Optimization

Finally, we will discuss SEO strategies and performance optimization for your NextJS site. Ensuring that your website is not only visually appealing but also optimized for search engines is crucial for attracting and retaining visitors.

Key SEO Strategies:

• Utilizing meta tags effectively
• Optimizing images and other media
• Implementing structured data
• Improving loading speeds

Conclusion

In summary, combining Payload CMS with NextJS offers a powerful solution for building dynamic websites. This series will guide you through the intricacies of setting up and optimizing your projects, ensuring you have a solid understanding of both technologies. Don't forget to check out the entire series on the YouTube playlist for more in-depth tutorials.

FAQs

1. What is Payload CMS?

Payload is a headless content management system that allows developers to manage content without generating a front end. It acts as a hub for data, enabling flexible content management.

2. How does NextJS differ from traditional frameworks?

NextJS is a React framework that enables server-side rendering and static site generation, providing better performance and SEO capabilities compared to traditional single-page applications.

3. Can I use Payload CMS without NextJS?

Yes, Payload can be used independently, but you will miss out on the dynamic capabilities and optimized performance that NextJS offers.

4. What are serverless functions, and how do they work?

Serverless functions allow you to run backend code without managing servers. They spin up on demand, which can lead to cold starts but also provide scalability and flexibility.

5. Is there a cost associated with using Payload CMS?

While Payload itself may have costs associated with hosting, it offers a free tier for development and small projects, making it accessible for many users.

Stay tuned for the next part of the series, where we will dive into building dynamic pages in Payload and integrating them into your NextJS front end!