Welcome

🌐 How to Point a GoDaddy Subdomain to Your VPS (With Nginx + SSL) Hosting your app on a VPS is a great step toward full control and performance. If you’ve already deployed your app (like a Next.js app ) on a VPS and want to connect it to a subdomain like abhinav.rohatech.site , here’s a complete guide to help you get it done. 🔧 Step 1: Add a Subdomain in GoDaddy DNS Log in to GoDaddy and go to your domain dashboard (e.g., rohatech.site ). Click DNS or "Manage DNS". Scroll down and click Add under DNS Records. Add the following A record: Type Name Value TTL A abhinav Your VPS IP address 1 Hour This points abhinav.rohatech.site to your VPS server. 🖥️ Step 2: Configure Nginx on Your VPS SSH into your VPS server and create a new Nginx configuration file for your subdomain: nano /etc/nginx/conf.d/abhinav.rohatech.site.conf Paste the following Nginx con...

🚀 How to Deploy a Next.js SSR App on MilesWeb VPS (AlmaLinux 8.10) If you're building a Next.js SSR (Server-Side Rendering) app and want to host it on your MilesWeb VPS with AlmaLinux 8.10 , this guide is all you need. Follow these clear steps to get your project live and production-ready. 🛠️ Prerequisites VPS with AlmaLinux 8.10 (MilesWeb) Root or sudo access to the server Your Next.js project (with app/page.js structure) Domain (optional but recommended) 🔐 Step 1: Connect to Your Server ssh root@your-server-ip Update your system: dnf update -y 📦 Step 2: Install Node.js and Git Install Node.js LTS (e.g., v18): curl -fsSL https://rpm.nodesource.com/setup_18.x | bash - dnf install -y nodejs Check versions: node -v npm -v Install Git if needed: dnf install git -y 📁 Step 3: Upload or Clone Your Project Option 1: Clone from GitHub cd /var/www git clone https://github.com/your-repo.git my-next-app cd my-next-app Option 2: Upload fr...

Next.js Pages Router vs App Router Next.js Pages Router vs App Router Next.js provides two routing and data-fetching strategies: Pages Router (pages/) and App Router (app/). Each has its own way of handling Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR). Comparison Table Feature Pages Router (pages/) App Router (app/) SSR (Server-Side Rendering) getServerSideProps fetch() with cache: "no-store" SSG (Static Site Generation) getStaticProps fetch() with cache: "force-cache" ISR (Incremental Static Regeneration) getStaticProps + revalidate: X fetch() with { next: { revalidate: X } } Client-Side Rendering (CSR) ...

Understanding Data Fetching in Next.js: CSR, SSR, SSG, and ISR with Axios & WebSockets Next.js provides multiple ways to fetch data from an API: CSR (Client-Side Rendering), SSR (Server-Side Rendering), SSG (Static Site Generation), and ISR (Incremental Static Regeneration). Each method serves a different purpose, affecting performance, SEO, and user experience. In this guide, we will explore how to use Axios for API requests and integrate WebSockets for real-time updates. 🔹 1. CSR (Client-Side Rendering) - Fetch Data with Axios CSR means fetching data on the client side, after the component mounts. The data is NOT available during the initial page load. ✅ When to Use CSR? For real-time updates (e.g., chat apps, stock prices). When SEO is not a priority (search engines see an empty page first). For highly interactive applications . 📌 Example: Fetching Data with Axios in CSR import { useEffect, useState } from 'react'; import axios fro...

Server-Side Hooks and Custom Hooks in React Server-Side Hooks and Custom Hooks in React In this final blog, we’ll cover server-side hooks, such as useId , useDeferredValue , and useSyncExternalStore , and also discuss custom hooks. 1. useId What is it? useId is used to generate unique IDs for elements, especially for accessibility purposes, like labeling form inputs. Real-Life Example: Automatically generating unique IDs for form fields. import React, { useId } from 'react'; function Form() { const id = useId(); return ( <form> <label htmlFor={id}>Enter your name</label> <input id={id} type="text" /> </form> ); } 2. useDeferredValue What is it? useDeferredValue allows you to defer updates to a value until later, which can improve performance for non-urgent state updates. Real-Life Example: You can use this to delay the rendering of certain UI...

Managing Refs and Layout in React Managing Refs and Layout in React In this blog, we’ll explore hooks that help manage direct DOM manipulations, access mutable values, and control layout-related logic in React. Let’s look at useRef , useImperativeHandle , and useLayoutEffect . 1. useRef What is it? useRef gives you a way to persist values across renders without triggering re-renders. Real-Life Example: You can use useRef to focus on an input field without causing a re-render. import React, { useRef } from 'react'; function FocusInput() { const inputRef = useRef(null); return ( <div> <input ref={inputRef} type="text" /> <button onClick={() => inputRef.current.focus()}>Focus Input</button> </div> ); } 2. useImperativeHandle What is it? useImperativeHandle allows you to modify the instance values that are accessible by parent components using ref ...

Advanced React Hooks: useReducer, useCallback, and useMemo Advanced React Hooks: useReducer, useCallback, and useMemo In this blog, we will explore advanced React hooks that allow you to handle complex state logic, optimize performance, and manage expensive calculations. 1. useReducer What is it? useReducer is similar to useState , but it’s better suited for complex state logic, like when there are multiple state transitions or actions. Real-Life Example: Imagine a simple counter with multiple actions: increment, decrement, and reset. import React, { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; case 'reset': return { count: 0 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(re...