Launch Week - Day 1

Published On
Launch Week Day 1 - New WebsiteLaunch Week Day 1 - New Website
Launch Week Day 1 - New WebsiteLaunch Week Day 1 - New Website

Well, we did it. 20 days ago, the Payload team set off to build a new website on Next 13's new app folder. Now it's live and open-source so you can see how Payload makes use of Payload.

Today is the first day of a new tradition for Payload—Launch Week. We're going to do one launch week per quarter, and they are going to put a spotlight on all of the work that the Payload team and its community have poured into making Payload as powerful as it possibly can be.

To commemorate the first day of our first-ever Launch Week, we're releasing our new website. 20 days ago, we started building it in public on NextJS' new /app folder and now it's done. It was a mad sprint, and we actually built most of the site while the team was out in SF for the Jamstack Conf, but we want to keep the momentum going. We knew that we needed to move quickly through the new site so we can get back to building Payload features.

Payload CMS Website

The CMS showcases lots of powerful Payload features, including:

  • How to structure collections and share field schemas between them
  • How to set up a menu and footer structure using Globals and fetch them efficiently for use on the frontend
  • How to build with a highly designed layout builder using the Blocks field
  • Versions and Drafts functionality
  • Access control to manage who can do what with our CMS
  • SEO handled by the Payload SEO plugin
  • Forms, controlled in the CMS via the Form Builder plugin
  • Nested docs, as seen in pages like our Use Cases
  • Auto-generated types which are generated in the CMS and then used in the Next frontend
  • Much more

We also decided to go all out on Next 13, including:

  • Full usage of the new /app folder
  • Nested layouts as seen in our Docs
  • Server components to fetch data using Payload's GraphQL API
  • The next/font package to efficiently load webfonts
  • Full use of the next/image component
  • Statically rendered and blazingly fast pages throughout

The Payload team is pumped about the new Next features and was happy to take on a project using them. We figure - we're in control of our site, and it's not for a client, so why not? We've been as active as possible in helping contribute our findings and experience to Next as we use the new features.

Getting ready for Payload Cloud

Rebuilding our site was the first step toward getting ready for Payload Cloud. The entire UX of Payload Cloud will be built into our public website, and will be open-sourced. And now that we've got a new site infrastructure in place, we'll be able to build out the interface for Cloud seamlessly into the site itself.

What is Payload Cloud?

Payload Cloud is our solution to the problem of how hard it is to deploy a CMS, even in today's web where there are a ton of hosting platforms to choose from. The problem isn't lack of hosting platforms—the problem lies in the complexity of having to manually go out and sign up for a variety of different services and then wire them all together. And that can get expensive.

To host a CMS, you need to provision for 4 distinct concerns:

  • Database (MongoDB Atlas, generally)
  • Permanent file storage (S3 or similar)
  • API layer (Vercel / Netlify are obviously great)
  • CI and blue / green deployments

You can manually hook up all of these vendors and then plumb them all together, but in the end, you'll be paying quite a bit. And you'll have had your dev ops hat on for a bit too long. Instead, we're going to deliver on all of this, in one fell swoop, just by connecting your GitHub repo and then watching it deploy.

What's next for Launch Week?

Each day this week, we'll be making exciting announcements and shining a spotlight on the features we've been building over the past few months. There's a ton in store for the next few days. Keep an eye out!

Get up and running with one line

Getting started is easy—and free forever. Just fire up a new terminal window and run the following command:

1
npx create-payload-app