import { NextRequest, NextResponse } from “next/server”; const LOGIN_COOKIE_NAME = “payload-token”; export function middleware(request: NextRequest) { const { pathname } = request.nextUrl; // Allow static files and API routes to pass through if ( pathname.startsWith(‘/_next/’) || pathname.startsWith(‘/static/’) ||… Continue reading Middleware for Next Js application(payload cms 3.0)
Tag: next js
Next.js and Payload: A Powerful Combination
Next.js and Payload are two powerful tools that can be used together to build modern, efficient, and scalable web applications. Next.js Next.js is a React framework that simplifies the development of web applications. It offers features like: Server-Side Rendering (SSR): Improves SEO and initial page load performance. Static Site Generation (SSG): Optimizes website speed and… Continue reading Next.js and Payload: A Powerful Combination
Integrating GraphQL Payloads into Existing REST API Infrastructures
With the increasing popularity of GraphQL, we, developers are exploring ways to integrate it with existing REST-based backends. GraphQL offers clients the ability to request specific data in a single query, enhancing efficiency and reducing the number of API calls. In this article, we’ll cover key differences between GraphQL and REST payloads, approaches to integrate… Continue reading Integrating GraphQL Payloads into Existing REST API Infrastructures
Cross-Origin Resource Sharing (CORS) Errors
Error: CORS (Cross-Origin Resource Sharing) errors occur when a web application running in one domain tries to make a request to a resource (like an API) on a different domain. For example, if a client application hosted on https://myfrontend.com tries to fetch data from https://myapi.com, the browser might block this request if https://myapi.com hasn’t explicitly… Continue reading Cross-Origin Resource Sharing (CORS) Errors
Implementing Access Control in Payload CMS
Payload CMS provides robust access control features that allow you to define permissions at a granular level. With custom access controls, you can limit access to collections, fields, and individual documents based on user roles or other conditions. This guide will walk through setting up access control in Payload CMS, from basic role permissions to… Continue reading Implementing Access Control in Payload CMS
Adding Validation Rules in Payload CMS Fields
Introduction Field validation is crucial to ensure data quality and integrity in Payload CMS. By configuring validation rules, you can enforce requirements on fields, such as length, format, and uniqueness. 1. Adding Validation to Fields Each field type in Payload CMS has built-in options for validation. Let’s explore some examples of adding validation rules to… Continue reading Adding Validation Rules in Payload CMS Fields
TypeScript Generics in Custom React Hooks
In custom hooks, TypeScript generics allow you to define flexible data types at runtime, enabling a single hook to work with various data structures. Generics are ideal for hooks that perform similar operations on different types of data, like fetching various API data or managing states of diverse data models. What Are Generics? In TypeScript,… Continue reading TypeScript Generics in Custom React Hooks
Lazy Loading Components in Next.js
In Next.js, lazy loading (also known as code splitting) allows you to load components or images only when they are needed, which can significantly improve performance, especially for larger applications. Lazy Loading Components in Next.js You can lazy load components using React.lazy() or Next.js’s dynamic() function. 1. Using React.lazy(): React’s lazy() function allows you to… Continue reading Lazy Loading Components in Next.js
Image Placeholder (Blur Effect) and Optimize Images for SEO using Next.js
Image Placeholder (Blur Effect) Next.js supports placeholders for images, like a blur effect, while they are loading. import Image from ‘next/image’; const BlurredImage = () => ( <Image src=”/images/high-res-image.jpg” alt=”Blurred Image” width={800} height={600} placeholder=”blur” // Enable blur placeholder blurDataURL=”/images/low-res-blur-image.jpg” // Low-res image or base64 string /> ); export default BlurredImage; 8. Optimize Images for SEO… Continue reading Image Placeholder (Blur Effect) and Optimize Images for SEO using Next.js
Basic usage of the “Image” tag and Advantage using “Image” tag on Next.js
1.Basic Usage of the <Image> Component The <Image> component in Next.js requires src, width, height, and alt attributes. Here’s a simple example: import Image from ‘next/image’; const HomePage = () => ( <div> <Image src=”/images/my-image.jpg” // Path to your image alt=”Description of image” // Important for accessibility and SEO width={500} // Specify width height={300} //… Continue reading Basic usage of the “Image” tag and Advantage using “Image” tag on Next.js