Forem: Yogesh Chavan

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.

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/

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/

Getting Started with Claude Code - A Complete Beginner's Guide

Yogesh Chavan — Fri, 03 Apr 2026 07:36:46 +0000

1. Introduction to Claude Code

What is Claude Code?

Claude Code is an agentic coding tool developed by Anthropic that lives in your terminal, understands your codebase, and helps you code faster. Unlike traditional AI assistants that simply answer questions and wait for your next prompt, Claude Code can autonomously read your files, run commands, make changes, and work through complex problems while you watch, redirect, or step away entirely.

Think of Claude Code as having a highly capable junior developer working alongside you. You describe what you want in plain language, and Claude Code figures out how to build it. It explores your codebase, plans the approach, implements the solution, and verifies it works — all through natural language commands.

Claude Code is available across multiple platforms including Terminal CLI, VS Code extension, JetBrains IDEs, Desktop app, Web browser, and even Slack integration.

Why Claude Code for React Developers?

For React.js developers, Claude Code offers tremendous value by automating routine tasks and accelerating development workflows:

Component Generation — Describe a component in plain language and Claude builds it with proper TypeScript types, hooks, and styling
Debugging — Paste an error message and Claude traces it through your codebase, identifies the root cause, and implements a fix
Testing — Claude can write comprehensive unit tests, integration tests, and fix failing tests automatically
Refactoring — Modernize legacy code, convert class components to hooks, or restructure your project architecture
Git Operations — Claude handles commits, branches, PRs, and merge conflicts through natural language
Documentation — Generate JSDoc comments, README files, and API documentation from your code

Claude Code vs Traditional AI Assistants

Understanding how Claude Code differs from traditional AI coding assistants helps you leverage its full potential:

Feature	Traditional AI Assistants	Claude Code
Interaction Model	Question-answer format	Agentic, autonomous execution
Code Access	Copy-paste snippets	Reads entire codebase directly
File Modification	Suggests changes only	Edits files with permission
Command Execution	Not supported	Runs bash, npm, git commands
Context	Single conversation	Persistent memory across sessions
Verification	Manual by user	Auto-runs tests, lints code

Prerequisites and Requirements

Before installing Claude Code, ensure you have the following:

Node.js 18+ — Required for the CLI. Check with: node --version
Git — For version control integration. Windows users need Git for Windows
Terminal/Command Prompt — Any modern terminal emulator works
A Code Project — A React project or any codebase to work with
Claude Account — Pro, Max, Teams, Enterprise subscription, or Console account

💡 Tip: If you're new to the terminal, Claude Code documentation includes a helpful terminal guide. Don't worry — the commands are straightforward, and Claude itself can help you learn!

Pricing and Plans

Claude Code is included with Claude subscriptions. Here are your options:

Claude Pro ($20/month) — Perfect for short coding sprints in small codebases with access to both Sonnet and Opus models
Claude Max ($100/month) — Great value for everyday use in larger codebases with more generous usage limits
Claude Max ($200/month) — Power user tier with the most access to Claude models
API Pay-as-you-go — Standard Claude API pricing with no per-seat fees, ideal for teams

2. Installation & Setup

Installing Claude Code on macOS/Linux

The recommended installation method uses the native installer, which automatically keeps Claude Code updated in the background. Open your terminal and run:

# Native installation (recommended)
curl -fsSL https://claude.ai/install.sh | bash

After installation completes, you can start Claude Code immediately by running:

# Navigate to your project
cd your-react-project

# Start Claude Code
claude

Installing Claude Code on Windows

Windows users have two options depending on their terminal. First, ensure you have Git for Windows installed (download from git-scm.com if needed).

For PowerShell:

# Run in PowerShell (look for PS C:\ prompt)
irm https://claude.ai/install.ps1 | iex

For Command Prompt (CMD):

# Run in CMD (look for C:\ prompt without PS)
curl -fsSL https://claude.ai/install.cmd -o install.cmd
install.cmd && del install.cmd

💡 Tip: If you see 'The token '&&' is not a valid statement separator', you're in PowerShell, not CMD. Your prompt shows PS C:\ when in PowerShell. Use the PowerShell command instead.

Alternative Installation Methods

If you prefer package managers, Claude Code is also available through Homebrew and WinGet. Note that these methods do not auto-update.

Using Homebrew (macOS):

# Install via Homebrew
brew install --cask claude-code

# Update manually when needed
brew upgrade claude-code

Using WinGet (Windows):

# Install via WinGet
winget install Anthropic.ClaudeCode

# Update manually when needed
winget upgrade Anthropic.ClaudeCode

Logging In and Authentication

When you first run claude, you'll be prompted to log in. Claude Code supports multiple authentication methods:

Claude Pro/Max/Teams/Enterprise — Recommended for most users, provides seamless access
Claude Console (API) — Uses pre-paid credits, auto-creates a 'Claude Code' workspace for cost tracking
Third-party Providers — Amazon Bedrock, Google Vertex AI, or Microsoft Foundry for enterprise

# Start Claude Code (prompts for login on first use)
claude

# Or explicitly log in
/login

Your credentials are stored securely on your system, so you won't need to log in again. To switch accounts later, use the /login command.

Starting Your First Session

Navigate to any React project directory and start Claude Code:

cd /path/to/your/react-project
claude

You'll see the Claude Code welcome screen with your session information, recent conversations, and latest updates.

Try these first commands to explore:

# Ask about your codebase
what does this project do?

# Get help
/help

# See available commands
?

3. Core Concepts

Understanding the Agentic Loop

Claude Code operates through an 'agentic loop' — a cycle where Claude receives your request, decides what actions to take, executes them, observes results, and continues until the task is complete or needs your input. This is fundamentally different from simple question-answer AI.

Here's how the agentic loop works:

Receive Request — You describe what you want in natural language
Analyze & Plan — Claude examines your codebase and determines what needs to be done
Execute Action — Claude uses tools (read files, run commands, edit code)
Observe Results — Claude sees the output and evaluates success
Iterate or Complete — Claude continues fixing issues or reports completion

This loop continues autonomously until Claude completes the task, encounters an error, or needs permission for a potentially risky action. You can interrupt at any time with Esc.

The Context Window Explained

The context window is Claude's working memory — it holds everything Claude knows about the current conversation including your messages, files read, command outputs, and Claude's responses. Claude's context window is approximately 200,000 tokens.

Understanding context is crucial because:

Performance can degrade as context fills up — Claude may forget earlier instructions
Each file read and command output consumes tokens
Use /clear between unrelated tasks to reset context
Use /compact to summarize and free space during long sessions

💡 Tip: Context management is the single most important skill for effective Claude Code usage. Clear your context between unrelated tasks, and be specific to avoid Claude reading unnecessary files.

Permission Modes

Claude Code has three permission modes that control how much autonomy Claude has:

Normal Mode — Default mode. Claude asks permission for file writes, bash commands, and other potentially risky actions. Safe but requires more interaction.
Auto Mode — A classifier reviews commands and blocks risky ones, while allowing routine operations to proceed. Use Shift+Tab to toggle.
Plan Mode — Claude only reads and analyzes code, never modifies anything. Perfect for exploration and planning complex changes safely.

Built-in Tools

Claude Code comes with powerful built-in tools that it uses automatically:

Tool	Description	Example Use
Read	Read file contents	Analyzing your components
Edit	Modify files with permission	Updating your code
Write	Create new files	Generating new components
Bash	Execute shell commands	Running npm, git, tests
Grep	Search file contents	Finding code patterns
Glob	Find files by pattern	Locating all `.tsx` files
Web	Search and fetch from web	Looking up documentation

You don't need to explicitly invoke these tools — Claude uses them automatically based on what your request requires. For example, asking "add a button to the Header component" triggers Claude to read the Header file, edit it, and potentially run your linter.

4. Basic Commands & Usage

Essential CLI Commands

These are the most important commands for daily use with Claude Code:

Command	Description	Example
`claude`	Start interactive mode	`claude`
`claude "task"`	Run a one-time task	`claude "fix the build"`
`claude -p "query"`	Run query, then exit	`claude -p "explain this"`
`claude -c`	Continue last conversation	`claude -c`
`claude -r`	Resume a previous session	`claude -r`
`claude commit`	Create a Git commit	`claude commit`
`/clear`	Clear conversation history	`/clear`
`/help`	Show available commands	`/help`
`/compact`	Compress context	`/compact`
`Esc`	Stop current action	Press Esc key

Interactive vs Non-Interactive Mode:

# Interactive mode - start a conversation
claude

# Non-interactive mode - single task
claude -p "list all React components in src/"

# Continue most recent conversation
claude --continue

# Resume specific session by name
claude --resume auth-refactor

Exploring Your Codebase

When you join a new project or need to understand unfamiliar code, ask Claude directly:

# Get a high-level overview
what does this project do?

# Understand the architecture
explain the main architecture patterns used here

# Find specific functionality
where is the authentication handled?

# Trace execution flow
trace the user login process from frontend to database

# Ask about specific files
explain what @src/components/Header.tsx does

💡 Tip: Use @ to reference specific files directly. For example, @src/App.tsx includes the file content immediately without Claude needing to search for it, saving context and time.

Making Code Changes

Claude Code can modify your files directly. Here's how to make changes effectively:

# Simple addition
add a loading spinner to the UserList component

# Specific modification
add input validation to the email field in the signup form

# Bug fixes
fix the bug where clicking submit twice sends duplicate requests

# Refactoring
convert the UserCard class component to a functional component with hooks

When Claude proposes changes, it shows you a diff of what will be modified. You can:

Accept — Allow the change and continue
Reject — Decline and provide feedback
Accept All — Enable auto-accept for the session
Esc — Stop and reconsider the approach

Working with Git

Claude Code integrates seamlessly with Git for version control operations:

# Check status
what files have I changed?

# Create commits
commit my changes with a descriptive message

# Branch operations
create a new branch called feature/user-auth

# View history
show me the last 5 commits

# Handle conflicts
help me resolve the merge conflicts

# Create PRs
create a pull request for my changes

💡 Tip: Claude Code works best when you have the gh CLI installed for GitHub operations. It enables direct PR creation, issue management, and more without rate limits.

5. CLAUDE.md & Memory System

What is CLAUDE.md?

CLAUDE.md is a special markdown file that Claude reads at the start of every session. It contains persistent instructions, project conventions, and context that Claude should always know about. Think of it as onboarding documentation specifically for Claude.

You can place CLAUDE.md files in several locations:

Project root (./CLAUDE.md) — Shared with team via Git, contains project-specific instructions
Home folder (~/.claude/CLAUDE.md) — Personal preferences that apply to all your projects
Child directories — Loaded when Claude works with files in those directories

Generate a starter CLAUDE.md automatically:

# Generate CLAUDE.md based on your project
/init

The /init command analyzes your codebase and creates a file with build commands, test instructions, and conventions it discovers.

Creating Effective Instructions

A well-crafted CLAUDE.md significantly improves Claude's effectiveness. Here's an example for a React project:

# Project: React Dashboard

## Commands
- npm run dev: Start development server
- npm run test: Run Jest tests
- npm run lint: Run ESLint
- npm run build: Production build

## Code Style
- Use functional components with hooks, never class components
- Use TypeScript strict mode
- Prefer named exports over default exports
- Use 2-space indentation

## Architecture
- Components in src/components/
- Hooks in src/hooks/
- API calls in src/services/
- State management with Zustand in src/stores/

## Testing
- Write tests for all new components
- Use React Testing Library, not Enzyme
- Run tests before committing

💡 Tip: Keep CLAUDE.md concise — aim for under 200 lines. Long files consume context and reduce instruction adherence. Only include information Claude can't infer from your code.

Auto Memory Feature

Auto Memory lets Claude accumulate knowledge across sessions without you writing anything. As Claude works, it saves notes for itself: build commands, debugging insights, architecture notes, and workflow habits.

Auto Memory is enabled by default and stores files in ~/.claude/projects/<project>/memory/.

# View and manage memory
/memory

# Toggle auto memory on/off
/memory  # Then use the toggle option

# Tell Claude to remember something
remember that the API tests require a local Redis instance

The first 200 lines of MEMORY.md are loaded at the start of every conversation. Claude keeps it concise by moving detailed notes into separate topic files.

Project Rules with `.claude/rules/`

For larger projects, organize instructions into topic-specific files in .claude/rules/. These rules can even be scoped to specific file types, giving you fine-grained control over Claude's behavior across different parts of your codebase.

Tips When Working With Claude Code

Most developers waste tokens in Claude Code without even realizing it 🙂

The #1 reason? Vague prompts that force Claude to read files it doesn't need.

Here's what I learned after using Claude Code for months without hitting my usage limit once 👇

🎯 Be Specific, Not Lengthy

A long prompt isn't a good prompt. A specific prompt is.

❌ "fix the login bug"

✅ "fix the bug where users see a blank screen after entering wrong credentials in LoginForm.tsx"

The second prompt tells Claude exactly where to look. It reads fewer files, uses fewer tokens, and gives a better fix — first try.

📌 Reference Files Directly with `@`

Instead of describing what a file does, just write @src/components/Header.tsx.

Claude reads it immediately without scanning your entire codebase. Huge token saver.

✅ Always Give Claude a Way to Verify

"Fix the infinite loop in SearchBar" leaves Claude guessing if it worked.

"Fix the infinite loop in SearchBar and run npm test" gives Claude a way to confirm.

Verification = fewer back-and-forth messages = fewer tokens used.

🔄 Clear Context Between Unrelated Tasks

One long session mixing different tasks is the fastest way to degrade Claude's output quality and burn tokens. Use /clear between tasks.

Fresh context = sharper responses.

🧠 Break Complex Tasks into Steps

Instead of dumping a 10-requirement prompt, break it down:

Create the component structure
Add TypeScript types
Add loading and error states
Write tests

Claude tracks progress better, and you stay in control.

Check out the video below, where I have created a multi-step form using a single prompt mentioned in the guide.

And There's So Much More to Explore...

This guide has only scratched the surface. The full guide covers many more powerful topics to take your Claude Code skills to the next level:

6. Common Workflows for React Developers

Building React Components with natural language prompts
Debugging React Applications end-to-end
Writing Tests automatically with Claude
Refactoring legacy code and class components

7. Advanced Features

Plan Mode for safely tackling complex, multi-step tasks
Subagents to parallelize work across your codebase
MCP (Model Context Protocol) to connect Claude to external services
Hooks and Skills for customizing Claude's behavior

8. Best Practices & Tips

Effective prompting techniques for better results
Managing context efficiently across long sessions
Common mistakes to avoid as a beginner

9. VS Code Integration

Installing and configuring the VS Code extension
Working with code selections and inline editing
Keyboard shortcuts for a faster workflow

10. Building a Complete React App

Full project setup from scratch
Creating data models, components, and custom hooks
Testing and debugging with Claude alongside you

11. CI/CD Integration

GitHub Actions and GitLab CI/CD integration
Automated PR creation and scheduled tasks

12–16. More Advanced Topics

API & Backend — React Query, authentication flows, custom data-fetching hooks
State Management — Zustand, Redux Toolkit, React Context, and state migration
Performance Optimization — Memoization, code splitting, virtual lists, and image optimization
Troubleshooting — Installation issues, auth problems, context window gotchas
Quick Reference & Cheat Sheet — Essential commands, shortcuts, and common React prompts

📖 To learn more and dive deep into all these topics, check out the Getting Started With Claude Code Guide — the complete resource for React developers looking to supercharge their workflow with Claude Code.

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/

I Built a Multi-Vendor Appointment Booking App

Yogesh Chavan — Tue, 24 Mar 2026 08:13:27 +0000

Appointment booking is a problem that looks simple on the surface — pick a time, confirm, done.

But once you start building it for real businesses, the complexity piles up fast: multiple staff members with different schedules, services with buffer times, conflict detection, client history, revenue analytics, role-based access, and more.

I wanted to build something production-grade that could be used for any service-based business — a salon, Clinis, a fitness studio, Consultants, Spas & Wellness, and have it work without hacks.

This is BookFlow.

Check out the application demo below.

What Is BookFlow?

BookFlow is a multi-tenant appointment booking platform. Businesses sign up, configure their services and staff, and get a public booking link they can share with clients.

Clients can book appointments without an account and receive a booking confirmation email. Staff manage their schedules. Admins see the full picture.

It's not just a booking form — it's a full business operations tool.

Key Features

🏢 Multi-Vendor Architecture

Each business gets their own isolated workspace, branding, and booking URL. One platform, infinite businesses.

👥 Staff Orchestration

Assign services to team members, manage availability across locations, and balance workloads effortlessly.

📊 Revenue Analytics Dashboard

Real-time dashboards with revenue tracking, service breakdowns, and actionable growth insights.

🔔 Smart Notifications

Automated confirmations that keep clients engaged and informed.

🚫 No Booking Overlaps

Intelligent conflict detection prevents double-bookings. Staff availability is automatically blocked once a slot is taken, ensuring clients can only book truly open time slots.

🔒 Enterprise Security

Role-based access control so every team member sees only what they should.

📅 Calendar View

Visualize your entire schedule in daily, weekly, and monthly views. Manage bookings without losing context.

🎨 Custom Branding

Each vendor can upload their logo and set a theme color for a personalized booking experience.

⚡ Frictionless Onboarding

Get your business live in minutes with a guided setup flow. No card required to start.

🌐 Public Booking Pages

Every business gets a clean, shareable booking URL that clients can use directly.

📱 Responsive Design

Works beautifully on desktop and mobile for both business owners and their clients.

🏥 Perfect For

🏥 Clinics · ✂️ Salons · 💼 Consultants · 🏋️ Fitness Studios · 💆 Spas & Wellness · and any appointment-based business.

Few Application Demo Screenshots

For Clients: A Simple Booking Flow

The client-facing side is intentionally minimal. Every organization gets a public URL at /book/[slug]. Clients land there and:

Pick a service (with duration, price, and assigned staff shown upfront)
Choose a date and available time slot
Select a staff member (if multiple are available)
Enter their contact details
Confirm the booking

Available time slots are generated dynamically based on service duration, staff availability for that day, existing bookings, and configurable buffer times between appointments. Double-booking the same staff member is prevented at the database level.

No account required. No friction.

For Staff: A Focused Workspace

Staff members log in and see their own schedule. They can:

View and manage their assigned bookings
See their calendar (daily, weekly, monthly views)
Update booking and payment statuses
Manage their profile and availability

They don't have access to settings, billing, or other staff members' data. The permission model is intentionally narrow here — staff should see what's relevant to them, nothing more.

For Admins: Full Business Control

Organization admins (business owners) get the full picture:

Dashboard — Revenue metrics, booking trends, today's schedule, and a breakdown of revenue by service. The charts are built with Recharts and use loading skeletons so the page doesn't feel janky while data loads.

Bookings — A filterable, searchable list of all appointments with status badges (pending, confirmed, completed, cancelled, no-show) and payment statuses (pending, paid, refunded).

Calendar — A multi-view calendar where you can filter by staff and see color-coded services. Clicking an event shows full booking details.

Services — Create and manage services with custom duration, pricing, buffer time between appointments, color coding, and staff assignments.

Staff — Add team members, configure their weekly availability per day, and assign which services they offer.

Clients — A directory of everyone who has booked, with total booking count, total spent, and last visit date.

Settings — Working hours per day of week, booking policies (minimum advance time, cancellation window), currency, and admin user management.

Organization — Custom slug, logo, theme color, description, and industry.

For Superadmins: Platform Oversight

There's a superadmin layer above individual organizations. From there you can:

View all organizations on the platform
Create new organizations manually
Review and approve/reject onboarding requests from businesses wanting to join
Provide rejection reasons so applicants know what to fix

The onboarding flow supports two plan tiers (Professional and Enterprise). However, you don't need to pay up front while sending onboarding request.

Tech Stack

Layer	Technology
Framework	Next.js (App Router)
Language	TypeScript
Styling	Tailwind CSS + Radix UI
Database	PostgreSQL via Neon (serverless)
ORM	Drizzle ORM
Auth	Better Auth (email/password)
Email	Resend
File Storage	Cloudinary
Data Fetching	TanStack Query (React Query v5)
Forms	React Hook Form + Zod v4
Charts	Recharts

Check out the complete application here.

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/

Drop a comment or feel free to reach out to me to learn more about this application.

I Built a Digital Products Marketplace using Next.js for Sellers and Buyers

Yogesh Chavan — Sun, 15 Mar 2026 06:35:19 +0000

The digital economy is booming, and creators need a reliable, elegant platform to sell their work. DigiMart is a full-featured digital products marketplace built with the latest web technologies — designed to connect creators with customers seamlessly, securely, and beautifully.

Whether you're a developer selling source code, a designer offering UI kits, or an author publishing eBooks, DigiMart gives you everything you need to grow your digital business.

Check out the complete demo of the application below.

Here's a Live Demo of the application.

What Is DigiMart?

DigiMart is a marketplace where creators can upload, manage, and sell digital products — and buyers can discover, purchase, and download them instantly. It supports a wide range of product categories:

eBooks — educational guides, tutorials, and written content
Templates — ready-to-use project starters and document templates
Source Code — scripts, plugins, full applications, and more
UI Kits — component libraries and design systems
Design Assets — icons, illustrations, graphics, and visual resources

For Buyers: A Frictionless Shopping Experience

Finding and purchasing digital products on DigiMart is fast and intuitive.

Advanced Filtering — narrow results by category, price range, and sort order (newest, top rated, price low-to-high)
Active Filter Badges — see what filters are active and remove them in one click
Real Reviews and Ratings — make informed decisions with community-driven feedback
Secure Payments — powered by DodoPayments for a reliable checkout experience. Can be easily swapped with Stripe/Polar or other payment integration.
Instant Downloads — access your purchases immediately with lifetime download access
Purchase History — revisit and re-download anything you've bought, anytime

For Creators: A Powerful Seller Dashboard

DigiMart gives creators full control over their digital products and storefronts.

Product Uploads — list products with titles, descriptions, images, and downloadable files via Cloudinary.
Status Tracking — products go through a moderated pipeline: pending → approved, with clear feedback if rejected
Edit Anytime — update your listings and keep them fresh
Deletion Requests — request removal with a reason; admins handle it smoothly
Rejection Reasons — if a product doesn't pass review, you'll know exactly why

For Admins: Full Marketplace Oversight

Admins keep the marketplace healthy and high-quality with a dedicated admin panel:

Approve or Reject pending product submissions with optional feedback
Handle Deletion Requests from creators, with full context on their reasons
Tabbed Interface — separate workflows for product approvals and deletion management
Notification System — a bell icon with live count keeps admins aware of pending actions

Built With Modern Technology

DigiMart is engineered on a solid, production-grade tech stack:

Layer	Technology
Framework	Next.js (App Router) + React 19
Styling	Tailwind CSS v4 + shadcn/ui
Database	PostgreSQL via Neon (serverless)
ORM	Drizzle ORM
Auth	Better Auth (Google, GitHub)
Payments	DodoPayments
File Storage	Cloudinary
Data Fetching	TanStack Query(React Query)
Forms	React Hook Form + Zod
Language	TypeScript

A UI Worth Talking About

DigiMart doesn't just work well — it looks stunning.

Gradient Hero Section with animated floating product cards and decorative orbs
Skeleton Loading Screens with shimmer animations for perceived performance
Responsive Layout — a fully fluid experience from mobile to widescreen
Category Icons — color-coded visual language for quick product identification
Confetti Celebrations — delightful feedback on purchase completion

Secure and Scalable by Design

Security and performance are built in, not bolted on:

Role-Based Access Control — buyers, sellers, and admins each see only what they should
Protected Routes — authentication-gated pages with seamless redirect flows
Serverless PostgreSQL — scalable, low-latency database with Neon
Optimized Images — Next.js Image component with Cloudinary transformations
SEO Ready — Open Graph and Twitter metadata on every product page

Why DigiMart?

There are plenty of places to sell digital products online. DigiMart stands apart because it's built by developers, for creators — with a focus on quality, simplicity, and trust.

No clutter. No distractions. Just great products.
A curated catalog, moderated for quality before anything goes live.
A creator-first experience with transparent workflows and real feedback.
A buyer-first UX that makes discovery and checkout feel effortless.

Get Started Today

Whether you're looking to buy your next toolkit or sell your creative work to thousands of potential customers, DigiMart is the platform built for you.

Join a growing community of digital creators and forward-thinking buyers. Your next great product is just a click away.

DigiMart — Built for creators. Loved by buyers.

Drop a comment or feel free to reach out to me to learn more about this application.

Yogesh Chavan

Mar 1

Transform Your Markdown into Professional PDFs in Seconds with PDFMaker

#react #nextjs #javascript

Comments 2

3 min read

About Me

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

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, focusing on practical, production-ready skills.

Also, created various courses with 3000+ students enrolled in these courses.

My Portfolio: https://yogeshchavan.dev/

I Built a Real Estate Marketplace with Admin Functionality — Here's How It Works

Yogesh Chavan — Sun, 08 Mar 2026 05:52:22 +0000

There's a gap between "we need a property listing platform" and actually having one. Most businesses either end up with a generic website that doesn't do much or they spend months and a significant budget getting something custom-built.

So I built a full real estate marketplace from scratch, including an admin dashboard.

Here's a walkthrough of what it does and how it's put together.

Check out the complete demo of the application below.

🔑 Key Features

Browse, search & filter property listings
Browse rent only and sale only properties
Property detail pages with full info, images, map
Admin Dashboard — manage property listings with approve/reject functionality
Secure role-based access (User vs Admin)
Fully responsive across all devices

🛠️ Tech Stack and Why

	Technology	Role
⚛️	Next.js 16 (App Router)	Blazing-fast performance & SEO
🎨	Tailwind CSS	Clean, modern & responsive UI
🐘	PostgreSQL (via Neon.com)	Scalable cloud database
🌇	Cloudinary	Storing & serving property images
📧	Resend	Transactional email delivery

Next.js 16 with the App Router

The App Router model in Next.js 16 makes it natural to mix server and client components. Property listing pages are server-rendered — fast initial load, good for SEO, no extra API call needed. Interactive parts like filters and search are client components. The result is a snappy experience without over-engineering.

Tailwind CSS

Nothing unusual here — Tailwind keeps the styling consistent and the responsive behaviour predictable across screen sizes without a lot of custom CSS.

PostgreSQL via Neon.com

Real estate data is relational by nature. Properties have types, locations, price ranges, availability status, and relationships to agents or owners. PostgreSQL handles all of that cleanly with proper constraints and joins. Neon's serverless setup pairs well with Next.js on Vercel and scales without needing to manage server infrastructure.

Cloudinary

Images are stored in Cloudinary. They handle image uploads, storage, and optimized delivery — images are automatically resized and compressed for the web without any manual work, which keeps page loads fast regardless of what gets uploaded.

Resend

Email is a surprisingly important part of a marketplace — notifying agents about new enquiries. Resend handles all transactional emails reliably with a clean API that integrates naturally into a Next.js backend.

The entire application is fully customizable to extend with new features.

Who This Kind of Application Works For

A platform like this fits naturally for real estate agencies wanting to manage their own listings, property developers showcasing new builds, rental businesses that need a self-managed portal, or entrepreneurs looking to launch a niche property marketplace.

The codebase is clean and straightforward to extend.

About Me

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

Also, created various courses with 3000+ students enrolled in these courses.

My Portfolio: https://yogeshchavan.dev/

Transform Your Markdown into Professional PDFs in Seconds with PDFMaker

Yogesh Chavan — Sun, 01 Mar 2026 03:59:37 +0000

If you work with Markdown, you know the struggle: it's great for writing, but turning it into a polished, professional PDF usually involves a clunky mix of browser "Print to PDF" tricks, CSS hacks, or complex command-line tools.

Also, you don't get a nicely formatted PDF.

That's why I built PDFMaker, a streamlined, web-based tool designed to bridge the gap between simple text and high-quality PDF document exports.

What PDFMaker Actually Does

PDFMaker lets you paste or write your Markdown and see a live, styled preview update in real time, and export to PDF in the exact same styling you chose.

You get full control over the things that actually make a document look professional and styled.

You can fully customize the PDF content's look and feel.

Typography
Spacing & padding
Code block styling
Background colors & visual hierarchy
Line height & rhythm

Every style you set can be saved as a preset. Open a new Markdown file tomorrow, apply your preset in one click, and export. Done.

See It in Action

Watch how quickly you can transform your workflow:

Overview & Features

Get a quick look at the interface and how easy it is to go from raw Markdown to a finished PDF.

Custom Styling & Presets

Learn how to apply different themes and presets to give your documents a unique, professional look.

Syntax Highlighting for Technical Articles

For developers, maintaining code readability is crucial. PDFMaker preserves syntax highlighting so your technical guides look as good as your code.

Why This Matters Right Now

The way people share knowledge is changing. Developers write docs. Researchers write reports. Everyone is producing written content, and the bar for what looks "professional" keeps rising.

A PDF that looks like it was thrown together signals exactly that. A PDF that looks intentional, readable, and well-designed signals something else entirely: that you care about your work.

PDFMaker is the fastest path from "I wrote this in Markdown" to "this looks like I hired a designer." And unlike hiring a designer, it takes seconds.

Who Should Be Using This Today

If any of these sound familiar, you're leaving quality on the table by not using it:

You write technical documentation and want code examples to actually look good
You produce client-facing reports and want them to reflect your brand
You publish tutorials or guides and want readers to take them seriously
You're tired of fighting with CSS just to make a PDF look decent

Do check out the launch on Peerlist and upvote it⚡️

You can try it for free at PDFMaker

The gap between "I wrote it" and "it looks like it was professionally published" has never been smaller. That's worth acting on.

Holi Special Biggest Discount Offer

Get All My 30+ Current + Future Courses, Ebooks, Webinars At Just $12 / ₹1020. Regular Price: $236 / ₹20,060. Limited-time offer.

About Me

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

Also, created various courses with 3000+ students enrolled in these courses.

My Portfolio: https://yogeshchavan.dev/

How I Achieved 100/100 on Lighthouse Score For My Portfolio Site

Yogesh Chavan — Thu, 19 Feb 2026 10:52:49 +0000

Optimizing a Next.js site isn't just about making it feel fast, it's about proving it with a perfect (or near-perfect) Lighthouse score.

Yesterday, I gave my portfolio site a fresh new look. I also made several key changes that really boosted the site's metrics.

Performance Results

Here's how the site performed after the changes I made:

Desktop Performance Score

Mobile Performance Score

Here's a breakdown of what I did, why it mattered, and how you can do the same for your own sites.

1. Ditching Scroll Events for Intersection Observer

Most of us use a scroll listener to change the navbar background when someone scrolls down. The problem? Scroll events fire constantly and can make the page feel "janky" because they hog the main thread.

I replaced my scroll listener with the Intersection Observer API. I placed a tiny hidden "sentinel" element at the very top of the page. Now, I just observe when that sentinel leaves the screen to toggle the navbar style.

It's asynchronous and way more efficient. It keeps the main thread free, which helps with your Total Blocking Time (TBT) and makes scrolling feel buttery smooth.

// components/Navbar.tsx
useEffect(() => {
  const sentinel = document.getElementById("scroll-sentinel");
  const observer = new IntersectionObserver(
    ([entry]) => setScrolled(!entry.isIntersecting),
    { threshold: 0 }
  );
  if (sentinel) observer.observe(sentinel);
  return () => observer.disconnect();
}, []);

2. Fixing the LCP Animation Trap

Largest Contentful Paint (LCP) measures how long it takes for your biggest content (usually the hero title) to show up. I was using a "reveal" animation on my main heading that started at opacity: 0.

Even a 100ms animation delay counts against your score. I removed the initial hidden state and the animation from the main title so that it's visible the moment the page loads. It might look slightly less "fancy," but the performance win is worth it.

// Before (slowed down LCP)
<h1 className="reveal opacity-0">Hi, I'm Yogesh</h1>

// After (instant visibility)
<h1>Hi, I'm Yogesh</h1>

3. Cleaning Up "Monolithic" Constants

I used to have one giant constants.ts file that exported all the constants like projects, courses, skills, etc. This meant every single page was downloading all that data, even if it only needed a tiny bit of it.

I split that giant file into smaller modules like projects.ts, courses.ts, skills.ts, etc. Now, components only grab exactly what they need. Think of it like a suitcase: you don't need to pack your winter coat for a beach trip. Keep the initial bundle small!

// app/constants/projects.ts
export const projects = [...];

// In components/Projects.tsx
import { projects } from "@/app/constants/projects";

// app/constants/skills.ts
export const skills = [...];

// In components/skills.tsx
import { skills } from "@/app/constants/skills";

4. Smart Loading with the PRPL Pattern

The PRPL pattern (Push, Render, Pre-cache, Lazy-load) is basically a fancy way of saying "load things only when you need them and keep them around for later."

I used dynamic imports for everything below the fold (like the Contact or Experience sections).

import dynamic from "next/dynamic";

const Contact = dynamic(() => import("@/components/Contact"));

I also added aggressive caching headers in next.config.ts. This combination means the first load is lean, and repeat visits are nearly instant because the browser already has the files.

// next.config.ts (PRPL Caching)
async headers() {
  return [
    {
      // Public images cached for 30 days with stale-while-revalidate
      source: "/images/:path*",
      headers: [
        {
          key: "Cache-Control",
          value: "public, max-age=2592000, stale-while-revalidate=86400",
        },
      ],
    },
  ];
}

5. Targeting Modern Browsers (ES2022)

By default, some tools target older versions of JavaScript to support ancient browsers. But most of us don't really need to support IE11 anymore.

I updated my tsconfig.json to target ES2022, instead of previous ES2017. Since modern browsers support this natively, TypeScript doesn't have to write extra "workaround" code. This results in cleaner, smaller files that the browser can execute much faster.

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    ...
  }
}

6. Cutting Out "Legacy" JavaScript

Similar to the step above, I updated my browserslist in package.json to tell the build tool exactly which browsers I care about. This allows Next.js to skip adding polyfills for features that my target browsers already have. It's an easy way to trim the fat from your JavaScript bundles.

"browserslist": [
  "defaults",
  "maintained node versions"
]

defaults means: Last 2 versions of each major browser and Not dead browsers.

So it excludes: IE 11 and Very old browsers

7. Letting Next.js Handle Images

Standard <img> tags are a headache for performance. They don't resize or compress themselves automatically.

I used the Next.js <Image /> component everywhere. It handles WebP conversion, lazy loading, and prevents layout shifts by making you define dimensions.

Using <Image /> component also loads images of different sizes based on the viewport size, so smaller images are loaded for smaller screens, and larger images for larger screens, making the site load faster.

It's truly one of the lowest-effort, highest-reward changes you can make.

import Image from 'next/image';

<Image 
  src="/hero.webp" 
  alt="Hero" 
  width={800} 
  height={600} 
  priority // Use this for top-of-page images!
/>

8. Making the Site Usable for Everyone

A high performance score is great, but accessibility is just as important. I added proper ARIA labels to my mobile menu buttons and wrapped the content in a <main> tag.

<button
 ...
 aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
>
...
</>

Lighthouse rewards you for this, but more importantly, it makes your site actually usable for people using screen readers. It's just good practice.

9. Production-Ready Config Tweaks

I made two small but effective changes in next.config.ts: I enabled gzip compression and told the compiler to strip out all console.log statements in production. Cleaner code, smaller files, faster site.

// next.config.ts
const nextConfig = {
  compress: true,
  compiler: {
    removeConsole: process.env.NODE_ENV === "production",
  },
};

10. Pre-warming Connections

Every time your site links to another domain (like a course platform), or you include links for your external projects, courses, or any other external resources, the browser has to do some prep work to connect.

I added preconnect and dns-prefetch tags for my critical external links. I made sure to keep it under 4 preconnects, though, because too many can actually backfire and reduces your lighthouse score.

This little head start makes external links feel much snappier.

// app/layout.tsx
<head>
  <link rel="preconnect" href="https://courses.yogeshchavan.dev" />
  <link rel="dns-prefetch" href="https://www.codementor.io" />
  <link rel="dns-prefetch" href="https://www.freecodecamp.org" />
  <link rel="dns-prefetch" href="https://dev.to" />
  <link rel="dns-prefetch" href="https://medium.com" />
</head>

Hopefully, some of these tips help you squeeze a bit more speed out of your own Next.js projects! Happy coding!

A Quick Tip for Testing Performance

When testing your site's performance, I'd recommend using PageSpeed Insights (pagespeed.web.dev) instead of Chrome DevTools Lighthouse tool.

Reason: Browser extensions and injected scripts can interfere with the results, often giving you inaccurate scores. PageSpeed Insights runs tests on Google's servers, so you get clean, reliable metrics every time.

About Me

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

Also, created various courses with 3000+ students enrolled in these courses.

My Portfolio: https://yogeshchavan.dev/

Beginner's Guide To TypeScript + React Integration

Yogesh Chavan — Tue, 17 Feb 2026 05:18:47 +0000

Introduction to TypeScript

What is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. Developed and maintained by Microsoft, TypeScript adds optional static typing and class-based object-oriented programming to JavaScript. Since TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

TypeScript code cannot run directly in browsers or Node.js - it must first be compiled (transpiled) to JavaScript. This compilation step is where TypeScript catches type errors, helping you find bugs before your code runs.

Why TypeScript over JavaScript?

While JavaScript is powerful and flexible, it has limitations when building large-scale applications. TypeScript addresses these limitations:

Static Type Checking - Catch errors at compile time rather than runtime
Better IDE Support - Enhanced autocompletion, navigation, and refactoring
Improved Code Readability - Type annotations serve as documentation
Enhanced Refactoring - Safely rename symbols and restructure code
Latest ECMAScript Features - Use modern features with backward compatibility

TypeScript vs JavaScript

Feature	JavaScript	TypeScript
Type System	Dynamic typing	Static typing (optional)
Compilation	Interpreted directly	Compiles to JavaScript
Error Detection	Runtime errors	Compile-time errors
IDE Support	Basic	Enhanced (IntelliSense)
Interfaces	Not supported	Fully supported
Generics	Not supported	Fully supported

Installing TypeScript

Step 1: Install Node.js

Before using TypeScript, you need Node.js installed on your machine. Follow these steps:

Visit the official Node.js website: https://nodejs.org
Download the LTS (Long Term Support) version for your operating system
Run the installer and follow the installation wizard
Verify the installation by opening a terminal and running:

node --version
# Should output: v20.x.x or higher

npm --version
# Should output: 10.x.x or higher

Step 2: Install TypeScript Globally

Once Node.js is installed, you can install TypeScript globally using npm:

npm install -g typescript

Step 3: Verify TypeScript Installation

tsc --version
# Should output: Version 5.x.x

Tip: You can also install TypeScript locally in a project using npm install typescript --save-dev. This is recommended for projects to ensure consistent versions across team members.

Setting up TypeScript with Node.js

To set up a new TypeScript project, create a directory and initialize it:

mkdir my-typescript-project
cd my-typescript-project
npm init -y
npm install typescript --save-dev

Create a TypeScript configuration file (tsconfig.json):

npx tsc --init

Here's a recommended configuration for beginners:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Your First TypeScript Program

Create a file called hello.ts in your src folder:

// src/hello.ts
function greet(name: string): string {
  return "Hello, " + name + "!";
}

const message: string = greet("TypeScript");
console.log(message);

Notice the type annotations: name: string specifies the parameter type, and : string after the parentheses specifies the return type.

Understanding the Compilation Process

TypeScript must be compiled to JavaScript before it can run:

# Compile a single file
tsc src/hello.ts

# Compile using tsconfig.json
tsc

# Watch mode - recompile on changes
tsc --watch

When you run the tsc command (or tsc --watch for continuous compilation), TypeScript creates a new dist folder containing the compiled JavaScript files. You'll see your hello.ts file transformed into hello.js with all type annotations removed:

// dist/hello.js (compiled output)
"use strict";
function greet(name) {
  return 'Hello, ' + name + '!';
}
const message = greet('TypeScript');
console.log(message);

Here's what the project structure looks like in VS Code after compilation:

Note: All type annotations are removed during compilation. Types only exist at development and compile time - they help catch errors but don't affect runtime behavior.

Running the Compiled Code

Now that your TypeScript code has been compiled to JavaScript, you can run it using Node.js. Execute the compiled JavaScript file from the dist folder:

# Run the compiled JavaScript file
node dist/hello.js

You should see the following output in your terminal:

Hello, TypeScript!

Congratulations! You've successfully written, compiled, and executed your first TypeScript program. The workflow is: write .ts files → compile with tsc → run the output .js files with node.

Tip: You can also use ts-node to run TypeScript files directly without manual compilation: npm install -g ts-node, then run ts-node src/hello.ts. This is useful during development.

TypeScript Basics

Basic Types (string, number, boolean)

TypeScript provides several basic types that form the foundation of the type system:

// String type
let firstName: string = "John";
let lastName: string = 'Doe';

// Number type (includes integers and floats)
let age: number = 30;
let price: number = 99.99;
let hex: number = 0xf00d;

// Boolean type
let isActive: boolean = true;
let isCompleted: boolean = false;

Type Inference

TypeScript can automatically infer types based on assigned values:

// TypeScript infers the type automatically
let name = "Alice";    // inferred as string
let count = 42;        // inferred as number
let isValid = true;    // inferred as boolean

// Type is locked after inference
name = "Bob";   // OK
name = 123;     // Error: Type 'number' is not assignable to type 'string'

Best Practice: Use explicit types when the initial value doesn't clearly indicate the intended type, or when declaring variables without immediate initialization.

Arrays and Tuples

TypeScript provides two ways to define arrays, and introduces tuples for fixed-length arrays:

// Arrays - two syntax options
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob", "Charlie"];

// Mixed arrays
let mixed: (string | number)[] = [1, "two", 3];

// Tuples - fixed length with specific types
let person: [string, number] = ["Alice", 30];
let coordinate: [number, number, number] = [10, 20, 30];

// Accessing tuple elements
console.log(person[0]);  // "Alice" (string)
console.log(person[1]);  // 30 (number)

Enums

Enums define a set of named constants, making code more readable:

// Numeric enum (auto-increments from 0)
enum Direction {
  Up,     // 0
  Down,   // 1
  Left,   // 2
  Right   // 3
}

// Numeric enum with custom values
enum StatusCode {
  OK = 200,
  BadRequest = 400,
  NotFound = 404,
  ServerError = 500
}

// String enum
enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

// Using enums
let direction: Direction = Direction.Up;
let status: StatusCode = StatusCode.OK;

Using 'as const' Instead of Enums

While enums are useful, modern TypeScript development often favors using as const assertions instead. The as const assertion tells TypeScript to infer the most specific type possible, making values readonly and literal types.

Why use 'as const' over enums?

Tree-shaking friendly - Regular objects with 'as const' can be tree-shaken by bundlers, while enums cannot
No runtime overhead - 'as const' objects don't generate extra JavaScript code like enums do
Better type inference - Works seamlessly with TypeScript's type system
Simpler JavaScript output - The compiled code is just a plain object

// Using 'as const' instead of enums
const Direction = {
  Up: "UP",
  Down: "DOWN",
  Left: "LEFT",
  Right: "RIGHT"
} as const;

// Create a type from the object values
type Direction = typeof Direction[keyof typeof Direction];
// Type is: "UP" | "DOWN" | "LEFT" | "RIGHT"

// Usage
let move: Direction = Direction.Up;  // OK
move = "UP";                          // Also OK
move = "DIAGONAL";                    // Error!

// Another example with status codes
const StatusCode = {
  OK: 200,
  BadRequest: 400,
  NotFound: 404,
  ServerError: 500
} as const;

type StatusCode = typeof StatusCode[keyof typeof StatusCode];
// Type is: 200 | 400 | 404 | 500

Best Practice: For new projects, prefer 'as const' objects over enums. They provide the same benefits with better bundle size and simpler JavaScript output. Use enums only when you need reverse mapping (numeric enums) or when working with legacy codebases.

any, unknown, and never

TypeScript provides special types for handling dynamic values:

// any - opts out of type checking (avoid when possible)
let flexible: any = 4;
flexible = "string";    // OK
flexible = true;        // OK
flexible.anything();    // OK (but risky!)

// unknown - type-safe alternative to any
let uncertain: unknown = 4;
uncertain = "string";   // OK

// Must check type before using
if (typeof uncertain === "string") {
  console.log(uncertain.toUpperCase());  // OK
}

// never - represents values that never occur
function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {}
}

Tip: Prefer 'unknown' over 'any' when you don't know the type. It forces type checking before use, making your code safer.

void Type

The void type represents the absence of a return value:

// Function that doesn't return anything
function logMessage(message: string): void {
  console.log(message);
}

// Arrow function with void return
const printNumber = (num: number): void => {
  console.log(num);
};

Type Assertions

Type assertions tell TypeScript you know more about a value's type:

// Two syntax options
let someValue: unknown = "Hello, TypeScript!";

// Angle-bracket syntax
let strLength1: number = (<string>someValue).length;

// "as" syntax (required in React - JSX)
let strLength2: number = (someValue as string).length;

// Working with DOM elements
const input = document.getElementById("myInput") as HTMLInputElement;
input.value = "Hello!";

// Non-null assertion
function getValue(arr: number[], index: number): number {
  return arr[index]!;  // Assert it won't be undefined
}

The ! operator is called the non-null assertion operator. It tells TypeScript that you are certain the value will not be null or undefined, even though TypeScript thinks it might be. In the example above, arr[index] could potentially be undefined if the index is out of bounds, but using ! tells TypeScript "trust me, this value exists."

// More examples of non-null assertion (!)
const button = document.getElementById("submit")!;
// Without !, TypeScript thinks button could be null

// Use when you're certain a value exists
interface User {
  name: string;
  email?: string;  // optional property
}

function sendEmail(user: User) {
  // We checked elsewhere that email exists
  const email = user.email!;  // Assert it's not undefined
  console.log("Sending to:", email);
}

Warning: Use the non-null assertion (!) sparingly. It bypasses TypeScript's null checks, so incorrect usage can lead to runtime errors. Prefer proper null checks (if statements or optional chaining ?.) when possible.

Literal Types

Literal types specify exact values a variable can hold:

// String literal types
type Direction = "north" | "south" | "east" | "west";
let heading: Direction = "north";  // OK
heading = "northeast";             // Error!

// Numeric literal types
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
let roll: DiceRoll = 4;  // OK
roll = 7;                // Error!

// In function parameters
function move(direction: "up" | "down" | "left" | "right") {
  console.log(`Moving ${direction}`);
}

move("up");        // OK
move("diagonal");  // Error!

Functions in TypeScript

Function Type Annotations

TypeScript allows type annotations on function parameters and return values:

// Basic function with types
function add(a: number, b: number): number {
  return a + b;
}

// Function type as a variable
let multiply: (x: number, y: number) => number;
multiply = function(x, y) {
  return x * y;
};

// Type alias for function types
type MathOperation = (a: number, b: number) => number;

const subtract: MathOperation = (a, b) => a - b;
const divide: MathOperation = (a, b) => a / b;

// Function with object parameter
function printUser(user: { name: string; age: number }): void {
  console.log(`${user.name} is ${user.age} years old`);
}

What Happens When You Pass Wrong Types?

TypeScript catches type mismatches at compile time, preventing runtime errors before your code even runs:

// Calling functions with wrong types
add(5, 10);       // OK: returns 15
add("5", 10);     // Error: Argument of type 'string' is not
                  // assignable to parameter of type 'number'

multiply(3, 4);   // OK: returns 12
multiply(3, "4"); // Error: Argument of type 'string' is not
                  // assignable to parameter of type 'number'

subtract(10, 5);  // OK: returns 5
subtract(10);     // Error: Expected 2 arguments, but got 1

printUser({ name: "Alice", age: 30 });  // OK
printUser({ name: "Bob" });             // Error: Property 'age' is
                                        // missing in type '{ name: string; }'
printUser("Alice");                     // Error: Argument of type 'string'
                                        // is not assignable to parameter

Key Benefit: These errors appear in your IDE as you type and during compilation - not at runtime. This is one of TypeScript's biggest advantages: catching bugs before your code runs!

Optional & Default Parameters

Functions can have optional (?) and default parameter values:

// Optional parameters (must come after required)
function greet(name: string, greeting?: string): string {
  if (greeting) {
    return `${greeting}, ${name}!`;
  }
  return `Hello, ${name}!`;
}

greet("Alice");         // "Hello, Alice!"
greet("Bob", "Hi");     // "Hi, Bob!"

// Default parameters
function createUser(
  name: string,
  role: string = "user",
  active: boolean = true
) {
  return { name, role, active };
}

createUser("Alice");                 // default role & active
createUser("Bob", "admin");          // default active
createUser("Charlie", "mod", false); // all specified

Important: In TypeScript, every function parameter must have its type explicitly defined. Unlike JavaScript, you cannot leave parameters untyped. This requirement ensures type safety throughout your codebase and enables the compiler to catch type-related errors early in development.

// Every parameter needs a type annotation
function process(name: string, count: number, active: boolean) {
  // All parameters have explicit types
}

// This would cause an error in TypeScript:
// function process(name, count, active) { }
// Error: Parameter 'name' implicitly has an 'any' type

// Even callback parameters need types
function fetchData(callback: (data: string) => void) {
  callback("result");
}

Rest Parameters

Rest parameters accept any number of arguments as an array:

// Rest parameters with type annotation
function sum(...numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0);
}

sum(1, 2);           // 3
sum(1, 2, 3, 4, 5);  // 15

// Rest with other parameters
function buildName(first: string, ...rest: string[]): string {
  return first + " " + rest.join(" ");
}

buildName("John", "Paul", "Smith");  // "John Paul Smith"

// Spread in function calls
const nums: number[] = [1, 2, 3];
sum(...nums);  // 6

Understanding Spread in Function Calls

The spread operator (...) allows you to expand an array into individual arguments when calling a function. This is the opposite of rest parameters - while rest parameters collect multiple arguments into an array, spread expands an array into separate arguments.

// Without spread - you'd have to pass each element manually
const numbers = [10, 20, 30];
sum(numbers[0], numbers[1], numbers[2]);  // 60 - tedious!

// With spread - the array is expanded into individual arguments
sum(...numbers);  // 60 - much cleaner!

// How it works:
// sum(...numbers) is equivalent to sum(10, 20, 30)

// Combining arrays with spread
const moreNumbers = [40, 50];
sum(...numbers, ...moreNumbers);  // 150

// Spread with Math functions
const values = [5, 10, 3, 8, 1];
Math.max(...values);  // 10
Math.min(...values);  // 1

// TypeScript ensures type safety with spread
const strings = ["a", "b", "c"];
sum(...strings);  // Error: Argument of type 'string' is not
                  // assignable to parameter of type 'number'

Tip: The spread operator is especially useful when working with arrays of unknown length, or when you want to pass array elements as individual function arguments without modifying the original function.

Function Overloading

Function overloading lets you define multiple signatures for one function:

// Overload signatures
function format(value: string): string;
function format(value: number): string;
function format(value: Date): string;

// Implementation
function format(value: string | number | Date): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else if (typeof value === "number") {
    return value.toFixed(2);
  } else {
    return value.toISOString();
  }
}

format("hello");      // "HELLO"
format(3.14159);      // "3.14"
format(new Date());   // "2024-01-15T...

Want to Learn More?

This article covers just the fundamentals of TypeScript from the TypeScript + React ebook. To master advanced topics like Generics, Advanced Types, Utility Types, and TypeScript with React Integration, check out the complete ebook:

📘 Beginner's Guide To TypeScript + React Integration - From TypeScript Basics to React Integration

More Such Useful Ebooks Are On The Way In Upcoming Weeks🔥

About Me

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

Also, created various courses with 3000+ students enrolled in these courses.

My Portfolio: https://yogeshchavan.dev/

50 React Interview Coding Challenges

Yogesh Chavan — Thu, 12 Feb 2026 06:14:42 +0000

I've been teaching React for years, and here's what I've noticed:

Developers don't struggle with concepts.

They struggle with IDEAS.

"What should I build to practice?"

"Is this project good enough for my portfolio?"

"How do I go from beginner to advanced?"

And I've sat on both sides of the interview table more times than I can count. One pattern I've noticed: the gap between "knowing React" and "demonstrating React in an interview" is surprisingly wide.

You might understand hooks conceptually. You might have built production apps. But when someone asks you to build a Kanban board from scratch in 45 minutes while explaining your decisions out loud, that's a different skill entirely.

The Problem with Most Interview Prep

Most React interview resources fall into two camps:

Theoretical questions — "Explain the virtual DOM" or "What's the difference between useEffect and useLayoutEffect?" These test knowledge, not ability.

Toy problems — Simple counter apps or todo lists that don't reflect the complexity of real interview challenges.

Neither prepares you for what actually happens in technical interviews at companies building real products.

What Actually Gets Asked

After going through dozens of interview processes and conducting interviews myself, I started documenting the patterns. Real interview coding challenges tend to look like:

Build a weather dashboard that handles API calls, loading states, and error handling
Create a shopping cart with context or state management
Implement a file manager with drag-and-drop
Design a multi-step form with validation and persistence

These aren't trivial. They require you to demonstrate state management, component composition, performance awareness, and clean code — all while thinking out loud.

A Structured Approach

I put together a collection of 50 challenges organized by difficulty:

Beginner (20 challenges) — Focused on components, props, state, basic hooks, and localStorage. Things like task trackers, countdown timers, and image galleries. If you're newer to React or haven't interviewed in a while, start here.

Mid-Level (22 challenges) — Context API, custom hooks, API integration, performance optimization. This includes Kanban boards, chat interfaces, survey builders, and dashboard widgets. Most frontend interviews for mid-level roles pull from this category.

Advanced (8 challenges) — Redux Toolkit, React Router, complex state management. Full application architectures like e-commerce platforms, analytics dashboards, and collaborative document editors. These prepare you for senior roles where system design matters as much as implementation.

What Makes These Different

Each challenge includes specific requirements — not vague descriptions. For example, the E-Commerce Product Catalog challenge specifies:

Infinite scroll or pagination
Multiple simultaneous filters with visual indicators
Cart management with localStorage persistence
Product quick-view on hover
Related products section

This specificity matters. Interview challenges have requirements. Practicing with vague prompts doesn't build the skill of translating requirements into implementation decisions.

How I'd Use These

If I were preparing for interviews right now, here's my approach:

Week 1–2: Work through 5–6 beginner challenges, focusing on clean code and explaining decisions out loud (yes, talk while you code — it's awkward at first but essential for interviews).

Week 3–4: Move to mid-level challenges. Time yourself. Most interviews give 45–60 minutes, so practice building something functional within constraints.

Week 5+: For senior roles, work through advanced challenges focusing on architecture decisions, state management patterns, and performance considerations.

Don't just build them once. Revisit challenges after a few days and see if you can implement them faster or cleaner.

The Real Skill

Here's what I've learned from years of interviewing: technical interviews aren't really about whether you can build the thing. They're about how you build it.

Do you ask clarifying questions? Do you start with a plan or dive straight into code? How do you handle getting stuck? Do you write readable code under pressure?

These challenges give you the reps to develop that comfort. The actual building is a practice for the performance.

I've compiled all 50 challenges with full requirements into a PDF guide.

If you're actively preparing for React interviews, you can grab it for FREE from The Ultimate React Ebooks Collection.

Scroll down to the Contents section on The Ultimate React Ebooks Collection to download it for FREE using the Preview link.

The challenges are designed to be self-contained — you don't need a course or video walkthrough. Just the requirements and your code editor.

Good luck with your React interviews.

About Me

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

Also, created various courses with 3000+ students enrolled in these courses.

My Portfolio: https://yogeshchavan.dev/

🔥 Available For Everyone - My Real-time Indian Stock Market Price Tracker App🚀

Yogesh Chavan — Tue, 10 Feb 2026 07:42:36 +0000

After weeks of using this app privately and receiving countless DMs asking for access, I've finally decided to make it available to everyone.

Here's the truth: I built this for myself first.

I was frustrated with the existing tools - delayed data, clunky interfaces, and no way to track multiple stocks the way I wanted during market hours. So I built exactly what I needed.

The result? A tool that helps me spot intraday opportunities within minutes, not hours.

What Changed My Trading Game

Before this app, I'd spend the first hour of market open juggling between multiple tabs, manually refreshing prices, and often missing the best entry points.

Now? I open one dashboard, see everything I need, and act fast.

Check out the landing page - I've shared actual screenshots of recent intraday profits I made using this app. No fluff, just real numbers.

👉 Check them out here

What's Included

When you get access, you're not just getting an app - you're getting everything you need to deploy it yourself and use it forever:

Complete source code - Own it, modify it, run it your way
Step-by-step video tutorial - Watch me deploy it from scratch so you can do the same
1:1 support from me - Stuck somewhere? Message me directly
My intraday strategies - The exact tips I use to maximize profits

Once you deploy it (FREE for Lifetime), it's yours for life. No subscriptions. No recurring fees.

Why Traders Love This

📊 Real-time price tracking - No more stale data or manual refreshes

📈 Interactive charts - Visualize price movements instantly

🔔 Custom alerts - Get notified when stocks hit your target prices

⚡ Multi-stock monitoring - Track your entire watchlist in one view

The app is built for speed because in intraday trading, seconds matter.

Who Is This For?

This is perfect if you:

Do intraday trading and want faster, cleaner data
Are you tired of switching between multiple apps and websites
Want a personal trading dashboard you fully control
Like building tools that give you an edge

Check out my previous article if you missed checking out this app.

Limited Availability

I'm keeping this accessible to a small group initially. I want to make sure everyone who gets it receives proper support and actually deploys it successfully.

Once I hit capacity for 1:1 support, I'll need to pause new access.

👉 Grab Your Access Now

About Me

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

Also, created various courses with 3000+ students enrolled in these courses.

My Portfolio: https://yogeshchavan.dev/