Payload NextJS: A Comprehensive Walkthrough of Version 3 Beta

Welcome to our deep dive into the exciting features of Payload NextJS version 3 beta! This article will explore the most important updates and functionalities that make this release a game changer for developers. If you are looking to build a simple blog website powered by Payload CMS and Next.js, you’re in the right place.

This article provides a detailed written companion to our step-by-step video tutorial available on YouTube at https://www.youtube.com/watch?v=onWyka_6AD0. If you're a visual learner or prefer following along with demonstrations, the video covers identical content while offering additional context and real-time examples of implementing Payload CMS V3 Beta with Next.js. Both resources will guide you through the complete process of building a modern blog application.

Table of Contents

• Introduction to Payload NextJS Version 3
• Setting Up Your First Project
• Configuring Your MongoDB URI
• Integrating Tailwind CSS
• Installing Tailwind CSS
• Hot Module Reloading: A Developer's Delight
• React Server Components
• Creating a Block Articles Collection
• Building Your Homepage
• Deploying Your Project on Vercel
• Conclusion
• FAQs

Introduction to Payload NextJS Version 3

The latest iteration of Payload CMS has shifted from version 2 to version 3, marking a significant transformation. The most notable change is that Payload is now a native Next.js application. This means that it utilizes features like the app router and Next.js route handlers, making integration seamless and efficient.

With this new version, you can set up a project effortlessly. Let’s walk through the process of creating a new blog powered by Payload CMS and Next.js.

Setting Up Your First Project

To get started, navigate to your terminal and enter the folder where you want to create your project. Use the command:

npx create payload app@beta

Upon executing this command, you will be prompted to name your project. For this example, we will call it my first blog. Currently, only a blank template is available, but once Payload reaches its stable release, more templates like e-commerce and blog templates will be added.

For the database, we will select MongoDB, opting for a local database for now. After this, wait for the dependencies to be installed. Once completed, navigate into your new project folder:

cd my-first-blog

Configuring Your MongoDB URI

Before proceeding, it’s essential to replace your local MongoDB URI with a MongoDB Atlas server URL for deployment later. This setup ensures that your deployed version can access the database correctly.

Now you have a standard Next.js project with Payload initialized. The beauty of this architecture is that both the frontend and backend are housed within the same repository, simplifying the development process.

Integrating Tailwind CSS

One of the standout features of Payload NextJS is the ease of setting up Tailwind CSS. In version 2.0, this integration required a bit of work, but in version 3, it's straightforward. Let’s create a custom component and style it using Tailwind CSS.

Create a new folder called components and add a file named TestComponent.jsx. In this component, you can style it with Tailwind CSS classes:

className="bg-green-500 p-4 text-green-100"

Next, add this component to your user configuration as a UI field. After starting your server with:

npm run dev

you should be able to see your component, although it may not be styled yet. Let’s fix that by installing Tailwind CSS.

Installing Tailwind CSS

To install Tailwind CSS, follow the installation guide for Next.js. Copy the command from the guide and paste it into your terminal. After installation, some adjustments are necessary:

• Rename the PostCSS file from .js to .cjs.
• Do the same for the Tailwind configuration file.
• Replace export default with module.exports = in both files.

Next, you need to adjust your content in the tailwind.config.js file and create a global.css file to include your Tailwind imports.

Hot Module Reloading: A Developer's Delight

One of the most significant improvements in version 3 is hot module reloading. In the previous version, any changes made to the Payload configuration required a server restart, which could take anywhere from ten to fifty seconds.

With version 3, you can edit your configuration in real-time. For example, adding a new field to your users' collection is instantaneous. If you save your changes, you will see them reflected immediately without needing to reload the page.

React Server Components

Another exciting feature in version 3 is the introduction of React Server Components. By default, all custom components are server components, which means they can fetch data directly from Payload or any third-party API.

To demonstrate this, you can convert your component into an async function. This allows you to fetch data directly within your component:

const users = await payload.findCollection('users');

Using this approach, you can map through the users and display their emails without any loading time or layout shifts, providing a smoother user experience.

Creating a Block Articles Collection

Let’s create another collection called block articles. This collection will have fields for title and description. Adding this to your configuration is simple:

fields: [{name: 'title', type: 'text'}, {name: 'description', type: 'textarea'}]

Once added, the collection appears immediately without needing to restart anything. This instant feedback loop makes development much more efficient.

Building Your Homepage

Now that we have our articles set up, let’s create a simple homepage. You can do this by creating a page.jsx file in your app router folder. Add a hero section that welcomes users to your blog:

Welcome to my blog

Next, you can create a component to display the most recent three block articles. Again, since this is a server component, you can fetch the articles directly:

const blockPosts = await payload.findCollection('block articles');

Map through the articles and display the title and description. This way, you can present content directly from your database without the need for REST queries.

Deploying Your Project on Vercel

Once your project is ready, deploying it on Vercel is a breeze. Link your local repository to Vercel and push your changes. After configuring your environment variables, including the database URI and Payload secret, you can initiate the deployment.

Upon successful deployment, your blog will be live, and you can access the admin panel. Note that the first time you open the admin panel, it may take a few seconds to load due to cold starts, but subsequent loads will be much faster.

Conclusion

In summary, the transition to Payload NextJS version 3 offers a plethora of enhancements that simplify the development process. From seamless integration with Tailwind CSS to real-time configuration updates and the power of React Server Components, this version is designed to optimize your workflow.

Whether you're building a simple blog or a more complex application, Payload NextJS provides the tools you need to succeed. For more technical details, be sure to check out the official videos linked in the description.

FAQs

What is Payload NextJS?

Payload NextJS is a content management system (CMS) built on Next.js, allowing developers to create and manage websites easily.

How can I set up Tailwind CSS with Payload NextJS?

Setting up Tailwind CSS involves installing it via npm and configuring your PostCSS and Tailwind configuration files. The process has been simplified in version 3.

What are React Server Components?

React Server Components allow developers to fetch data directly in their components without requiring client-side rendering, improving performance and user experience.

How do I deploy my Payload NextJS project?

You can deploy your project on Vercel by linking your local repository, pushing your changes, and configuring your environment variables before initiating the deployment.

For any further questions or topics you'd like us to cover, feel free to leave your comments below. Happy coding!