Monolith to Microservices: Building an Application

Introduction I built a Formula 1 application to manage Teams, Tracks, Drivers, and Races, starting as a monolithic Next.js + Payload CMS app. As my needs grew, I transitioned to a microservices architecture for better scalability, modularity, and autonomy. This article details my process—folder structure, code changes, challenges, and deployment—using my F1 app as an… Continue reading Monolith to Microservices: Building an Application

React Error Boundaries

Error boundaries are special React components that catch JavaScript errors in their child component tree, log them, and display a fallback UI instead of crashing the whole app. Why Use Error Boundaries? React components can crash due to bugs or unexpected data. Without error boundaries, a single component error could take down your entire app.… Continue reading React Error Boundaries

Using useRouter for Conditional Rendering in Next.js

The useRouter hook from Next.js allows you to access route info inside your components. You can use it for conditional rendering based on the current route. Why Use useRouter? Sometimes, you want to hide/show content depending on the route—like hiding a header on the login page import { useRouter } from ‘next/router’; export default function… Continue reading Using useRouter for Conditional Rendering in Next.js

Restricting Page Access with Middleware in Payload CMS

Payload CMS allows you to use middleware to control access to certain routes or pages. Why Use Middleware? To restrict frontend or admin page access based on authentication or roles, without manually adding logic inside every component or route. Example import { NextFunction, Request, Response } from ‘express’; export const restrictPageAccess = (req: Request, res:… Continue reading Restricting Page Access with Middleware in Payload CMS

Creating Public APIs Without Login in Payload CMS

You can expose APIs in Payload CMS without requiring authentication by adjusting access control in collections or using middleware. Why Do This? Useful for public-facing endpoints like blogs, events, or product listings where login is not needed. Collection Config access: {   read: () => true, }, Custom Middleware export const allowPublicAPI = (req, res,… Continue reading Creating Public APIs Without Login in Payload CMS

Implementing Multi-Tenancy in Payload CMS

Multi-tenancy in Payload CMS allows managing multiple tenants (clients, organizations) within a single CMS instance. Setting Up Multi-Tenancy Define a tenant field to associate content with different tenants: const Posts = {  slug: ‘posts’,  fields: [   { name: ‘tenant’, type: ‘text’, required: true },   { name: ‘title’, type: ‘text’, required: true },  ],  access: {… Continue reading Implementing Multi-Tenancy in Payload CMS

Custom Field Types in Payload CMS

Payload CMS allows the creation of custom field types to meet specific project requirements beyond the built-in options. Creating a Custom Field Type A custom field can be created by defining a new field type in the collection schema: const CustomField = {   name: ‘customText’,   type: ‘text’,   admin: {     placeholder:… Continue reading Custom Field Types in Payload CMS

Version Control in Payload CMS

Version control in Payload CMS allows you to track changes made to content over time, enabling content rollback, auditing, and better collaboration. This feature ensures that previous versions of content can be restored if needed. Implementing Version Control Payload CMS provides built-in versioning that can be enabled at the collection level: const Posts = {… Continue reading Version Control in Payload CMS

Setting Up Webhooks in Payload CMS

Webhooks in Payload CMS allow real-time updates by triggering external APIs when content changes. This is useful for automating tasks such as cache invalidation, sending notifications, or syncing data with external systems. Defining a Webhook Add a webhook in payload.config.js: webhooks: [   {     event: “afterChange”,     collection: “posts”,     url:… Continue reading Setting Up Webhooks in Payload CMS