Building Cloud Functions as Services for Firestore in Firebase In the world of serverless development, Firebase has revolutionized how we build scalable apps with its seamless integration of authentication, real-time databases, and hosting. At the heart of many Firebase projects lies Firestore, a NoSQL document database that excels at handling structured data with real-time synchronization.… Continue reading Building Cloud Functions as Services for Firestore in Firebase
Category: 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?
DocumentReference in Firebase / Nextjs
What is it? A DocumentReference is a Firestore object that points to a specific document in a collection, like /users/abc123. It’s used to link related documents instead of duplicating data, keeping things consistent and storage-efficient. How it’s created? We use the doc() function from firebase/firestore, e.g., doc(db, ‘collectionName’, ‘documentId’). Why use it? It enables relational… Continue reading DocumentReference in Firebase / Nextjs
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
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
Blazing Fast Sites with Next.js 14: What’s New and How to Use It
1. Turbopack Now Production-Ready Turbopack, the Webpack replacement introduced in Next.js 13, is now officially stable. Built in Rust, it offers 10x faster local dev builds and instant HMR (Hot Module Replacement) feedback. Why it matters: No more waiting around during dev builds Better DX when working with large codebases Ideal for monorepos using tools… Continue reading Blazing Fast Sites with Next.js 14: What’s New and How to Use It
Fixing the Off-By-One Day Date Issue in React Due to Timezone Shifts
When working with date pickers in web applications, especially in form-based interfaces, developers often encounter a common and frustrating issue: a date that was selected by the user appears one day earlier when reloaded in an edit form. This article explores how we resolved this issue in a React application using react-datepicker, and what you… Continue reading Fixing the Off-By-One Day Date Issue in React Due to Timezone Shifts
What is Payload GraphQL?
Payload GraphQL refers to the GraphQL API provided by Payload, a headless CMS and application framework built with TypeScript, Node.js, React, and MongoDB. Unlike traditional CMS platforms, Payload is code-based and developer-centric, offering a powerful backend that can be extended to power various applications. Its GraphQL API is one of three ways (alongside REST and… Continue reading What is Payload GraphQL?