DEV Community: Yogesh Chavan

HireHub: Launch Your Own Job Board And Hiring Platform Without Spending Months on Development

Yogesh Chavan — Sat, 20 Jun 2026 09:00:51 +0000

Finding the right talent and helping job seekers discover opportunities shouldn't require building a complex platform from scratch.

That's exactly why I built HireHub — a complete, production-ready job board and hiring platform designed for entrepreneurs, startups, recruitment agencies, communities, and businesses looking to launch their own hiring marketplace quickly.

I have built many such products, which you can check out on my Portfolio page.

Why Build a Job Board?

The online recruitment industry continues to grow as companies increasingly rely on digital hiring solutions. Businesses need efficient ways to attract talent, while job seekers expect modern search experiences, streamlined applications, and personalized recommendations.

Building such a platform from scratch can take months of development, testing, and refinement.

HireHub eliminates that challenge.

Meet HireHub

HireHub is a modern multi-role job board platform that provides dedicated experiences for:

Job Seekers
Employers
Administrators

Everything is designed to deliver a seamless hiring experience from job posting to candidate selection.

Try it out for FREE

Check out the application demo using the Watch Demo button in the header

Features for Job Seekers

Advanced Job Search

Help users find relevant opportunities quickly with powerful filtering options:

Search by job title
Filter by location
Job type - part-time, full-time
Employment type filters

One-Click Applications

Candidates can apply for jobs effortlessly using their profile information, resume, and cover note in a single click.

AI-Powered Experience

Candidate can upload their resume, and AI will extract all the details from the resume and fill out the application details like personal info, skills, education, experience, and more.

Personalized Dashboard

Job seekers can:

Track applications
Save jobs
Manage profiles
Upload resumes
View application history

Features for Employers

Create and Manage Job Listings

Employers can:

Post jobs
Edit listings
Close positions
Track applications

Applicant Management

Review and manage candidates through a clean dashboard designed to simplify the hiring process.

Company Profiles

Allow organizations to showcase:

Company information
Branding
Open positions
Hiring details

Recruitment Workflow

Streamline hiring operations from job creation to candidate selection.

Modern Technology Stack

HireHub is built using modern web technologies to ensure performance, scalability, and maintainability.

Technologies Used - Next.js 16, Shadcn/UI, Tailwind CSS, PostgreSQL database with Drizzle ORM.

Benefits include:

In-built SEO support
Fast page loads
Responsive design
Mobile-friendly experience
Modern UI/UX
Scalable architecture

Who Can Use HireHub?

HireHub is ideal for:

Recruitment Agencies
HR Consultancies
Startup Founders
Community Builders
Niche Job Boards
Freelance Marketplaces
Industry-Specific Hiring Platforms
Educational Institutions
Corporate Hiring Portals

Whether you're targeting tech jobs, healthcare roles, remote work opportunities, or industry-specific hiring, HireHub provides a solid foundation.

Save Months of Development Time

Instead of spending months building:

Authentication
User management
Employer dashboards
Job management systems
Candidate tracking
Admin panels
Search functionality

You can launch with a proven platform and focus on growing your business.

Customization Available

Need additional features?

The platform can be customized to fit your specific business requirements, including:

Custom branding
Additional user roles
Payment integrations
Subscription plans
Premium job listings
Advanced analytics
Custom workflows

Ready to Launch Your Own Job Board?

HireHub gives you everything you need to launch a professional hiring platform quickly and efficiently.

Whether you're building a niche recruitment marketplace, a startup hiring portal, or a large-scale job board, HireHub provides the foundation to get started immediately.

Live Demo

https://hirehub.yogeshchavan.dev

Interested in Purchasing or Customizing HireHub?

Get in touch to discuss customization and feature requirements.

Launch faster. Hire smarter. Grow your recruitment business with HireHub.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

Alongside building real-world web applications, I'm also an Industry/Corporate Trainer, training developers and teams in modern JavaScript, Next.js, and MERN stack technologies with a focus on practical, production-ready skills.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

Cypress Testing: Complete Beginner's Guide

Yogesh Chavan — Sat, 06 Jun 2026 06:51:34 +0000

Section 1: Getting Started with Cypress

1. Installing and Setting Up Cypress

Prerequisites

Before installing Cypress, ensure you have Node.js installed on your machine. Cypress requires Node.js 18.x or 20.x and above. You should also have an existing React project or create a new one.

Check your Node.js version by running this command in your terminal:

node --version
# Should output v18.x.x or higher

Creating a React Project (Optional)

If you don't have an existing React project, create one using Vite which is the recommended approach for new React projects:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Installing Cypress

Navigate to your React project directory and install Cypress as a development dependency. Cypress is a fairly large package, so the installation might take a minute or two:

npm install cypress --save-dev

# Or using yarn
yarn add cypress --dev

Opening Cypress for the First Time

After installation, open Cypress for the first time. This will create the initial folder structure and configuration files:

npx cypress open

When Cypress opens for the first time, you'll see a welcome screen where you can choose between E2E Testing and Component Testing. Select E2E Testing to get started with end-to-end tests.

Cypress will then prompt you to choose a browser. You can select Chrome, Firefox, Edge, or Electron. Choose your preferred browser and click Start E2E Testing in [Browser].

Adding NPM Scripts

Add convenient scripts to your package.json for running Cypress tests:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "test:e2e": "start-server-and-test dev http://localhost:5173 cy:run"
  }
}

Tip: Use npm run cy:open for interactive development with the Cypress Test Runner. Use npm run cy:run for headless execution in CI/CD pipelines.

2. Understanding Cypress Project Structure

Project Directory Overview

After initializing Cypress, you'll notice several new folders and files in your project. Understanding each directory and file is essential for organizing your tests effectively.

my-react-app/
├── cypress/
│   ├── downloads/
│   ├── e2e/
│   │   └── spec.cy.js
│   ├── fixtures/
│   │   └── example.json
│   └── support/
│       ├── commands.js
│       └── e2e.js
├── cypress.config.js
├── package.json
└── src/
    └── (your React app)

Key Directories and Files

`cypress/e2e/`

This is where your test files live. Each test file should have the .cy.js extension (or .cy.ts for TypeScript). Cypress will automatically discover and run all test files in this directory.

`cypress/fixtures/`

Fixtures are used to store static test data, typically in JSON format. You can use fixtures to mock API responses or provide consistent test data across multiple tests.

// cypress/fixtures/user.json
{
  "name": "John Doe",
  "email": "john@example.com",
  "role": "admin"
}

`cypress/support/commands.js`

This file is where you define custom Cypress commands. Custom commands help you create reusable test logic that can be shared across multiple test files.

// cypress/support/commands.js

// Custom command to login
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('[data-testid="email"]').type(email);
  cy.get('[data-testid="password"]').type(password);
  cy.get('[data-testid="submit"]').click();
});

`cypress.config.js`

This is the main configuration file for Cypress. Here you can set the base URL, viewport dimensions, timeouts, and many other options.

// cypress.config.js
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:5173',
    viewportWidth: 1280,
    viewportHeight: 720,
    defaultCommandTimeout: 10000,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Tip: Always set a baseUrl in your cypress.config.js. This allows you to use cy.visit('/') instead of cy.visit('http://localhost:5173/'), making your tests cleaner and easier to maintain.

Configuring ESLint for Cypress

When you open Cypress test files in VS Code, you might see ESLint errors like the following:

// Error shown in VS Code:
// 'describe' is not defined. eslint(no-undef)
// 'it' is not defined. eslint(no-undef)
// 'cy' is not defined. eslint(no-undef)
// 'beforeEach' is not defined. eslint(no-undef)

This happens because ESLint doesn't know about Cypress global variables. These are not actual errors — your tests will still run. However, to fix these warnings and get proper IntelliSense support, install the Cypress ESLint plugin:

npm install eslint-plugin-cypress --save-dev

Then update your ESLint configuration file (eslint.config.js). First, add the import at the top of the file:

import cypressPlugin from 'eslint-plugin-cypress';

Then add the following configuration to your ESLint config:

plugins: {
  cypress: cypressPlugin,
},
extends: [
  js.configs.recommended,
  'plugin:cypress/recommended',
  reactHooks.configs.flat.recommended,
  reactRefresh.configs.vite,
],
env: {
  'cypress/globals': true,
},

3. Writing Your First Cypress Test

Test File Structure

Cypress uses Mocha's BDD syntax for structuring tests. If you've used Jest or Mocha before, you'll feel right at home. Tests are organized using describe blocks for grouping and it blocks for individual tests.

Let's create your first test file. First, here's the React component we'll be testing — a simple Home page component:

// src/pages/Home.jsx
import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div className="home">
      <h1>Welcome to Our App</h1>
      <p>This is the home page of our application.</p>
      <nav>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
        <Link to="/counter">Counter</Link>
      </nav>
    </div>
  );
};

export default Home;

Setting Up the App with Routing

To use this Home component, we need to set up React Router in our application. First, install react-router-dom:

npm install react-router-dom

Now, set up your App.jsx with routing to use the Home component:

// src/App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Start your development server to run the application:

npm run dev
# App will be available at http://localhost:5173

Writing the Test

Now, create a new file called home.cy.js in the cypress/e2e directory to test this component:

// cypress/e2e/home.cy.js

describe('Home Page', () => {
  beforeEach(() => {
    // Visit the home page before each test
    cy.visit('/');
  });

  it('should display the welcome message', () => {
    cy.contains('Welcome to Our App').should('be.visible');
  });

  it('should have a navigation menu', () => {
    cy.get('nav').should('exist');
    cy.get('nav a').should('have.length.at.least', 1);
  });
});

Code Explanation

cy.visit('/') — Navigates to the home page of your application. The '/' path uses the baseUrl configured in cypress.config.js.
cy.contains('Welcome to Our App') — Searches the DOM for an element containing the specified text.
.should('be.visible') — Asserts that the element is visible on the page. This checks that the element exists, is in the viewport, and is not hidden by CSS.
cy.get('nav') — Selects the nav element from the DOM.
.should('exist') — Asserts that the element exists in the DOM. Unlike 'be.visible', this doesn't check if the element is actually visible to the user.
.should('have.length.at.least', 1) — Asserts that there is at least one matching element (in this case, at least one link inside the nav).

Important: Make sure inside cypress.config.js file, you have set the baseUrl to http://localhost:5173 for this test to pass. This allows cy.visit('/') to navigate to your local development server.

When you run npm run cy:open and select E2E Testing, you'll see the Cypress Test Runner interface. It will display your test files under the cypress/e2e folder. You should see your home.cy.js file listed there. Click on it to run the tests.

Understanding the Test Structure

describe() — Groups related tests together. You can nest describe blocks for better organization. The first argument is a string describing what you're testing.
beforeEach() — Runs before each test in the describe block. Perfect for setup tasks like visiting a page or logging in. There's also afterEach(), before(), and after().
it() — Defines an individual test case. Each it block should test one specific behavior. The first argument describes what the test should do.

Want the Complete Guide?

This article is an excerpt from my Cypress Testing - Complete Beginner's Guide. For the full, in-depth walkthrough — with every concept explained step-by-step and ready-to-use code examples — check out the complete guide.

Here's everything you'll learn inside:

→ What is Cypress & why it's replacing Selenium for modern web testing
→ Installing and setting up Cypress from scratch
→ Writing your first Cypress test (step-by-step with a real React app)
→ Selecting elements the right way — so your tests never break randomly
→ Interacting with elements — clicks, typing, dropdowns, file uploads & more
→ Assertions and expectations that actually work (and auto-retry)
→ Working with aliases and handling Cypress's async behavior
→ Testing React components in complete isolation
→ Mocking API calls with cy.intercept() for fast, reliable tests
→ Testing forms, validation, and real-time user input
→ Testing authentication flows — login, logout & protected routes
→ Best practices used by top engineering teams to keep test suites maintainable

If you found this article helpful, the full guide takes it much further.

Want More Such Guides? Check out the Ultimate React Ebooks Collection with 20+ useful and practical guides.

Don't Miss This!

Don't miss the Lifetime/Pro Subscription — get lifetime access to all my 30+ current and all future courses, ebooks, webinars along with Applications Source Code Bundle (Bonus Offer), for just $10 / ₹850 (95% OFF).

⚡ Limited-Time Offer
⚡ One-Time Payment
⚡ Lifetime Access
⚡ All Future Courses/ebooks/webinars Included

The discount won't stay forever. Grab it while it's available.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

What's hiding behind that link? There's only one way to find out.

Yogesh Chavan — Fri, 05 Jun 2026 08:49:21 +0000

You get a message with a link: https://bit.ly/4xgurWK

No context. No preview. Just a short URL pointing somewhere unknown.

Most people do one of two things — click it and hope for the best, or ignore it entirely. Neither is great. There's a third option, and it's what I built RevealURL for.

The Problem With Short Links

URL shorteners are genuinely useful. They tame long, unwieldy links for sharing on social media, in print, or in messages.

But they come with a tradeoff: you can no longer see where you're going before you arrive.

That tradeoff is mostly harmless when you trust the sender. But in practice, short links show up in:

Phishing emails that impersonate your bank
Spam DMs on Twitter/X, Instagram, and WhatsApp
QR codes on random posters and flyers
Newsletter footers from lists you barely remember joining

The link itself tells you nothing. And by the time your browser has loaded it, it's too late — the request has already been made, tracking pixels have fired, and if something was malicious, the damage may already be done.

What RevealURL Does

RevealURL resolves a shortened URL all the way to its final destination — without ever opening it in your browser.

Paste a link, hit Reveal, and within seconds you'll see:

The final destination URL — exactly where the link ends up, after all redirects are followed.

The full redirect chain — every hop along the way, with its HTTP status code. A well-behaved link usually has one or two hops. Five or more is a red flag worth knowing about.

A safety score — a heuristic 0–100 rating that checks for things like raw IP addresses, missing HTTPS, suspicious keywords in the URL, look-alike punycode domains, high-abuse TLDs, and unusually deep subdomain structures.

A URL breakdown — protocol, domain, path, and query parameters laid out clearly so you can read what's actually in the link.

The key detail: the resolution happens on the server. Your browser never touches the destination. You see the result; the link never sees you.

A Quick Example

Take a link like https://bit.ly/4xgurWK. That's Bitly link shortener, and it wraps nearly every URL posted on the platform. Paste it into RevealURL and you'll see:

Hop 1: https://bit.ly/4xgurWK → 301 → the actual destination
Final URL: https://courses.yogeshchavan.dev/
Safety score: 100 / 100 — Safe

Now imagine that final URL was http://198.51.100.4/login instead. The score would drop significantly, and you'd see exactly why — raw IP address, no HTTPS, suspicious path. You'd know not to click before clicking.

What It Doesn't Do

Worth being clear about what the tool is and isn't:

It's not a virus scanner. It doesn't download or execute anything at the destination — it only inspects HTTP headers and the URL structure itself.
It doesn't log your queries. There's no database, no account system, no tracking. URLs are resolved on demand and the result goes straight to your browser.

Who It's For

If any of these sound familiar, it might be useful:

You receive links from strangers or automated systems and want a sanity check
You're curious what's hiding behind a shortened URL before sharing it further
You're a developer and want to quickly inspect redirect chains without writing a curl one-liner
You're teaching someone about link safety and want a visual, approachable tool

Try It

revealurl.yogeshchavan.dev

No signup. No install. Paste a link, see where it goes.

The next time someone sends you a sketchy-looking short URL — or even one that looks totally fine — you'll know exactly where it leads before you commit to clicking.

Don't Miss This!

⚡ Limited-Time Offer
⚡ One-Time Payment
⚡ Lifetime Access
⚡ All Future Courses/ebooks/webinars Included

The discount won't stay forever. Grab it while it's available.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

I Built an App That Puts You Anywhere in the World — Without Leaving Your Room

Yogesh Chavan — Wed, 03 Jun 2026 07:26:13 +0000

A few months ago, I needed a fresh set of professional photos for my online presence. The kind of shots where you're standing in front of the Eiffel Tower looking effortlessly cool, or walking down a street in Tokyo with the perfect golden-hour light behind you.

The problem? A professional photoshoot costs $500+, takes weeks to schedule, and requires you to actually be at that location. And if you're a freelancer or creator on a budget, that math just doesn't work.

So I built Frame.

The idea is simple

You upload a few selfies. You pick a destination — Paris, Bali, the Sahara, a quiet street in Santorini, literally anywhere. Frame then generates a full gallery of studio-quality portraits of you, in that location, with natural poses and DSLR-level aesthetics.

Your face stays perfectly recognizable in every shot. That was the non-negotiable part for me. What's the point of AI-generated photos if they don't actually look like you?

How it works

The whole process takes about a minute:

Upload 1–10 clear photos of yourself — different angles help, skip the sunglasses.
Search for any location on earth — landmarks, beaches, cities, deserts. There are 40+ popular destinations ready to go, or you can type in anything you can imagine.
Tweak if you want — lighting, mood, camera angle, aspect ratio. Or just let the defaults handle it.
Generate — you get a full gallery of varied poses: walking, candid, side profile, looking away. No stiff stock-photo energy.

Check out the application demo below.

Who's actually using this

I originally built it for myself, but it turns out a lot of people have the same problem:

Creators who need fresh content for social media without doing a full shoot every month.
Founders and professionals who want a sharp headshot for LinkedIn or their website but don't want to spend a day at a studio.
Brand teams running product shoots on tight budgets and tighter timelines.
Anyone who just wants to see what they'd look like standing on a cliff in Santorini (no judgment — I did this first).

A few things I'm proud of

Privacy is baked in. Your reference photos live only on your account and are deleted immediately once the photoshoot is generated. This wasn't an afterthought — it was a design decision from day one.

The prompt guide. Not everyone knows how to describe the shot they want. So I built a curated collection of ready-made prompts for iconic spots — Eiffel Tower, Bali Beach, Tokyo streets, and more. Just pick one, copy it, and go.

The output quality. I spent a lot of time tuning the DSLR aesthetic. The photos don't look AI-generated in the way you'd expect. They look like someone actually hired a photographer.

Generated Sample Photos

Here are some of the generated sample photos to see it in action.

Try it yourself

Frame is live at frame.yogeshchavan.dev.

It's FREE to use.

Upload a selfie, pick a place, and see what comes back. That's the best way to judge it.

I'd genuinely love to hear what you think. What locations did you try? What would you want to see added?

Don't Miss This!

⚡ Limited-Time Offer
⚡ One-Time Payment
⚡ Lifetime Access
⚡ All Future Courses/ebooks/webinars Included

The discount won't stay forever. Grab it while it's available.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

Learn MERN Stack by Building and Deploying a Real FullStack Application — Live 2-Day Webinar

Yogesh Chavan — Fri, 22 May 2026 06:55:52 +0000

If you've been putting off learning fullstack development, this weekend is your chance to finally make it happen.

I'm hosting a live, hands-on 2-Day MERN Stack Webinar where we'll build and deploy a complete fullstack application from scratch — no slides, no fluff, just real code.

📅 Dates & Timings

Day	Date	Time
Day 1	23rd May (Friday)	6:00 PM – 9:00 PM IST
Day 2	24th May (Saturday)	6:00 PM – 9:00 PM IST

Platform: Zoom (Live)
Recording: Yes — all registered participants get access to the recording

What You'll Build

By the end of this 2-day webinar, you'll have a fully deployed fullstack application — built with the MERN stack (MongoDB, Express.js, React, Node.js) — running live on the internet.

📌 Day-by-Day Breakdown

🔥 Day 1 — React Fundamentals (Frontend)

We start from the very beginning and build up to a complete React frontend:

Understand the core concepts of React from scratch
Build UI components the right way
Manage state and structure your project effectively
Create a real, working frontend application

No prior React experience required. We'll cover every concept clearly.

🔥 Day 2 — Backend + Integration + Deployment

Once the frontend is ready, we build the backend and connect everything:

Learn Node.js and Express.js fundamentals
Build REST APIs from scratch
Connect your React frontend to the backend
Deploy the fullstack application to production

By the end of Day 2, your app will be live and accessible to anyone on the internet.

🎯 Who Is This For?

This webinar is designed for:

Beginners who want to get started with React
Beginners who are just starting with MERN stack development
Developers who want hands-on, practical experience over theory
Students preparing for real-world projects or job interviews
Anyone who wants to understand how frontend and backend connect in a real application

If you've only worked with one side of the stack — or haven't started at all — this is the right starting point.

✅ Why This Webinar Is Different

Most tutorials teach you concepts. This webinar teaches you by doing.

Hands-on coding throughout — no PowerPoint, no passive watching
Real project — something you can add to your portfolio
Live session — ask questions, get answers in real time
Recording included — can't attend live? You still get the full recording plus the complete application source code

⚠️ Limited Seats — Register Now

Seats are limited and it's first-come, first-served. If you can't make it live, register anyway — you'll get the recording and the full source code of the application we build.

👉 Register Here

If you've been postponing learning fullstack development, this is your sign to start. See you this weekend. 🚀

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

I Built a Tool for Turning Customer Reviews Into Shareable Cards — Here's What It Does

Yogesh Chavan — Wed, 20 May 2026 06:31:03 +0000

Social proof is one of the most persuasive things you can put on a landing page or a social media post.

But taking a raw review — a chunk of text from an email, a tweet, or a form submission and turning it into something that looks polished enough to actually share is tedious. You're either wrestling with Figma/Canva, or settling for a plain screenshot.

I got tired of that friction, so I built Testimonial Generator.

What it actually does

At its core, it's a visual editor for testimonial cards. You paste in the review text, the person's name, their role or location, and the card renders live on the right side of the screen as you type. No page reloads, no "click Preview to see changes" — what you see is what you export.

The output is a crisp PNG or JPG, ready to drop into your website, a slide deck, a newsletter, or a social post.

The customization is real

This isn't a "pick a color" tool. Every element of the card is adjustable:

Card style — five layout variants: Default, Quote (with big decorative quotation marks), Centered, Bordered (with an accent bar), and Social
Colors — background, text, muted text, border, avatar background — all individually controllable
Typography — choose your font family
Avatar — upload a photo or fall back to auto-generated initials with a colored background
Star rating — show 1–5 stars, or hide them entirely
Tags — add a pill label ("Verified", "G2", "AppSumo", whatever fits your context)
Background images — upload a background photo with optional transparency and fade overlay
Spacing — padding, border radius, shadow size, and card width are all adjustable with sliders
Border — toggle on/off with a custom color

The live preview reflects every change instantly.

Presets so you don't start from scratch

There are 14+ built-in presets covering light, dark, quote, centered, and bordered styles. If you find settings you want to reuse — for a specific brand, a specific campaign — you can save your own presets.

Collage builder

If you have multiple reviews you want to share at once, the collage builder lets you combine several cards into a single image. Useful for hero sections, social proof carousels, or pitch decks.

Collection pages

The part I find most useful for collecting new testimonials: you can create a public page on a custom slug where customers can submit their own reviews, including photos.

You give them the link, they fill it out, and the responses come back to your dashboard ready to be turned into cards.

Free plan gives you one collection page. Pro removes the limit.

No account required to start

The generator, collage builder, presets, and export all work without signing in. An account is only needed if you want cloud-synced presets or multiple collection pages.

Pricing is simple: Free forever, $4/month (billed yearly) for Pro.

Try it out!

If you collect testimonials from customers, users, or clients and you want a faster way to make them shareable, give it a go: testimonial-generator.com

No installation, no signup wall. Open it, paste a review, export a card, quickly create public pages to accept feedbacks

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

Beginner's Guide to Docker: From Zero to Hero

Yogesh Chavan — Sat, 16 May 2026 06:49:38 +0000

Docker has fundamentally changed how developers build, ship, and run software. If you've ever heard "it works on my machine" — Docker is the fix. This guide walks you through everything you need to get started, from core concepts to writing your first Dockerfile and managing multi-container apps.

What is Docker?

Docker is an open-source platform that packages applications inside lightweight, isolated environments called containers. A container bundles your code, runtime, system libraries, and configuration into a single portable unit, so an app that runs on your laptop runs identically on a colleague's machine or a production cloud server.

Released in 2013, Docker builds on long-standing Linux kernel features (namespaces and cgroups) but wraps them in a developer-friendly CLI, a public image registry (Docker Hub), and a declarative file format for building images.

Why Use Docker?

Before Docker, deploying apps meant carefully matching server environments, language runtimes, and OS patches. A single mismatch could break production. Docker solves this and brings several other benefits:

Consistency — the same image runs identically on every machine
Speed — containers start in seconds and use far fewer resources than VMs
Isolation — each container has its own filesystem, processes, and network stack
Reproducibility — a Dockerfile is a recipe; anyone can rebuild the exact same image
Microservices-friendly — small, single-purpose containers compose into larger systems easily
Massive ecosystem — Docker Hub hosts hundreds of thousands of ready-to-use images

Containers vs. Virtual Machines

Both containers and VMs provide isolation, but they work very differently. A VM includes a full guest OS on top of a hypervisor, while a container shares the host kernel and isolates only the application and its dependencies.

Feature	Virtual Machine	Docker Container
Boot time	Minutes	Seconds
Size on disk	Gigabytes	Megabytes
OS overhead	Full guest OS	Shares host kernel
Isolation level	Hardware-level	Process-level
Performance	Lower (virtualized)	Near-native
Portability	Limited	Excellent

Note: Containers don't replace VMs in every situation. VMs are still preferable when you need a completely different OS or strict hardware-level isolation.

Core Docker Concepts

Five terms come up constantly. Understand these and everything else makes sense.

Image — a read-only template containing your app and its dependencies. Think of it like a class in OOP — a blueprint.
Container — a running instance of an image. You can run many containers from one image.
Dockerfile — a text file with step-by-step instructions for building an image.
Registry — a server that stores and distributes images. Docker Hub is the default public registry.
Volume — a mechanism for persisting data outside a container's lifecycle.

How Docker Works

Docker uses a client-server architecture. When you run docker run nginx:

The Docker CLI sends your command to the Docker Daemon (dockerd) over a REST API.
The daemon checks if the image exists locally; if not, it pulls it from Docker Hub.
The daemon creates a container, allocates a writable filesystem layer, attaches networking, and starts the process.
Output streams back to your terminal.

On Linux, the daemon talks directly to the kernel. On macOS and Windows, Docker Desktop runs a small Linux VM under the hood — but you barely notice.

Installing Docker

macOS and Windows

Install Docker Desktop — an all-in-one bundle that includes the daemon, CLI, Docker Compose, and a GUI for managing images and containers.

Linux (Ubuntu/Debian)

# Update package index
sudo apt-get update

# Install prerequisites
sudo apt-get install ca-certificates curl gnupg

# Add Docker's official GPG key
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg \
  | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

# Add the Docker repository
echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/docker.gpg] \
https://download.docker.com/linux/ubuntu jammy stable" \
  | sudo tee /etc/apt/sources.list.d/docker.list

# Install Docker Engine
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

Tip: After installation on Linux, add your user to the docker group so you don't need sudo for every command: sudo usermod -aG docker $USER, then log out and back in.

Verifying the Installation

docker --version
# Output: Docker version 25.0.0, build ...

docker info

# Run the official hello-world image
docker run hello-world

The hello-world image is tiny (a few kilobytes) and prints a friendly message confirming that the daemon, CLI, image pulling, and container execution all work.

Running Your First Container

Let's run something more interesting — an Nginx web server — in a single command:

# Run nginx in the background and map port 8080 -> 80
docker run -d -p 8080:80 --name my-nginx nginx

# Open http://localhost:8080 in your browser
# When done, clean up
docker stop my-nginx
docker rm my-nginx

Breaking down that command:

docker run — create and start a new container from an image
-d — detached mode; run in the background
-p 8080:80 — publish container port 80 to host port 8080
--name my-nginx — give the container a friendly name
nginx — the image to run

Best Practice: Always give containers explicit names with --name. Without it, Docker assigns a random name like elated_einstein, making them harder to manage in scripts.

Docker Images

A Docker image is a read-only, layered filesystem snapshot containing everything needed to run your software: the OS base, language runtime, application code, dependencies, and metadata.

Images are identified by name:tag — for example, node:20-alpine refers to Node.js v20 built on Alpine Linux. If you omit the tag, Docker assumes :latest.

Pulling Images from Docker Hub

Docker Hub is the world's largest public registry of container images. You can pull any public image with a single command:

docker pull nginx
docker pull nginx:1.25-alpine
docker pull node:20-alpine
docker pull postgres:16

Note: Tags like alpine mean the image is built on Alpine Linux, which is often under 10 MB. Prefer Alpine variants when image size matters.

Listing and Removing Images

You can see all images stored locally with the following commands:

# List all local images
docker images

# Remove a single image
docker rmi nginx:latest

# Remove all unused images
docker image prune

# Remove ALL images (be careful!)
docker rmi $(docker images -q)

Warning: docker image prune and docker system prune can free a lot of disk space, but they also delete images and containers you might still need. Read the prompt carefully before confirming.

Fixing the "Image Is Being Used" Error

A common error when removing images:

$ docker rmi nginx:latest

Error response from daemon: conflict: unable to remove repository reference
"nginx:latest" — container eebd38aa4c91 is using its referenced image

This is not a bug. Docker is protecting you: an image cannot be deleted while a container — even a stopped one — still depends on it. The fix is to deal with the container first. You have two options.

Option 1: Remove the container first (recommended)

# 1. Find the container using the image
# Use -a so STOPPED containers show up too
docker ps -a

# 2. Remove that container (use -f if it is still running)
docker rm eebd38aa4c91

# or by name:
docker rm my-nginx

# 3. Now the image deletes cleanly
docker rmi nginx:latest

The container ID in your error message (here, eebd38aa4c91) is exactly the one you need to remove in step 2 — Docker tells you which container is the blocker.

Option 2: Force-remove the image

The -f (or --force) flag tells Docker to remove the image anyway. It does this by untagging the image — the underlying layers stay on disk as long as the container references them, and are cleaned up once that container is gone.

# Force-remove the image reference
docker rmi -f nginx:latest

# The container eebd38aa4c91 still exists and still runs,
# but the image is now "dangling" (untagged, shown as <none>)
docker images

# REPOSITORY TAG    IMAGE ID     SIZE
# <none>     <none> 6f8edba05e38 161MB

Warning: Forcing removal does not actually free disk space while a container is still using the image — it only removes the name/tag. Prefer Option 1: remove the container first, then the image. That genuinely reclaims the space.

Tip: To clean up everything related to an image in one go: stop and remove all containers created from it, then remove the image. The one-liner docker rm -f $(docker ps -aq --filter ancestor=nginx) removes every container based on the nginx image, after which docker rmi nginx succeeds.

Image Tags and Versions

Common tag patterns you'll see on Docker Hub:

latest — the most recent stable build (avoid in production)
20.10.0 — a specific semantic version, fully reproducible
20-alpine — major version on Alpine Linux
20-slim — a slimmer Debian variant
bullseye / bookworm — built on a specific Debian release

Warning: Avoid :latest in production. It's a moving target — pin to specific versions like node:20.10.0-alpine for reproducible builds.

Image Layers Explained

Every image is built from a stack of layers. Each instruction in a Dockerfile produces a layer. Layers are cached and shared between images, which is what makes Docker so efficient. If two images both start with the same base layer (FROM node:20-alpine, for example), they share that layer on disk.

You can inspect the layers of any image:

# Show the history (layers) of an image

docker history nginx:latest

Note: The order of instructions in a Dockerfile directly affects layer caching. Place rarely-changing instructions (installing OS packages) before frequently-changing ones (copying source code). We'll cover this in detail in Section 4.

Working with Containers

Starting Containers (docker run)

The docker run command is the workhorse of the Docker CLI. It creates a new container from an image and starts it. The general syntax is:

docker run [OPTIONS] IMAGE [COMMAND] [ARG...]

Here are the options you'll use over and over:

Flag	Effect
`-d`	Run in the background (detached)
`-it`	Interactive + TTY (for shells)
`-p HOST:CONTAINER`	Publish a port
`--name NAME`	Assign a name
`-e KEY=VALUE`	Set an environment variable
`-v HOST:CONTAINER`	Mount a volume
`--rm`	Auto-remove when the container exits
`--network NAME`	Attach to a specific network

A few realistic examples:

# Interactive Ubuntu shell, auto-removed on exit
docker run -it --rm ubuntu:22.04 bash

# Redis in the background
docker run -d -p 6379:6379 --name cache redis:7-alpine

# Postgres with a named volume for persistence
docker run -d \
  --name db \
  -e POSTGRES_PASSWORD=secret \
  -v pgdata:/var/lib/postgresql/data \
  -p 5432:5432 \
  postgres:16

Detached Mode and Naming

By default docker run attaches your terminal to the container, which is useful for short-lived commands but not for long-running services. Adding -d runs the container in the background and prints its ID. Combine that with --name so you can refer to the container by a friendly handle.

# Bad: random name, you'll need the ID later
docker run -d nginx

# Good: predictable name, easy to script
docker run -d --name web nginx

Stopping, Starting, Restarting

# Gracefully stop a container (sends SIGTERM, then SIGKILL after 10s)
docker stop web

# Start a stopped container
docker start web

# Restart (stop + start)
docker restart web

# Force-kill immediately (sends SIGKILL)
docker kill web

# Pause / unpause (freeze the process)
docker pause web
docker unpause web

Note: docker stop is almost always what you want. docker kill is for unresponsive containers — it skips the graceful shutdown signal.

Removing Containers

# Remove a stopped container
docker rm web

# Force-remove a running container (stop + remove)
docker rm -f web

# Remove all stopped containers
docker container prune

# Remove every container on the system
docker rm -f $(docker ps -aq)

Tip: If you don't need the container after it exits — for example, a one-off CLI tool — add --rm to docker run so cleanup happens automatically.

Executing Commands Inside a Container

The docker exec command runs an additional process inside an already-running container. The most common use is opening a shell to debug or inspect state:

# Open an interactive bash shell inside the "web" container
docker exec -it web bash

# Some minimal images don't have bash -- use sh instead
docker exec -it web sh

# Run a one-off command without a shell
docker exec web ls /etc/nginx

# Run a command as a different user
docker exec -u root -it web bash

Viewing Logs

# Print all logs
docker logs web

# Follow logs in real time
docker logs -f web

# Show the last 100 lines
docker logs --tail 100 web

# Show logs with timestamps
docker logs -t web

# Show logs from the last 5 minutes
docker logs --since 5m web

Best Practice: Configure your app to log to stdout/stderr instead of writing to files inside the container. This is the 12-factor approach and lets Docker and orchestrators like Kubernetes collect logs centrally.

Inspecting Containers

For deep introspection — IP address, mount points, environment, network settings, and more — use docker inspect:

# Print full JSON details of a container
docker inspect web

# Extract a specific field using a format template
docker inspect -f '{{ .NetworkSettings.IPAddress }}' web

# Get the exit code of a stopped container
docker inspect -f '{{ .State.ExitCode }}' web

Writing Dockerfiles

A Dockerfile is a plain text file with instructions Docker follows to build a custom image. Each instruction produces a new layer. Dockerfiles are the foundation of reproducible builds.

Anatomy of a Dockerfile

Here is a minimal example. We'll dissect every line below:

# Use an official Node.js LTS image as the base
FROM node:20-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy dependency manifests first (better caching)
COPY package*.json ./

# Install production dependencies
RUN npm ci --omit=dev

# Copy the rest of the application source code
COPY..

# Document the port the application listens on
EXPOSE 3000

# Define environment variables
ENV NODE_ENV=production

# Default command to run when the container starts
CMD ["node", "server.js"]

Common Instructions

Instruction	Purpose
`FROM`	Sets the base image — every Dockerfile starts here
`WORKDIR`	Sets the working directory for subsequent instructions
`COPY`	Copies files from the build context into the image
`RUN`	Executes a command during the build (e.g., installing packages)
`ENV`	Sets an environment variable (persists at runtime)
`ARG`	Defines a build-time variable (disappears after the build)
`EXPOSE`	Documents which port the container listens on
`USER`	Sets the user the container runs as
`CMD`	Default command when the container starts (overridable)
`ENTRYPOINT`	Fixed executable — combined with CMD for default flags

Note: CMD vs ENTRYPOINT — use CMD for default arguments that are easy to override at runtime. Use ENTRYPOINT when your image is a specific executable. They work well together: ENTRYPOINT for the binary, CMD for default flags.

Your First Dockerfile: A Node.js App

Let's containerize a minimal Express app. The project structure looks like this:

my-app/
├── package.json
├── server.js
├── .dockerignore
└── Dockerfile

Step 1: Create the project

mkdir my-app
cd my-app
npm init -y
npm install express

Step 2: Create server.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello from inside a Docker container!');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
});

Step 3: Create the Dockerfile

# Start from the official Node.js 20 image (Alpine = small)
FROM node:20-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy ONLY the dependency manifests first (better caching)
COPY package*.json ./

# Install dependencies inside the container
RUN npm install --omit=dev

# Copy the rest of the application source code
COPY . .

# Document the port the app listens on
EXPOSE 3000

# The command that runs when the container starts
CMD ["node", "server.js"]

Step 4: Create .dockerignore

node_modules
npm-debug.log
.git
.env

Why exclude .env? Environment variables should be injected at runtime via -e flags or Docker secrets, not baked into the image. Committing secrets into an image is a serious security risk.

This article covers only a portion of the 40 pages complete Beginner's Guide to Docker. The full guide goes much deeper — with more examples, real-world walkthroughs, and step-by-step projects across all the sections below:

Section 1: Introduction to Docker
What is Docker? · Why Use Docker? · Containers vs Virtual Machines · Core Docker Concepts · How Docker Works · Installing Docker · Running Your First Container

Section 2: Docker Images
What Is an Image? · Pulling Images from Docker Hub · Listing and Removing Images · Fixing the "Image Is Being Used" Error · Image Tags and Versions · Searching the Registry · Image Layers Explained

Section 3: Working with Containers
Starting Containers · Detached Mode and Naming · Listing Containers · Stopping, Starting, Restarting · Removing Containers · Executing Commands Inside a Container · Viewing Logs · Inspecting Containers

Section 4: Writing Dockerfiles
What Is a Dockerfile? · Anatomy of a Dockerfile · Common Instructions Explained · Your First Dockerfile (Node.js App) · Building the Image · Updating Your Code · The Build Cache and Layer Ordering · .dockerignore · Multi-Stage Builds

Section 5: Data Persistence with Volumes
Why Containers Are Ephemeral · Bind Mounts vs Named Volumes · Creating and Using Volumes · Real-World Example: Postgres Volume

Section 6: Docker Networking
Default Networks · Creating a User-Defined Bridge · Connecting Containers by Name · Publishing Ports · Inspecting Networks

Section 7: Docker Compose
Why Compose? · Installing Docker Compose · Your First docker-compose.yml · Common Compose Commands · Real Example: Node.js + Postgres + Redis · Environment Variables and .env Files

Section 8: Best Practices & Next Steps
Image Size Optimization · Security Tips · Tagging and Versioning Strategy · Where to Go From Here

👉 Get the complete guide here

Also worth reading: If you're interested in staying up to date with the React ecosystem, check out React 18: A Complete Guide to Every New Feature — a deep dive into everything that changed in React 18.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on Linkedin for regular content that I share every day.

React 18: A Complete Guide to Every New Feature

Yogesh Chavan — Mon, 11 May 2026 06:40:40 +0000

React 19 is already here.

But surprisingly, many React developers are still not familiar with the most useful features introduced in React 18.

That's exactly why I created this guide, to help you clearly understand the powerful features React 18 provides and how they improve real-world React applications.

React 18 is the most significant release since React 16 introduced Hooks. At its core, React 18 is about one big idea: concurrent rendering, and everything else flows from it.

This guide walks through every major feature and API introduced in React 18, with practical code examples you can use today.

Concurrent Rendering
New Root API — createRoot
Automatic Batching
startTransition and useTransition
useDeferredValue
Suspense Improvements
useId
useSyncExternalStore
useInsertionEffect
Strict Mode Changes
React Server Components
Migration Guide

1. Concurrent Rendering

Concurrent Rendering is the flagship feature of React 18, and it changes how React works at a fundamental level. In all previous versions, rendering was synchronous and uninterruptible.

Once React started rendering a component tree, it had to finish before the browser could do anything else. This could make the UI feel sluggish during expensive updates.

With Concurrent Rendering, React gains the ability to pause, resume, and even abandon renders. It can yield to the browser event loop mid-render, keeping the UI responsive even during heavy work. Think of it as React learning how to multitask.

Blocking vs. Concurrent Rendering

Feature	React 17 (Blocking)	React 18 (Concurrent)
Rendering	Synchronous, uninterruptible	Can pause and resume
Update priority	All updates treated equally	Urgent vs. non-urgent
UX during heavy work	Can feel janky	Stays responsive
Opt-in required	N/A	Yes, via `createRoot()`

How It Works

React 18 builds on the Fiber architecture to assign priorities to different updates:

High priority: User interactions like clicks and keystrokes
Normal priority: Data-driven re-renders
Low priority: Background updates wrapped in startTransition

If a high-priority update arrives while a low-priority render is in progress, React can interrupt the low-priority work, handle the urgent update, then resume where it left off.

Note: Concurrent Rendering is completely opt-in. Existing code using ReactDOM.render() continues to work in React 18 without any changes. You only get concurrent features after switching to createRoot().

2. New Root API — createRoot

To unlock concurrent features, you need to migrate from ReactDOM.render() to the new createRoot() API. The old API still works in React 18, but it triggers a deprecation warning and opts you out of everything new.

Before (React 17)

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

After (React 18)

import { createRoot } from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

The returned root object also exposes root.unmount() to tear down the component tree, replacing the old ReactDOM.unmountComponentAtNode().

hydrateRoot for SSR

If you're using server-side rendering, replace ReactDOM.hydrate() with hydrateRoot():

import { hydrateRoot } from 'react-dom/client';
import App from './App';

const root = hydrateRoot(
  document.getElementById('root'),
  <App />
);

// You can still call root.render() later to update the tree
root.render(<App newProp="value" />);

Tip: In micro-frontend architectures, you can create multiple independent roots on a single page — each is fully isolated and concurrent.

3. Automatic Batching

Batching is when React groups multiple state updates into a single re-render. This has always existed, but until React 17 it only applied inside React event handlers.

Updates inside setTimeout, Promise callbacks, or native event listeners each triggered their own separate re-render.

React 18 fixes this. Now all state updates are batched automatically, regardless of where they originate.

React 17 — Inconsistent Batching

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  // ✅ Batched — 1 re-render (inside React event handler)
  const handleClick = () => {
    setCount(c => c + 1);
    setFlag(f => !f);
  };

  // ❌ NOT batched — 2 separate re-renders in React 17
  const handleAsync = () => {
    setTimeout(() => {
      setCount(c => c + 1); // re-render 1
      setFlag(f => !f);     // re-render 2
    }, 1000);
  };
}

React 18 — Automatic Batching Everywhere

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  // ✅ Batched — 1 re-render
  const handleAsync = () => {
    setTimeout(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
    }, 1000);
  };

  // ✅ Also batched inside fetch/promise callbacks
  const fetchData = async () => {
    const data = await fetch('/api/data');
    setCount(c => c + 1); // batched
    setFlag(true);        // batched — single re-render!
  };
}

Opting Out with flushSync

If you need an update to be applied synchronously (for example, to read a DOM measurement immediately after a state change), use flushSync:

import { useState } from "react";
import { flushSync } from 'react-dom';

const handleClick = () => {
 const [count, setCount] = useState(0);
 const [flag, setFlag] = useState(false);

  flushSync(() => {
    setCount(c => c + 1);
  });
  // DOM is updated here before the next line executes

  flushSync(() => {
    setFlag(f => !f);
  });
  // Total: 2 re-renders
};

Tip: Automatic batching is a free performance win. Just upgrading to React 18 with createRoot gives you this — no code changes required. Use flushSync only when you specifically need synchronous DOM updates.

4. startTransition and useTransition

Some state updates are urgent — typing in a search box must feel instant. But the results list it drives might be expensive to render. Before React 18, both updates had equal priority, making the input feel sluggish.

The Transition API lets you tell React: this update is non-urgent — keep the UI responsive and get to it when you can.

startTransition — The Standalone Function

import { startTransition } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = (e) => {
    const value = e.target.value;

    // Urgent: update the input immediately
    setQuery(value);

    // Non-urgent: React can interrupt this if the user keeps typing
    startTransition(() => {
      const filtered = expensiveSearch(value);
      setResults(filtered);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      <ResultsList items={results} />
    </div>
  );
}

useTransition — With a Pending State

The useTransition hook is the recommended approach because it also gives you isPending — a boolean you can use to show a loading indicator while the transition is running.

import { useState, useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('home');

  const selectTab = (nextTab) => {
    startTransition(() => {
      setTab(nextTab);
    });
  };

  return (
    <div>
      <TabButton isActive={tab === 'home'} onClick={() => selectTab('home')}>
        Home
      </TabButton>
      <TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}>
        Posts (slow)
      </TabButton>

      {isPending && <Spinner />}

      <div style={{ opacity: isPending ? 0.7 : 1 }}>
        {tab === 'home' && <HomePage />}
        {tab === 'posts' && <PostsPage />}
      </div>
    </div>
  );
}

Real-World Example: Live Search Over a Large List

import { useState, useTransition, useMemo } from 'react';

const ITEMS = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  name: `Item ${i}`,
}));

function LiveSearch() {
  const [query, setQuery] = useState('');
  const [deferredQuery, setDeferredQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value); // immediate — input stays responsive

    startTransition(() => {
      setDeferredQuery(value); // deferred — filters the big list
    });
  };

  const filtered = useMemo(
    () => ITEMS.filter(item =>
      item.name.toLowerCase().includes(deferredQuery.toLowerCase())
    ),
    [deferredQuery]
  );

  return (
    <div>
      <input value={query} onChange={handleChange} placeholder="Search..." />
      {isPending ? <p>Filtering...</p> : <p>{filtered.length} results</p>}
      <ul>
        {filtered.slice(0, 50).map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Warning: You cannot wrap state updates that control an input's value in a transition. Input values must always be urgent. Only wrap the downstream, results-driven update.

5. useDeferredValue

useDeferredValue is the sibling of useTransition. While useTransition wraps the setter, useDeferredValue wraps the value itself. This makes it ideal when you don't control the state update — for example, when a value comes in as a prop.

import { useState, useDeferredValue } from 'react';

function App() {
  const [query, setQuery] = useState('');

  // deferredQuery lags behind query during concurrent renders
  const deferredQuery = useDeferredValue(query);

  // When query !== deferredQuery, a transition is in progress
  const isStale = query !== deferredQuery;

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      {/* Dim results while the deferred value catches up */}
      <div style={{ opacity: isStale ? 0.5 : 1 }}>
        <SearchResults query={deferredQuery} />
      </div>
    </div>
  );
}

useTransition vs. useDeferredValue

	`useTransition`	`useDeferredValue`
What it wraps	The state setter	The value / prop
`isPending` available	Yes	No (check manually with `===`)
Best for	When you own the state update	When value comes from props

6. Suspense Improvements

Suspense has existed since React 16.6, but React 18 dramatically expands what it can do. The key improvements are full support in concurrent mode, Suspense on the server via Streaming SSR, and truly composable loading states across an entire page.

Nested Suspense Boundaries

Each <Suspense> boundary is independent. A component deep in the tree can suspend without affecting siblings that are already loaded.

import { Suspense } from 'react';

function Dashboard() {
  return (
    <div>
      <Suspense fallback={<HeaderSkeleton />}>
        <Header />
      </Suspense>

      <Suspense fallback={<SidebarSkeleton />}>
        <Sidebar />
      </Suspense>

      <Suspense fallback={<MainContentSkeleton />}>
        <MainContent>
          {/* Nested boundaries for fine-grained control */}
          <Suspense fallback={<ChartSkeleton />}>
            <Chart />
          </Suspense>
          <Suspense fallback={<TableSkeleton />}>
            <DataTable />
          </Suspense>
        </MainContent>
      </Suspense>
    </div>
  );
}

SuspenseList — Coordinating Loading Order

SuspenseList lets you control the order in which suspended components reveal themselves, preventing a jarring "popcorn" effect.

import { Suspense, SuspenseList } from 'react';

function ProfilePage() {
  return (
    <SuspenseList revealOrder="forwards" tail="collapsed">
      <Suspense fallback={<AvatarSkeleton />}>
        <ProfileAvatar />
      </Suspense>
      <Suspense fallback={<DetailsSkeleton />}>
        <ProfileDetails />
      </Suspense>
      <Suspense fallback={<PostsSkeleton />}>
        <ProfilePosts />
      </Suspense>
    </SuspenseList>
  );
  // revealOrder: 'forwards' | 'backwards' | 'together'
  // tail: 'collapsed' (show only next skeleton) | 'hidden'
}

Streaming SSR

The biggest SSR improvement in React 18 is HTML streaming. Instead of waiting for all data to be ready before sending any HTML, React can stream the page in chunks:

The shell HTML is sent immediately so the browser can start rendering
Suspended sections are streamed in as their data resolves
Each section hydrates independently — no all-or-nothing hydration
Users can interact with loaded parts while others are still loading

Note: Streaming SSR uses renderToPipeableStream (Node.js) or renderToReadableStream (Edge/Web Streams). Frameworks like Next.js 13+ handle this automatically.

7. useId

When building accessible UI, you often need to link a <label> to an <input> using a unique id. Generating these with Math.random() or a counter works on the client but causes hydration mismatches in SSR because the server and client generate different values.

useId solves this by producing stable, collision-free IDs that are consistent across environments.

import { useId } from 'react';

// ❌ Wrong — breaks SSR hydration
function PasswordField() {
  const id = Math.random().toString(); // different on server vs client!
  return (
    <>
      <label htmlFor={id}>Password</label>
      <input id={id} type="password" />
    </>
  );
}

// ✅ Correct — stable and SSR-safe
function PasswordField() {
  const id = useId(); // e.g. ":r0:", ":r1:", etc.
  return (
    <>
      <label htmlFor={id}>Password</label>
      <input id={id} type="password" />
    </>
  );
}

Deriving Multiple IDs from One Call

For accessible components that need several linked IDs, derive them from a single useId call with a suffix — this is more efficient than calling useId multiple times.

function FormField({ label, type = 'text', hint }) {
  const id = useId();
  const inputId = `${id}-input`;
  const hintId  = `${id}-hint`;

  return (
    <div>
      <label htmlFor={inputId}>{label}</label>
      <input
        id={inputId}
        type={type}
        aria-describedby={hint ? hintId : undefined}
      />
      {hint && <p id={hintId}>{hint}</p>}
    </div>
  );
}

Warning: Do not use useId to generate list keys. Keys should come from your data (e.g. item.id). useId is specifically for accessibility attributes like id, htmlFor, and aria-*.

8. useSyncExternalStore

This hook is primarily for library authors building state management solutions (Redux, Zustand, MobX, etc.). It provides a safe, concurrent-mode-compatible way to subscribe to data stores that live outside React.

The problem it solves is called tearing: in concurrent mode, React can render a component tree partially and then pause.

If your component reads from an external store at different points during that render, it might see two different values — a visual inconsistency. useSyncExternalStore prevents this.

import { useSyncExternalStore } from 'react';

// Subscribing to the browser's online/offline status
function useOnlineStatus() {
  return useSyncExternalStore(
    // subscribe: called when React needs to resubscribe
    (callback) => {
      window.addEventListener('online', callback);
      window.addEventListener('offline', callback);
      return () => {
        window.removeEventListener('online', callback);
        window.removeEventListener('offline', callback);
      };
    },
    // getSnapshot: returns the current value (client)
    () => navigator.onLine,
    // getServerSnapshot: value to use during SSR
    () => true
  );
}

function StatusBadge() {
  const isOnline = useOnlineStatus();
  return (
    <div className={isOnline ? 'badge-green' : 'badge-red'}>
      {isOnline ? 'Online' : 'Offline'}
    </div>
  );
}

Note: If you use Redux Toolkit, Zustand, or Jotai, they already integrate useSyncExternalStore internally. You only need this hook when writing your own state management library or React integration.

9. useInsertionEffect

useInsertionEffect is a specialized hook aimed squarely at CSS-in-JS library authors. It fires synchronously before any DOM mutations, which allows CSS rules to be injected into the DOM before React reads layout in useLayoutEffect.

The execution order is: useInsertionEffect → useLayoutEffect → useEffect.

import { useInsertionEffect } from 'react';

// Inside a CSS-in-JS library — not your application code
function useCSS(rule) {
  useInsertionEffect(() => {
    if (!isInserted(rule)) {
      insertStyleSheet(rule);
    }
  });

  return getClassName(rule);
}

Warning: Unless you are writing a CSS-in-JS library, you should not use useInsertionEffect. For regular side effects use useEffect, and for DOM measurements use useLayoutEffect.

10. Strict Mode Changes

React 18's Strict Mode introduces a new development-only check: it intentionally mounts, unmounts, and remounts every component. This means effects run twice in development:

mount → run effect → cleanup effect → remount → run effect again

This simulates a future React feature (the "offscreen" API) where components can be hidden and reshown — like navigating away from and back to a tab. Your effects need to be resilient to this.

What Breaks and How to Fix It

// ❌ Breaks in Strict Mode — no cleanup, double fetch
useEffect(() => {
  fetch('/api/data').then(r => r.json()).then(setData);
}, []);

// ✅ Fixed — use AbortController for cleanup
useEffect(() => {
  const controller = new AbortController();
  fetch('/api/data', { signal: controller.signal })
    .then(r => r.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') throw err;
    });
  return () => controller.abort();
}, []);

// ❌ Breaks — subscribes without unsubscribing
useEffect(() => {
  const subscription = dataStream.subscribe(handler);
  // Missing cleanup!
}, []);

// ✅ Fixed — always return a cleanup function
useEffect(() => {
  const subscription = dataStream.subscribe(handler);
  return () => subscription.unsubscribe();
}, []);

Tip: If your app behaves oddly in Strict Mode after upgrading to React 18, that's React catching a real bug — missing cleanup in your effects. Fix the cleanup rather than disabling Strict Mode.

11. React Server Components

React Server Components (RSC) are a new paradigm designed alongside React 18's concurrent architecture. They let you write components that render exclusively on the server and are never sent to the client as JavaScript — meaning zero bundle size impact.

While RSC require framework support (Next.js App Router being the primary implementation), understanding them is increasingly essential.

Server vs. Client Components at a Glance

Capability	Server Component	Client Component
`async`/`await` at component level	✅ Yes	❌ No
`useState` / `useEffect`	❌ No	✅ Yes
Browser APIs	❌ No	✅ Yes
Direct database / filesystem access	✅ Yes	❌ No
`onClick` and other event handlers	❌ No	✅ Yes
Bundle size impact	0 bytes	Adds to bundle
Context API	❌ No	✅ Yes

Server Component Example

// No directive needed — Server Component by default in Next.js App Router
async function ProductPage({ id }) {
  // Direct database access — no useEffect, no fetch boilerplate
  const product = await db.products.findById(id);
  const reviews = await db.reviews.findByProduct(id);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>

      {/* Client Components can be composed inside Server Components */}
      <AddToCartButton productId={id} />

      {reviews.map(review => (
        <ReviewCard key={review.id} review={review} />
      ))}
    </div>
  );
}

Client Component Example

'use client'; // This directive opts the component into the client bundle

import { useState } from 'react';

function AddToCartButton({ productId }) {
  const [added, setAdded] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleAdd = async () => {
    setLoading(true);
    await addToCart(productId);
    setAdded(true);
    setLoading(false);
  };

  if (added) return <p>Added to cart ✓</p>;

  return (
    <button onClick={handleAdd} disabled={loading}>
      {loading ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

The composition model is powerful: Server Components handle data fetching and heavy lifting, while Client Components handle interactivity.

The two types compose naturally — Server Components can render Client Components, passing only serializable props across the boundary.

12. Migration Guide

Migrating from React 17 to React 18 is largely additive. Existing code keeps working, and you can adopt new features incrementally.

Step 1: Update Your Packages

npm install react@18 react-dom@18

# TypeScript users
npm install --save-dev @types/react@18 @types/react-dom@18

Step 2: Switch to the New Root API

// Before
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// After
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

Step 3: Audit Your Effects for Missing Cleanup

With Strict Mode double-invoking effects, any effect that doesn't clean up after itself will surface as a bug. Go through your useEffect calls and ensure every subscription, timer, and fetch has a corresponding cleanup:

// The correct pattern for every useEffect that starts something
useEffect(() => {
  const subscription = subscribe(handler);
  return () => subscription.unsubscribe(); // always clean up
}, [dependency]);

Step 4: Adopt New Features Gradually

Once the basics are in place, adopt new features where they make the most impact:

// Free win: automatic batching requires no changes
// Just upgrading + createRoot gives you this

// High impact for search/filter UIs: useTransition
const [isPending, startTransition] = useTransition();
startTransition(() => setResults(filter(items, query)));

// Useful when value comes from props: useDeferredValue
const deferredQuery = useDeferredValue(searchQuery);

// Accessible forms with SSR: useId
const id = useId();
return <><label htmlFor={id} /><input id={id} /></>;

React 18 API Quick Reference

API	Type	Purpose
`createRoot`	Function	Opt in to concurrent features
`hydrateRoot`	Function	SSR hydration with concurrent mode
`useTransition`	Hook	Non-urgent state updates with `isPending`
`startTransition`	Function	Mark updates as non-urgent (no `isPending`)
`useDeferredValue`	Hook	Defer re-rendering of non-urgent parts
`useId`	Hook	Stable, SSR-safe unique IDs
`useSyncExternalStore`	Hook	Safe subscriptions to external stores
`useInsertionEffect`	Hook	CSS-in-JS injection (library authors)
`flushSync`	Function	Force synchronous state flush
Automatic Batching	Behavior	Fewer re-renders in async contexts
Suspense (SSR)	Feature	Streaming HTML from the server

Key Takeaways

Upgrade to createRoot first — it unlocks every concurrent feature in this guide.
Automatic batching is a free performance improvement that comes with the upgrade alone.
Use useTransition and startTransition to keep UIs responsive during expensive updates.
Use useDeferredValue when the value driving an expensive render comes from props.
Use useId for accessible form relationships in SSR apps, never for list keys.
If Strict Mode breaks your app after upgrading, that's a real bug — fix the missing cleanup, don't disable Strict Mode.
useSyncExternalStore and useInsertionEffect are for library authors; most application developers won't need them directly.
React Server Components are the future, but they require a supporting framework. If you're on Next.js 13+, explore the App Router.

The common thread across all of React 18 is this: the library is getting smarter about when and how it does work, so you can focus on describing what your UI should look like — and React handles the rest.

This article content is taken from my React 18 Features Guide ebook.

If you found this guide useful and want to go deeper, check out The Ultimate React Ebooks Collection — a curated bundle of 20 ebooks and practical guides covering React, Next.js, JavaScript, interview prep, real-world projects, and more.

Everything you need to go from solid fundamentals to a production-ready React developer, in one place.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on Linkedin for regular content that I share every day.

I Built An Application For Live Quizzes To Engage Audience With AI Integration

Yogesh Chavan — Mon, 27 Apr 2026 10:10:29 +0000

Whether you're a teacher looking to make learning fun, a trainer running corporate workshops, or someone hosting a party, QuizPulse makes engagement effortless.

Ever wanted to run a live quiz for your team, class, or event — but existing tools felt too clunky or too expensive?

I built QuizPulse to fix exactly that.

Here's what makes it different:

✅ AI-Generated Questions: Describe your topic and AI writes the questions. Upload a PDF, and it generates quiz content automatically. No more hours spent crafting questions from scratch.

✅ Zero Setup for Players: Share a 6-digit PIN. Players join instantly from any browser. No downloads, no accounts, no friction.

✅ Real-Time Sync: Every player sees the question at the exact same moment. Answers lock in live.

✅ Live Leaderboards: Scores update in real-time with smooth animations. The energy stays high and the competition stays fierce. 🏆

✅ Works Everywhere: Phones, tablets, laptops. Any device with a browser.

Perfect for:

🎓 Classrooms & teachers: Test knowledge before training or reinforce learning after each topic

💼 Corporate training & workshops: Keep employees engaged and measure understanding

👥 Team building events: Create memorable, interactive experiences

🎉 Parties & trivia nights: Fun, casual competition for any gathering

How it works in 3 steps:

1️⃣ Create a quiz (AI-assisted or manually)

2️⃣ Share the 6-digit PIN with your audience

3️⃣ Host the quiz live and watch the leaderboard heat up

Try it free: livequiz.yogeshchavan.dev

Check out the short preview below of the application

Check out some of the application screenshots below.

Why QuizPulse?

Real-Time Sync

Questions appear simultaneously for all players. No lag, no confusion. Everyone sees the same question at the exact same moment, creating that electrifying game-show atmosphere.

AI-Powered Question Generation

Stop spending hours crafting quiz questions. Simply describe your topic and let AI generate engaging questions instantly. You can even upload a PDF and QuizPulse will extract relevant questions automatically — perfect for turning study materials or training documents into interactive quizzes.

Zero Setup for Players

Players join with a simple 6-digit PIN. That's it. No app downloads, no account creation, no friction. Works on any device with a browser — phones, tablets, laptops.

Live Leaderboards

Watch scores update in real-time with smooth animations. Keep the competitive spirit alive as participants race to the top. Nothing motivates like seeing your name climb the rankings.

How It Works

1. Create Your Quiz
Use AI to generate questions from any topic or PDF, or write your own. Set time limits, customize the experience to fit your needs.

2. Share the PIN
Launch your quiz and share the 6-digit game PIN. Players simply visit the site and enter the code — they're in within seconds.

3. Play Live
Control the pace, watch real-time results roll in, and celebrate winners together. The energy is contagious.

Built for Modern Teams

QuizPulse is built with the latest web technologies for a seamless experience:

Fast & Responsive: Works flawlessly on any device
Beautiful Design: A modern, sleek interface that looks professional
Analytics Dashboard: Track participation and quiz performance
Export Results: Download detailed reports of quiz sessions

Get Started in Minutes

Sign up for free at livequiz.yogeshchavan.dev
Create your first quiz (AI makes it fast)
Share the PIN with your audience
Watch engagement soar

No credit card required. No complicated setup. Just pure, interactive fun.

Start Hosting Free Today

Ready to transform your next meeting, class, or event? QuizPulse is free to get started.

Try it free: livequiz.yogeshchavan.dev

Would love to hear your feedback! Drop a comment or share with someone who runs quizzes, workshops, or classroom sessions. 🙌

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Next.js 16 Complete Beginner's Guide

Yogesh Chavan — Mon, 20 Apr 2026 07:32:36 +0000

In this article, you will learn everything you need to know about Next.js 16. This is a completely beginner-friendly guide.

Download this complete 110 pages PDF Guide

Section 1: Next.js Fundamentals

1. What is Next.js & Why React Developers Should Care

Next.js is a powerful React framework created by Vercel that enables developers to build full-stack web applications with ease. It extends React's capabilities by providing built-in solutions for routing, rendering, data fetching, and optimization. Unlike plain React which only handles the view layer, Next.js provides a complete framework for building production-ready applications.

Before Next.js, React developers had to manually configure webpack, set up routing with React Router, implement server-side rendering, and handle code splitting. Next.js eliminates this complexity by providing sensible defaults while remaining highly customizable. Version 16 brings significant improvements including enhanced performance, better TypeScript support, and improved developer experience.

Why React Developers Should Learn Next.js

As a React developer, learning Next.js is a natural progression that will significantly enhance your capabilities. Here are the key reasons why Next.js has become the go-to framework for React applications:

1. SEO Optimization - Unlike client-side rendered React apps where content is generated in the browser, Next.js can render pages on the server. This means search engine crawlers see fully rendered HTML, dramatically improving your site's visibility in search results.

2. Performance Out of the Box - Next.js automatically optimizes your application with features like automatic code splitting, image optimization, font optimization, and intelligent prefetching.

3. Multiple Rendering Strategies - Choose the best rendering approach for each page: Static Site Generation (SSG), Server-Side Rendering (SSR), Incremental Static Regeneration (ISR), or Client-Side Rendering (CSR).

4. Full-Stack Capabilities - Build API endpoints directly within your Next.js application using Route Handlers. No need for a separate backend server for simple to moderate API needs.

5. File-Based Routing - Create pages and routes simply by adding files to the app directory. No need to configure a router or maintain route definitions separately.

6. Built-in TypeScript Support - Next.js 16 comes with excellent TypeScript integration out of the box, providing better developer experience and catching errors at compile time.

💡 Tip: Next.js is used by major companies including Netflix, TikTok, Twitch, Hulu, Nike, and many more. Learning it opens doors to enterprise-level opportunities.

Key Features at a Glance

Feature	Description	Benefit
App Router	New routing system with RSC	Better performance & DX
Server Components	Components render on server	Smaller bundles
Streaming	Progressive page rendering	Faster perceived load
Route Handlers	API endpoints in Next.js	Full-stack in one project
Image Optimization	Auto image resizing	Faster loading images
Font Optimization	Self-hosted fonts	Better Core Web Vitals

2. Next.js vs CRA vs Vite

Comparing React Development Approaches

When starting a new React project, developers typically choose between three popular options: Create React App (CRA), Vite, or Next.js. Each has its strengths and ideal use cases.

Create React App (CRA)

Create React App was the official way to start React projects for years. It provides a zero-configuration setup for client-side React applications. However, CRA is no longer recommended by the React team.

Pros: Simple setup, good for learning React basics, well-documented

Cons: Client-side only (poor SEO), slow build times, no longer actively recommended

Vite

Vite is a modern build tool that offers lightning-fast development experience. It uses native ES modules and provides instant hot module replacement.

Pros: Extremely fast dev server, quick builds, modern architecture, framework-agnostic

Cons: Client-side focused (needs plugins for SSR), less opinionated, requires more configuration for full-stack

Next.js

Next.js is a full-featured React framework that provides everything you need for production applications out of the box.

Pros: Full-stack capabilities, multiple rendering strategies, built-in optimizations, excellent DX, strong community

Cons: Steeper learning curve, Vercel-centric ecosystem, more opinionated

Feature Comparison

Feature	CRA	Vite	Next.js
Server Rendering	No	Plugin	Built-in
Static Generation	No	Plugin	Built-in
API Routes	No	No	Built-in
File-based Routing	No	No	Built-in
Image Optimization	No	No	Built-in
Dev Server Speed	Slow	Fast	Fast
Production Ready	Basic	Good	Excellent

When to Choose Each Option

Choose CRA if you're learning React basics (though consider alternatives now)
Choose Vite for SPAs, prototypes, or when you need maximum flexibility
Choose Next.js for production apps, SEO-critical sites, or full-stack projects

⚠️ Important: The React team now recommends using a framework like Next.js for new projects instead of Create React App.

3. App Router vs Pages Router (Which One & Why)

Understanding Next.js Routing Systems

Next.js has two routing systems: the older Pages Router (pages/ directory) and the newer App Router (app/ directory). Understanding the differences helps you make the right choice for your project.

Pages Router (Legacy)

The Pages Router has been the standard since Next.js began. Files in the pages/ directory automatically become routes.

pages/
├── index.tsx        -> /
├── about.tsx        -> /about
├── blog/
│   └── [slug].tsx   -> /blog/:slug
└── api/
    └── users.ts     -> /api/users

Key Characteristics:

Uses getServerSideProps, getStaticProps for data fetching
All components are Client Components by default
Layouts require workarounds (_app.tsx, _document.tsx)
Simpler mental model

App Router (Recommended)

The App Router, introduced in Next.js 13 and now stable, uses the app/ directory with React Server Components as the foundation.

app/
├── page.tsx           -> /
├── layout.tsx         -> Shared layout
├── about/
│   └── page.tsx       -> /about
├── blog/
│   └── [slug]/
│       └── page.tsx   -> /blog/:slug
└── api/
    └── users/
        └── route.ts   -> /api/users

Key Characteristics:

React Server Components by default
Native async/await for data fetching
Nested layouts, loading states, error boundaries
Streaming and Suspense support

Key Differences

Feature	Pages Router	App Router
Default Components	Client	Server
Data Fetching	getServerSideProps	async/await
Layouts	_app.tsx workaround	Native nested
Loading States	Manual	loading.tsx
Error Handling	_error.tsx	error.tsx (nested)
Streaming	Limited	Full support

Why Choose the App Router?

For new projects, the App Router is recommended because:

Better Performance - Server Components reduce JavaScript sent to client
Simpler Data Fetching - Use async/await directly in components
Nested Layouts - Share UI between routes without re-rendering
Built-in Loading/Error States - Automatic handling with special files
Future-Proof - All new Next.js features target the App Router

💡 Tip: If you're starting a new project, use the App Router. Only use Pages Router for legacy projects or specific compatibility needs.

4. Setting Up Your First Next.js Project

Prerequisites

Before creating a Next.js project, ensure you have:

Node.js 18.17 or later - Download from nodejs.org
npm, yarn, or pnpm - Package manager (npm comes with Node.js)
Code editor - VS Code recommended with ESLint and Prettier extensions

Creating a New Project

Open your terminal and run:

npx create-next-app@latest my-nextjs-app

You'll be prompted with configuration options:

Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? Yes
Would you like to customize the default import alias? No

Recommended choices for beginners:

TypeScript: Yes (better DX and error catching)
ESLint: Yes (code quality)
Tailwind CSS: Yes (rapid styling)
src/ directory: No (simpler structure)
App Router: Yes (modern approach)

Running the Development Server

Navigate to your project and start the development server:

cd my-nextjs-app
npm run dev

Open http://localhost:3000 in your browser. You should see the Next.js welcome page!

Available Scripts

{
  "scripts": {
    "dev": "next dev",        // Start development server
    "build": "next build",    // Create production build
    "start": "next start",    // Run production server
    "lint": "next lint"       // Run ESLint
  }
}

💡 Tip: Use npm run dev -- -p 3001 to run on a different port if 3000 is already in use.

5. Understanding the Project Structure

Project Directory Overview

After creating a new Next.js project, you'll see this structure:

my-nextjs-app/
+-- app/
|   +-- favicon.ico
|   +-- globals.css
|   +-- layout.tsx
|   +-- page.tsx
+-- public/
|   +-- (static files)
+-- node_modules/
+-- .eslintrc.json
+-- .gitignore
+-- next.config.ts
+-- package.json
+-- postcss.config.mjs
+-- tailwind.config.ts
+-- tsconfig.json

Key Files and Directories

app/ - The main directory for your application code using the App Router.

app/layout.tsx - The root layout component that wraps all pages. Define global UI elements like headers and footers here.

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

app/page.tsx - The home page component, rendered at the root URL (/).

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
    </main>
  )
}

public/ - Static assets like images, fonts, and files. Accessible at the root URL.

next.config.ts - Next.js configuration file for customizing build and runtime behavior.

tailwind.config.ts - Tailwind CSS configuration for customizing your design system.

tsconfig.json - TypeScript configuration with Next.js-specific settings.

📝 Note: The globals.css file contains your global styles. When using Tailwind CSS, this file includes the Tailwind directives.

Section 2: Styling & Assets

1. CSS Modules vs Global CSS

Next.js supports multiple styling approaches out of the box: Global CSS, CSS Modules, Tailwind CSS, and CSS-in-JS libraries. Understanding when to use each helps you build maintainable styles.

Global CSS

Global styles apply to your entire application. Import them in your root layout:

/* app/globals.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
}

a {
    color: #0070f3;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

// app/layout.tsx
import './globals.css'

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    )
}

CSS Modules

CSS Modules scope styles to a component, preventing naming conflicts. Create files with .module.css extension:

/* app/components/Button.module.css */
.button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.primary {
    background: #0070f3;
    color: white;
}

.primary:hover {
    background: #0051a8;
}

.secondary {
    background: #eaeaea;
    color: #333;
}

// app/components/Button.tsx
import styles from './Button.module.css'

type ButtonProps = {
    variant?: 'primary' | 'secondary'
    children: React.ReactNode
}

export function Button({ variant = 'primary', children }: ButtonProps) {
    return (
        <button className={styles.button + ' ' + styles[variant]}>
            {children}
        </button>
    )
}

💡 Tip: CSS Modules automatically generate unique class names like 'Button_primary__x7f3a', ensuring styles never leak between components.

2. Tailwind CSS v4 Setup & Best Practices

What's New in Tailwind CSS v4

Tailwind CSS v4 is a major rewrite with significant improvements: it's up to 10x faster, uses native CSS cascade layers, and has a simplified configuration using CSS instead of JavaScript.

Installing Tailwind CSS v4

# Install Tailwind CSS v4
npm install tailwindcss @tailwindcss/postcss postcss

Configuration with CSS (New in v4)

Tailwind v4 uses CSS-based configuration instead of tailwind.config.js:

/* app/globals.css */
@import "tailwindcss";

/* Custom theme configuration using CSS */
@theme {
    --color-primary: #0070f3;
    --color-secondary: #7928ca;
    --font-sans: "Inter", system-ui, sans-serif;
    --spacing-18: 4.5rem;
}

/* Custom utilities */
@utility container-narrow {
    max-width: 42rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

// postcss.config.mjs
export default {
    plugins: {
        '@tailwindcss/postcss': {}
    }
}

Using Tailwind in Components

// app/components/Card.tsx
export function Card({ title, description, children }) {
    return (
        <div className="rounded-xl border border-gray-200 bg-white p-6
                        shadow-sm hover:shadow-md transition-shadow">
            <h2 className="text-xl font-semibold text-gray-900 mb-2">
                {title}
            </h2>
            <p className="text-gray-600 mb-4">
                {description}
            </p>
            {children}
        </div>
    )
}

Best Practices

Use consistent spacing scale (p-4, p-6, p-8 not p-5, p-7)
Extract repeated patterns into components, not @apply
Use CSS variables for brand colors via @theme
Leverage the new container queries in v4

⚠️ Important: Tailwind v4 no longer requires a tailwind.config.js file. All configuration happens in your CSS using @theme and other directives.

3. Fonts with next/font

Why Use next/font?

next/font automatically optimizes fonts and removes external network requests for improved privacy and performance. It self-hosts font files and eliminates layout shift with automatic font fallbacks.

Using Google Fonts

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
    subsets: ['latin'],
    display: 'swap',
    variable: '--font-inter',
})

const robotoMono = Roboto_Mono({
    subsets: ['latin'],
    display: 'swap',
    variable: '--font-roboto-mono',
})

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={inter.variable + ' ' + robotoMono.variable}>
            <body className={inter.className}>
                {children}
            </body>
        </html>
    )
}

Using Local Fonts

// app/layout.tsx
import localFont from 'next/font/local'

const myFont = localFont({
    src: [
        {
            path: '../fonts/MyFont-Regular.woff2',
            weight: '400',
            style: 'normal',
        },
        {
            path: '../fonts/MyFont-Bold.woff2',
            weight: '700',
            style: 'normal',
        },
    ],
    variable: '--font-my-font',
})

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={myFont.variable}>
            <body>{children}</body>
        </html>
    )
}

Using with Tailwind CSS

/* app/globals.css - Tailwind v4 */
@import "tailwindcss";

@theme {
    --font-sans: var(--font-inter), system-ui, sans-serif;
    --font-mono: var(--font-roboto-mono), monospace;
}

💡 Tip: Always use display: 'swap' to prevent invisible text while fonts load. This improves Core Web Vitals scores.

4. Images with next/image

Automatic Image Optimization

The next/image component automatically optimizes images: resizing, converting to modern formats (WebP/AVIF), and lazy loading. It prevents layout shift with automatic dimension handling.

Basic Usage

import Image from 'next/image'

// Local image (automatically gets dimensions)
import profilePic from './profile.jpg'

export function Avatar() {
    return (
        <Image
            src={profilePic}
            alt="Profile picture"
            placeholder="blur" // Shows blurred version while loading
        />
    )
}

// Remote image (must specify dimensions)
export function ProductImage({ src, name }) {
    return (
        <Image
            src={src}
            alt={name}
            width={400}
            height={300}
            priority // Load immediately (above the fold)
        />
    )
}

Responsive Images

// Fill container (responsive)
export function HeroImage() {
    return (
        <div className="relative h-[400px] w-full">
            <Image
                src="/hero.jpg"
                alt="Hero image"
                fill
                style={{ objectFit: 'cover' }}
                sizes="100vw"
                priority
            />
        </div>
    )
}

// Responsive with sizes hint
export function BlogImage({ src, alt }) {
    return (
        <Image
            src={src}
            alt={alt}
            width={800}
            height={400}
            sizes="(max-width: 768px) 100vw, 800px"
            className="rounded-lg"
        />
    )
}

Configuring Remote Images

By default, Next.js blocks remote images for security reasons. The next/image component optimizes images on-demand, which means your server fetches, processes, and caches external images. Without restrictions, malicious users could abuse your server to process images from any URL, potentially causing security vulnerabilities and unexpected costs.

To use remote images, you must explicitly whitelist the domains in your next.config.ts file using the remotePatterns configuration:

// next.config.ts
import type { NextConfig } from 'next'

const config: NextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'images.unsplash.com',
            },
            {
                protocol: 'https',
                hostname: '*.cloudinary.com',
            },
        ],
    },
}

export default config

Why This Configuration Matters:

Security - Prevents your server from being used to fetch and process arbitrary external images
Cost Control - Image optimization uses server resources; whitelisting prevents abuse
Performance - Only trusted CDNs and image sources are optimized
Wildcards - Use '.' prefix to allow all subdomains (e.g., '.cloudinary.com')

📝 Note: Use priority prop for Largest Contentful Paint (LCP) images like hero images. This preloads them for better performance.

5. Metadata, SEO & Open Graph Images

Static Metadata

Define metadata in your layout or page files to improve SEO. Next.js automatically generates the appropriate meta tags.

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
    title: {
        default: 'My App',
        template: '%s | My App', // For child pages
    },
    description: 'A Next.js application',
    keywords: ['Next.js', 'React', 'JavaScript'],
    authors: [{ name: 'Your Name' }],
    openGraph: {
        title: 'My App',
        description: 'A Next.js application',
        url: 'https://myapp.com',
        siteName: 'My App',
        images: [
            {
                url: '/og-image.png',
                width: 1200,
                height: 630,
            },
        ],
        locale: 'en_US',
        type: 'website',
    },
    twitter: {
        card: 'summary_large_image',
        title: 'My App',
        description: 'A Next.js application',
        images: ['/og-image.png'],
    },
}

Dynamic Metadata

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

type Props = {
    params: Promise<{ slug: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { slug } = await params
    const post = await getPost(slug)

    return {
        title: post.title,
        description: post.excerpt,
        openGraph: {
            title: post.title,
            description: post.excerpt,
            images: [post.coverImage],
        },
    }
}

Dynamic OG Images

// app/og/route.tsx
import { ImageResponse } from 'next/og'

export async function GET(request: Request) {
    const { searchParams } = new URL(request.url)
    const title = searchParams.get('title') || 'My App'

    return new ImageResponse(
        (
            <div style={{
                display: 'flex',
                fontSize: 60,
                background: 'linear-gradient(to bottom, #1a1a2e, #16213e)',
                color: 'white',
                width: '100%',
                height: '100%',
                alignItems: 'center',
                justifyContent: 'center',
            }}>
                {title}
            </div>
        ),
        { width: 1200, height: 630 }
    )
}

💡 Tip: Use the template pattern in title metadata so child pages automatically append your site name: 'Blog Post Title | My App'

Section 3: Routing in Depth

1. File-Based Routing Explained

Next.js uses a file-system based router where folders define routes. This means the structure of your app/ directory directly maps to your URL structure.

app/
+-- page.tsx           -> /
+-- about/
|   +-- page.tsx       -> /about
+-- blog/
|   +-- page.tsx       -> /blog
+-- contact/
    +-- page.tsx       -> /contact

Creating Your First Routes

Each route requires a page.tsx file inside its folder. The page file exports a React component that renders when users visit that route.

// app/page.tsx - Home page (/)
export default function HomePage() {
    return (
        <main>
            <h1>Welcome to My App</h1>
            <p>This is the home page.</p>
        </main>
    )
}

// app/about/page.tsx - About page (/about)
export default function AboutPage() {
    return (
        <main>
            <h1>About Us</h1>
            <p>Learn more about our company.</p>
        </main>
    )
}

Nested Routes

Create nested folders for nested routes:

app/
+-- blog/
    +-- page.tsx           -> /blog
    +-- posts/
        +-- page.tsx       -> /blog/posts

// app/blog/page.tsx
export default function BlogPage() {
    return <h1>Blog</h1>
}

// app/blog/posts/page.tsx
export default function PostsPage() {
    return <h1>All Blog Posts</h1>
}

Navigation Between Pages

Use the Link component for client-side navigation:

import Link from 'next/link'

export default function Navigation() {
    return (
        <nav>
            <Link href="/">Home</Link>
            <Link href="/about">About</Link>
            <Link href="/blog">Blog</Link>
            <Link href="/contact">Contact</Link>
        </nav>
    )
}

💡 Tip: Always use the Link component instead of anchor tags for internal navigation. Link enables client-side navigation and automatic prefetching for faster page loads.

2. Pages, Layouts & Nested Routes

Understanding Layouts

Layouts wrap pages and preserve state across navigations. They're perfect for shared UI like headers, sidebars, and footers.

// app/layout.tsx - Root Layout (required)
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <header>
                    <nav>My App</nav>
                </header>
                <main>{children}</main>
                <footer>© 2024</footer>
            </body>
        </html>
    )
}

Nested Layouts

Each route segment can have its own layout that nests inside parent layouts:

app/
+-- layout.tsx              -> Root layout
+-- page.tsx                -> Home page
+-- dashboard/
    +-- layout.tsx          -> Dashboard layout (nested)
    +-- page.tsx            -> /dashboard
    +-- settings/
        +-- page.tsx        -> /dashboard/settings

// app/dashboard/layout.tsx
export default function DashboardLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <div className="dashboard">
            <aside>
                <nav>
                    <a href="/dashboard">Overview</a>
                    <a href="/dashboard/settings">Settings</a>
                </nav>
            </aside>
            <section>{children}</section>
        </div>
    )
}

Layout Benefits

Preserved State - Layouts don't re-render when navigating between pages they wrap
No Prop Drilling - Fetch data once in layout, available to all children
Partial Rendering - Only the page content updates, not the entire layout

⚠️ Important: The root layout (app/layout.tsx) is required and must contain html and body tags. Nested layouts should NOT include these tags.

3. Dynamic Routes & Catch-All Routes

Dynamic Segments

Use square brackets to create dynamic routes that match variable paths:

app/
+-- blog/
    +-- [slug]/
        +-- page.tsx       -> /blog/hello-world, /blog/my-post

// app/blog/[slug]/page.tsx
type Props = {
    params: Promise<{ slug: string }>
}

export default async function BlogPost({ params }: Props) {
    const { slug } = await params

    return (
        <article>
            <h1>Post: {slug}</h1>
        </article>
    )
}

Multiple Dynamic Segments

app/
+-- shop/
    +-- [category]/
        +-- [product]/
            +-- page.tsx   -> /shop/electronics/iphone

// app/shop/[category]/[product]/page.tsx
type Props = {
    params: Promise<{ category: string; product: string }>
}

export default async function ProductPage({ params }: Props) {
    const { category, product } = await params

    return (
        <div>
            <p>Category: {category}</p>
            <p>Product: {product}</p>
        </div>
    )
}

Catch-All Segments

Use [...slug] to match any number of segments:

app/
+-- docs/
    +-- [...slug]/
        +-- page.tsx       -> /docs/a, /docs/a/b, /docs/a/b/c

// app/docs/[...slug]/page.tsx
type Props = {
    params: Promise<{ slug: string[] }>
}

export default async function DocsPage({ params }: Props) {
    const { slug } = await params
    // slug = ['a', 'b', 'c'] for /docs/a/b/c

    return (
        <div>
            <p>Path: {slug.join(' / ')}</p>
        </div>
    )
}

💡 Tip: Use [...slug] for optional catch-all routes that also match the parent path (/docs).

4. Route Groups & Folder Conventions

What Are Route Groups?

Route groups organize routes without affecting the URL structure. Wrap folder names in parentheses:

app/
+-- (marketing)/
|   +-- layout.tsx         -> Marketing layout
|   +-- page.tsx           -> / (home page)
|   +-- about/
|   |   +-- page.tsx       -> /about
|   +-- pricing/
|       +-- page.tsx       -> /pricing
+-- (app)/
    +-- layout.tsx         -> App layout
    +-- dashboard/
    |   +-- page.tsx       -> /dashboard
    +-- settings/
        +-- page.tsx       -> /settings

Use Cases for Route Groups

1. Different layouts for different sections:

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
    return (
        <div className="marketing">
            <header>Marketing Header</header>
            {children}
        </div>
    )
}

// app/(app)/layout.tsx
export default function AppLayout({ children }) {
    return (
        <div className="app">
            <Sidebar />
            {children}
        </div>
    )
}

2. Organizing by feature:

app/
+-- (auth)/
|   +-- login/
|   +-- register/
+-- (dashboard)/
    +-- overview/
    +-- analytics/

Private Folders

Prefix with underscore to exclude from routing:

app/
+-- _components/     -> Not a route, just organization
+-- _lib/            -> Not a route, utilities
+-- page.tsx         -> Actual route

📝 Note: Route groups are purely organizational. The parentheses folder name is completely removed from the URL path.

5. Not Found & Error Routes

Custom 404 Page

Create a not-found.tsx file to show when a page doesn't exist:

// app/not-found.tsx
import Link from 'next/link'

export default function NotFound() {
    return (
        <div className="not-found">
            <h1>404 - Page Not Found</h1>
            <p>Sorry, we couldn't find the page you're looking for.</p>
            <Link href="/">Return Home</Link>
        </div>
    )
}

Triggering Not Found

Use the notFound() function to programmatically show the 404 page:

// app/blog/[slug]/page.tsx
import { notFound } from 'next/navigation'

export default async function BlogPost({ params }) {
    const { slug } = await params
    const post = await getPost(slug)

    if (!post) {
        notFound() // Shows the not-found.tsx page
    }

    return <article>{post.content}</article>
}

Error Handling

Create error.tsx to handle runtime errors gracefully:

// app/error.tsx
'use client' // Error boundaries must be Client Components

import { useEffect } from 'react'

export default function Error({
    error,
    reset,
}: {
    error: Error & { digest?: string }
    reset: () => void
}) {
    useEffect(() => {
        console.error(error)
    }, [error])

    return (
        <div className="error">
            <h2>Something went wrong!</h2>
            <button onClick={() => reset()}>Try again</button>
        </div>
    )
}

Nested Error Boundaries

Error files create boundaries at that route segment level. Errors bubble up to the nearest error boundary:

app/
+-- error.tsx              -> Catches all errors
+-- dashboard/
    +-- error.tsx          -> Catches dashboard errors only
    +-- page.tsx

⚠️ Important: error.tsx must be a Client Component (add 'use client' at the top). The reset() function attempts to re-render the segment.

6. Loading UI & Suspense Boundaries

Automatic Loading States

Create a loading.tsx file to show loading UI while a route segment loads:

// app/dashboard/loading.tsx
export default function Loading() {
    return (
        <div className="loading">
            <div className="spinner"></div>
            <p>Loading dashboard...</p>
        </div>
    )
}

How It Works

Next.js automatically wraps your page in a Suspense boundary:

// What Next.js does internally:
<Suspense fallback={<Loading />}>
    <Page />
</Suspense>

Skeleton Components

Create better loading experiences with skeletons:

// app/dashboard/loading.tsx
export default function DashboardLoading() {
    return (
        <div className="dashboard-skeleton">
            <div className="skeleton-header" />
            <div className="skeleton-cards">
                <div className="skeleton-card" />
                <div className="skeleton-card" />
                <div className="skeleton-card" />
            </div>
            <div className="skeleton-table" />
        </div>
    )
}

/* Skeleton animation */
.skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

Manual Suspense Boundaries

Use Suspense directly for more granular control:

import { Suspense } from 'react'

export default function Dashboard() {
    return (
        <div>
            <h1>Dashboard</h1>

            <Suspense fallback={<CardsSkeleton />}>
                <DashboardCards />
            </Suspense>

            <Suspense fallback={<ChartSkeleton />}>
                <RevenueChart />
            </Suspense>
        </div>
    )
}

💡 Tip: Use multiple Suspense boundaries to stream different parts of the page independently. This allows faster content to appear first.

Section 4: Rendering & Data Fetching

1. Rendering Models: CSR, SSR, SSG, ISR

Next.js supports multiple rendering strategies. Choosing the right one depends on your content type and update frequency.

Client-Side Rendering (CSR)

Content is rendered in the browser using JavaScript. The server sends an empty HTML shell.

'use client'

import { useState, useEffect } from 'react'

export default function ClientPage() {
    const [data, setData] = useState(null)

    useEffect(() => {
        fetch('/api/data')
            .then(res => res.json())
            .then(setData)
    }, [])

    if (!data) return <p>Loading...</p>

    return <div>{data.content}</div>
}

Use for: User dashboards, real-time data, personalized content

Server-Side Rendering (SSR)

Content is rendered on the server for each request. Fresh data every time.

// app/products/page.tsx
export const dynamic = 'force-dynamic' // Opt into SSR

export default async function ProductsPage() {
    const products = await fetch('https://api.example.com/products', {
        cache: 'no-store' // Don't cache, always fresh
    }).then(res => res.json())

    return (
        <ul>
            {products.map(p => <li key={p.id}>{p.name}</li>)}
        </ul>
    )
}

Use for: Frequently changing data, user-specific content

Static Site Generation (SSG)

Content is rendered at build time. Fastest performance, cached globally.

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
    const posts = await getPosts()
    return posts.map(post => ({ slug: post.slug }))
}

export default async function BlogPost({ params }) {
    const { slug } = await params
    const post = await getPost(slug)
    return <article>{post.content}</article>
}

Use for: Blog posts, documentation, marketing pages

Incremental Static Regeneration (ISR)

Static pages that revalidate after a time period. Best of both worlds.

// app/products/page.tsx
export const revalidate = 3600 // Revalidate every hour

export default async function ProductsPage() {
    const products = await fetch('https://api.example.com/products')
        .then(res => res.json())

    return (
        <ul>
            {products.map(p => <li key={p.id}>{p.name}</li>)}
        </ul>
    )
}

Use for: E-commerce products, news articles, content that changes periodically

Comparison Table

Strategy	Build Time	Request Time	SEO	Fresh Data
CSR	Fast	Slow	Poor	Yes
SSR	Fast	Slower	Good	Yes
SSG	Slower	Fast	Good	No
ISR	Slower	Fast	Good	Periodic

2. Server Components vs Client Components

Understanding the Difference

In Next.js App Router, components are Server Components by default. They render on the server and send HTML to the client with zero JavaScript.

When to Use Server Components

Server Components Can:

Fetch data directly from databases
Access backend resources and APIs
Keep sensitive data on the server (API keys)

Server Components Cannot:

Use React hooks (useState, useEffect)
Add event listeners (onClick, onChange)
Access browser APIs (localStorage, window)

// Server Component (default) - app/dashboard/page.tsx
async function getData() {
    const res = await fetch('https://api.example.com/data', {
        headers: { 'API-Key': process.env.API_KEY }
    })
    return res.json()
}

export default async function Dashboard() {
    const data = await getData()

    return (
        <div>
            <h1>Dashboard</h1>
            <p>Total users: {data.userCount}</p>
        </div>
    )
}

When to Use Client Components

Use Client Components when you need:

State and lifecycle effects (useState, useEffect)
Event handlers (onClick, onSubmit)
Browser APIs (localStorage, geolocation)

Understanding Hydration

Hydration is the process where React attaches event listeners and makes server-rendered HTML interactive in the browser. When a page loads, the server sends pre-rendered HTML so users see content immediately. Then React 'hydrates' this HTML by attaching JavaScript functionality to make buttons clickable, forms submittable, and state manageable.

How Hydration Works:

Server renders HTML and sends it to the browser (fast initial display)
Browser displays the static HTML immediately (users see content)
JavaScript bundle loads in the background
React hydrates the HTML by attaching event handlers and state
Page becomes fully interactive

Hydration Errors and How to Fix Them

Hydration errors occur when the server-rendered HTML doesn't match what React expects to render on the client. This mismatch confuses React and can cause visual glitches or broken functionality.

Common Causes of Hydration Errors:

Using browser-only APIs like window, localStorage, or document during render
Rendering dates/times that differ between server and client
Using random values or Math.random() during render
Invalid HTML nesting (e.g., div inside p, or p inside p)
Browser extensions modifying the HTML

How to Fix Hydration Errors:

// BAD: Using window during render causes hydration error
export default function BadComponent() {
    const width = window.innerWidth // Error: window is undefined on server
    return <div>Width: {width}</div>
}

// GOOD: Use useEffect for browser-only code
"use client"
import { useState, useEffect } from 'react'

export default function GoodComponent() {
    const [width, setWidth] = useState(0)

    useEffect(() => {
        setWidth(window.innerWidth)
    }, [])

    return <div>Width: {width}</div>
}

// GOOD: Use suppressHydrationWarning for intentional mismatches
export default function TimeDisplay() {
    return (
        <time suppressHydrationWarning>
            {new Date().toLocaleTimeString()}
        </time>
    )
}

// GOOD: Use dynamic import with ssr: false for client-only components
import dynamic from 'next/dynamic'

const ClientOnlyChart = dynamic(() => import('./Chart'), {
    ssr: false,
    loading: () => <p>Loading chart...</p>
})

💡 Tip: Server Components don't hydrate at all - they render only on the server and send pure HTML. This is why they're more performant and can't use hooks or browser APIs.

⚠️ Important: Keep Client Components as leaf nodes in your component tree. Push interactivity down and keep data fetching in Server Components.

3. 'use client' - When & Why to Use It

The Client Boundary

The 'use client' directive marks a file as a Client Component. Place it at the very top of the file, before any imports.

"use client"

import { useState } from 'react'

export default function Counter() {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    )
}

Common Patterns

Make small, focused Client Components and compose them within Server Components:

// app/products/page.tsx (Server Component)
import { AddToCartButton } from './AddToCartButton'

async function getProducts() {
    return fetch('https://api.example.com/products').then(r => r.json())
}

export default async function ProductsPage() {
    const products = await getProducts()

    return (
        <div className="products-grid">
            {products.map(product => (
                <div key={product.id}>
                    <h2>{product.name}</h2>
                    <p>${product.price}</p>
                    <AddToCartButton productId={product.id} />
                </div>
            ))}
        </div>
    )
}

// app/products/AddToCartButton.tsx (Client Component)
"use client"

import { useState } from 'react'

export function AddToCartButton({ productId }: { productId: string }) {
    const [added, setAdded] = useState(false)

    return (
        <button
            onClick={() => {
                addToCart(productId)
                setAdded(true)
            }}
        >
            {added ? 'Added!' : 'Add to Cart'}
        </button>
    )
}

💡 Tip: The boundary effect means all components imported into a Client Component also become client components. Design your component tree to minimize the client boundary.

4. Fetching Data in Server Components

Direct Data Fetching

Server Components can fetch data directly using async/await:

// app/posts/page.tsx
async function getPosts() {
    const res = await fetch('https://api.example.com/posts')
    return res.json()
}

export default async function PostsPage() {
    const posts = await getPosts()

    return (
        <ul>
            {posts.map(post => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    )
}

Database Queries

Query your database directly - no API layer needed:

// app/users/page.tsx
import { db } from '@/lib/db'

export default async function UsersPage() {
    const users = await db.user.findMany({
        orderBy: { createdAt: 'desc' },
        take: 10
    })

    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    )
}

Caching Behavior

Next.js automatically caches fetch requests:

// Cached indefinitely (default)
const data = await fetch('https://api.example.com/data')

// Revalidate every hour
const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 }
})

// No caching - always fresh
const data = await fetch('https://api.example.com/data', {
    cache: 'no-store'
})

⚠️ Important: Sensitive operations like database queries should only happen in Server Components where the code never reaches the client.

5. Parallel & Sequential Data Fetching

Sequential Fetching (Waterfall)

When one fetch depends on another:

// Each fetch waits for the previous one
async function getUser(id: string) {
    const res = await fetch('/api/users/' + id)
    return res.json()
}

async function getUserPosts(userId: string) {
    const res = await fetch('/api/users/' + userId + '/posts')
    return res.json()
}

export default async function UserProfile({ params }) {
    const { id } = await params
    const user = await getUser(id)         // First, get user
    const posts = await getUserPosts(user.id)  // Then, get posts

    return (
        <div>
            <h1>{user.name}</h1>
            <PostsList posts={posts} />
        </div>
    )
}

Parallel Fetching

When fetches are independent, run them simultaneously:

// All fetches start at the same time
async function getUser(id: string) {
    const res = await fetch('/api/users/' + id)
    return res.json()
}

async function getPosts() {
    const res = await fetch('/api/posts')
    return res.json()
}

async function getComments() {
    const res = await fetch('/api/comments')
    return res.json()
}

export default async function Dashboard({ params }) {
    const { id } = await params

    // Start all fetches simultaneously
    const [user, posts, comments] = await Promise.all([
        getUser(id),
        getPosts(),
        getComments()
    ])

    return { user, posts, comments }
}

Practical Example

// app/dashboard/page.tsx
async function getStats() {
    return fetch('https://api.example.com/stats').then(r => r.json())
}

async function getRecentOrders() {
    return fetch('https://api.example.com/orders?limit=5').then(r => r.json())
}

async function getNotifications() {
    return fetch('https://api.example.com/notifications').then(r => r.json())
}

export default async function Dashboard() {
    const [stats, orders, notifications] = await Promise.all([
        getStats(),
        getRecentOrders(),
        getNotifications()
    ])

    return (
        <div>
            <StatsCards stats={stats} />
            <OrdersTable orders={orders} />
            <NotificationsList notifications={notifications} />
        </div>
    )
}

⚠️ Important: Always use Promise.all() / Promise.allSettled() / Promise.race() depending on your requirement when fetching independent data. This can dramatically improve page load times.

Understanding Promise Methods

Promise.all() - Waits for ALL promises to resolve. If any promise rejects, the entire operation fails immediately. Use when you need all data and can't proceed without it.

Promise.allSettled() - Waits for ALL promises to complete (resolve or reject). Never fails early; returns status and value/reason for each. Use when you want partial results even if some requests fail.

Promise.race() - Returns as soon as the FIRST promise settles (resolves or rejects). Use for timeouts or when you only need the fastest response.

// Promise.all - fails if any request fails
const [users, posts] = await Promise.all([getUsers(), getPosts()])

// Promise.allSettled - returns results even if some fail
const results = await Promise.allSettled([getUsers(), getPosts()])
results.forEach(result => {
    if (result.status === 'fulfilled') console.log(result.value)
    if (result.status === 'rejected') console.log(result.reason)
})

// Promise.race - returns first settled promise
const fastest = await Promise.race([fetchFromCDN1(), fetchFromCDN2()])

This article covers the first half of the Next.js 16 Complete Beginner's Guide. For the complete guide including Server Actions, Authentication, Backend APIs, and more, download the full 110-page PDF for FREE.

🚀 Ready to Master Next.js?

Take your skills to the next level by building large-scale, production-ready applications with my comprehensive video course.

👉 Enroll Now.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

From Idea to Paid SaaS in 24 Hours — The Claude Code Blueprint Is Live

Yogesh Chavan — Fri, 10 Apr 2026 10:02:39 +0000

What if you could go from a blank VS Code screen to a fully deployed, revenue-generating SaaS app, live on your own domain, in a single day?

That's exactly what "From Idea to Paid SaaS in 24 Hours" teaches you. This is a brand-new, hands-on 5+ hours video course built around Claude Code, the AI-powered development workflow that's changing how indie developers ship software.

FREE Previews From The Course

Why This Course Exists

Most AI coding courses teach you to build toy projects. A to-do app. A chat widget. Something you'd never actually charge money for. And even when they build something real, they stop at localhost.

This course doesn't stop there.

You'll build a production-grade URL shortener SaaS, complete with user authentication, real-time click analytics, QR code generation, payment integration, and SEO-optimized pages. The kind of app people actually pay for.

But this course isn't really about building URL shortner app. It's about giving you the blueprint, the mindset, and the skills to build whatever app lives in your head, and turn it into a real product people pay for.

Then you'll deploy it to your own custom domain (Namecheap, GoDaddy, or any registrar), add analytics to track real user behavior, and learn 4 proven strategies to rank higher on Google Search, with a full Google Search Console walkthrough so you can see exactly how your site performs in search results.

And you'll do it step by step, commit by commit, following the exact workflow used to ship multiple real-world production apps.

What You'll Learn Across 10 Modules

The course covers the entire journey from idea to income:

Strategy: How to find high-value SaaS ideas worth building
Design: Source production-quality design references (no design skills needed)
Development: Build full-stack apps within a 24-hour window
AI Prompting: Generate production-ready UI with single, well-crafted prompts
Security: Implement authentication, validation, and access control the right way
Monetization: Integrate payments and manage webhooks for real revenue
SaaS Architecture: Multi-tenancy, subscription tiers, and scalable data models
Growth: 4 ways to rank your site higher on Google Search + a hands-on Google Search Console demo covering sitemaps, indexing, and search performance tracking
DevOps: Deploy to production on Vercel with your own custom domain (Namecheap, GoDaddy, etc.), CI/CD pipelines, and zero-downtime deployments
Analytics: Add product analytics to track user behavior, measure engagement, and optimize conversion funnels with real data

The Tech Stack

You'll work with a modern, battle-tested stack:

Next.js 16 with TypeScript
PostgreSQL with Drizzle ORM
better-Auth for authentication (email + OAuth)
Tailwind CSS v4 + shadcn/ui for polished interfaces
Zod for validation
Vercel for deployment
Google Search Console for SEO tracking

The Secret Weapon: Token-Efficient Prompting

Here's something most developers get wrong with Claude Code — they burn through their API tokens in hours and hit usage limits before lunch.

This course teaches you a systematic prompting framework that gets 2-3x more output on the same subscription. You'll learn how to ship apps throughout the entire week while retaining 30-40% of your usage limits. That's the difference between building one app a month and shipping one every week.

What's Included

5+ hours of focused video content
1 complete SaaS built from scratch to deployment
6 production app source codes with lifetime access
Claude Prompting Strategies Guide — save up to 60% of your tokens
2-3x Output Optimization Guide — eliminate context bloat and token waste
Drizzle ORM Getting Started Guide — setup, migrations, and query patterns
Claude Code Power Tips Cheatsheet — quick-reference for daily use
50-page Claude Code Getting Started Guide — comprehensive setup documentation

🎁 Massive Bonuses (100% FREE)

You’re not just getting the course… you’re getting real-world assets you can use immediately.

💎 Bonus #1: 6 Production-Ready Apps (Full Source Code)

Build faster by learning from real, working applications:

👉 No toy projects. These are real-world, production-grade builds.

💎 Bonus #2: Premium Guides + Cheatsheets

📘 Claude Code Guide (50 Pages)
→ Learn how to use Claude effectively for real development workflows
📗 Drizzle ORM with Next.js
→ Modern database workflows made simple
⚡ Claude Power Tips Cheatsheet
→ Save hours with proven shortcuts and workflows

🔥 Total Value: Massive
💰 Your Price: Included FREE

Who Is This For?

This course is built for developers who know JavaScript and React basics and want to:

Build and launch their first (or next) SaaS product
Learn how to use AI-assisted development effectively, not wastefully
Ship real products that generate revenue, not portfolio pieces
Master the full stack — from database to deployment to payments

If you've been stuck in tutorial hell or can't seem to bridge the gap between "I built a project" and "I have paying customers," this course was made for you.

Launch Offer — 55% Off

The course is available right now at a special launch price:

~~$29~~ → $13 — one-time payment, no subscriptions, no recurring fees.

You get lifetime access to all course content, source code, bonus guides, and every future update.

Get the course before the launch price expires

Stop watching tutorials. Start shipping products. Build your first paid SaaS in 24 hours.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

🚀 Live Webinar Tomorrow: Build a Restaurant Ordering App from Scratch

Yogesh Chavan — Fri, 03 Apr 2026 14:18:12 +0000

Imagine this 👇

Your customers scan a QR code, browse your menu, and place orders instantly — no waiting, no confusion.

In this 3+ hour LIVE webinar through Zoom, I'll show you how to build a complete Restaurant Ordering Application step-by-step 💻

📅 Webinar Details


🗓 Date	4th April, 2026
⏰ Time	4:00 PM IST
🎯 Duration	3+ Hours

🔥 What You'll Learn

📱 Build a seamless digital menu for customers
🛒 Enable users to place orders directly from their phones
⚡ Implement real-time order updates (Pending → Confirmed → Preparing → Ready → Served)
🧑‍💼 Create a powerful Admin Dashboard to manage products & orders
🎨 Design a clean, modern, user-friendly UI
🚀 Learn how to structure and build a real-world full-stack application

💡 Perfect For

✅ Developers who want to build real-world projects

✅ Students looking to level up their portfolio

✅ Anyone interested in building freelancing projects

✅ Anyone who wants to learn how to build any type of application in hours instead of days/months

⚠️ Important Note

This is a LIVE, hands-on session — not just theory. You'll see everything being built in real-time.

🎟 Limited Seats Available

As the webinar will be through Zoom, seats are limited. So, hurry up!

Click the link below to register for the webinar.

Will not be able to join the webinar live? Still register, and you will get a recording of the webinar.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/