Beyond Static: Transforming Client Websites with Payload

We've all been there: building a 'simple' website that quickly outgrows its static shell. That's exactly what I faced with my latest client, a business helping Jamaican students study in European universities.

They needed a nice online presence, and while a basic static site with HTML, CSS, and a touch of JavaScript would have been quick, I knew it wouldn't be enough.

Knowing the client personally, I anticipated their need to regularly update content and add new information. A static site would have soon become a bottleneck. This meant I needed a dynamic solution, something that offered the flexibility of a Content Management System (CMS) without the usual complexities.

I wanted to provide a solution that was both straightforward and scalable, setting the stage for their online presence to grow alongside their business.

Now, WordPress as a headless CMS? I was really hesitant about that whole separate server thing. I wanted something more bespoke, but not so custom that it'd turn into a maintenance nightmare.

Then I stumbled upon Payload CMS 3.0, and man, I'm hooked. They've been around, but now they're playing nice with Vercel and Next.js, and honestly, that's where the magic happens. I know, I know, "Vercel" might set off some alarms, and Next.js sounds like a lock-in, but trust me, it's not that deep.

The upside of using a totally open-source Next.js headless CMS/backend for small websites? It's huge! It outweighs any tiny worry about hosting. I mean, the client couldn't care less what tech I used, as long as it worked, and this setup? It just works.

So let’s get cracking a quick setup. You can run the following command follow the walkthrough in the terminal/console and boom!

You’re done!

npx create-payload-app

Your directory will look something like this when you open the project:

Alright, let's take a quick peek inside a typical Payload CMS project. This screenshot shows the directory structure, and it's pretty straightforward.

• app (Frontend): This folder houses your Next.js frontend. You'll find your page layouts (layout.tsx), individual pages (page.tsx), and styling (styles.css) here. This is where your website's user interface lives.

• (payload): This is the heart of your Payload CMS backend.

  • admin: Contains the admin panel interface, allowing you to manage your content.

  • api: Holds your API routes and custom configurations. You'll find your custom SCSS (custom.scss) for styling the admin panel and the layout (layout.tsx) for the admin panel here.

  • my-route: An example of a custom route you might add.

  • collections: This is where you define your data models (like 'Media' and 'Users' in this case). These are the blueprints for your content.

  • payload.config.ts: The main configuration file for your Payload CMS instance.

  • payload-types.ts: Automatically generated TypeScript types based on your collections and configurations.

• Other Files: You'll also see standard project files like package.json, tsconfig.json, .env, .gitignore, and others, which are common in Next.js and Node.js projects.

In a nutshell, Payload keeps your frontend and backend neatly separated, with the (payload) directory handling all the CMS logic and the app directory for your website's presentation.

So, getting back to this client project, the real backbone of Payload CMS, for me, was its collections. Think of them as your entities or database tables. In my case, I had a 'Universities' collection. Payload handled everything – database connections, migrations, the whole typing thing. It was a breeze.

I just added all the fields I needed: name, location, description, images, you name it. How those fields looked and behaved depended on the data type I chose. It was super intuitive.

A university looked like this:

Payload uses Lexical as their text editor, and even that's customizable! Seriously, I could rave about Payload and their awesome creation forever, but we'd be here all day. The main takeaway is: it's insanely customizable. I used it as a CMS, but they market themselves as a Next.js backend, which is totally fair. It's really up to you how you want to use it.

If you want to dive deeper, their documentation is your best friend. Trust me, it's worth checking out.

The Admin

Now, let's talk about how my client interacts with the website's content. This is where Payload's admin panel shines. Remember the admin folder we saw earlier? That's where the magic happens.

Payload automatically generates a user-friendly admin interface based on the collections you define. So, for my client's 'Universities' collection, they get a clean dashboard where they can easily:

• Add new universities: Complete with names, locations, descriptions, and images.

• Edit existing entries: Updating information as needed.

• Upload and manage images: All within the same interface.

• Organize content: Thanks to Payload's intuitive content management features.

The best part? The client doesn't need to touch any code or databases. They simply log in to the admin panel and manage their content with ease. This empowers them to keep their website fresh and up-to-date without needing my help for every little change.

It's a win-win: I have less ongoing maintenance, and the client has full control over their content. Talk about a happy client!

Conclusion

So, there you have it! That's how I used Payload CMS to transform a static website into a dynamic, easily-managed platform, all within a single, streamlined application. No more separate servers or complex setups.

Payload's flexibility and intuitive interface made the process a breeze, allowing me to focus on crafting a great user experience for my client. And the best part? The client is thrilled with the end result, a website that's both visually appealing and easy for them to update.

If you're looking for a powerful, yet simple way to add a backend to your static websites, I highly recommend giving Payload CMS a try. It's a game-changer for small-scale projects like this one.

Check out the live website here: https://globalstudiesint.com/