1. jspdf This is the core library that lets you generate PDFs in the browser (client-side). Key Features: Create PDF documents directly in the browser (no backend needed). Supports text, images, lines, rectangles, circles etc. Add fonts, font sizes, colors. Insert images (PNG, JPEG, WebP). Multiple pages: auto-create new pages when text overflows. Orientation &… Continue reading The core library for generate PDFs in the browser
Tag: next js
DevOps CI/CD?
CI/CD stands for Continuous Integration and Continuous Deployment (or sometimes Continuous Delivery). It’s a set of practices and tools used to automate the process of building, testing, and deploying your code, making development faster and more reliable Continuous Integration (CI): This is about frequently merging your code changes into a shared repository (e.g., GitHub). Each… Continue reading DevOps CI/CD?
How to Build a Forum App with NextJs and Strapi CMS
Prerequisites Node.js installed Knowledge of NextJs To set up our Strapi back-end, we will first create a directory for our project: 1 mkdir forumapp This creates a folder for our project strapi-forum. Next, we move into this folder: 1 cd forumapp Then we install Strapi: npm create strapi-app forum-backend –quickstart The command above sets up… Continue reading How to Build a Forum App with NextJs and Strapi CMS
Implementing Interactive Zoom Functionality in a React Image Gallery
Introduction In modern web applications, providing an interactive and intuitive user experience is paramount, especially for image-heavy interfaces like galleries or product showcases. One powerful feature to enhance user interaction is zoom functionality, allowing users to closely inspect image details. This article explores the implementation of a zoom feature within a React-based image gallery component,… Continue reading Implementing Interactive Zoom Functionality in a React Image Gallery
Server Actions and React Server Components: Rethinking State in Next.js
Next.js supports React Server Components (RSC) and Server Actions, enabling a shift from client-heavy interactivity to server-driven rendering and logic. Key Topics: What are React Server Components (RSC)? How Server Actions replace client-side mutations Form submissions without client-side JavaScript Pros and cons: performance vs flexibility Ideal Audience: Advanced React/Next.js develop With the release of Next.js… Continue reading Server Actions and React Server Components: Rethinking State in Next.js
Authentication in Next.js 14 Using NextAuth.js and Middleware
Managing authentication in Next.js can be complex. This guide shows how to integrate NextAuth.js with the App Router, securing both pages and API routes using middleware. Key Topics: Setting up NextAuth.js with credentials or OAuth providers Using middleware for route protection (middleware.ts) Token management with JWT sessions UI-based login flows with React and TailwindCSS Ideal… Continue reading Authentication in Next.js 14 Using NextAuth.js and Middleware
Building Scalable APIs with Next.js App Router
Next.js has revolutionized modern web development by blending the best of server–side and client–side rendering. One of the most significant changes introduced with the App Router is the transformation of how API routes are defined, structured, and deployed. With Next.js 14, developers can now build robust, RESTful, and scalable APIs directly inside the /app directory,… Continue reading Building Scalable APIs with Next.js App Router
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
Payload 3.0
The much-anticipated Payload 3.0 has officially arrived, marking a significant milestone in the evolution of this powerful headless CMS. This major release brings revolutionary changes that promise to transform how developers build and deploy content-driven applications. However, with great power comes great responsibility – and some important considerations for deployment. The Dawn of a New… Continue reading Payload 3.0
The Importance of Code Splitting in Next.js
Code splitting is important in Next.js because: Code splitting allows Next.js to break your application into smaller chunks. Instead of loading the entire application at once, only the necessary code for the current page or component is loaded. By splitting the code, your application’s overall bundle size is reduced. This is particularly beneficial for users… Continue reading The Importance of Code Splitting in Next.js