React and Next.js - Building Modern Web Applications

React is a JavaScript library for building user interfaces using reusable components. Next.js is a powerful React framework that adds server-side rendering, routing, and more.

Together, React and Next.js provide everything needed to build fast, scalable, and SEO-friendly web applications.

This guide covers React fundamentals, key hooks, and Next.js features like file-based routing and data fetching strategies.

React Components and JSX

React applications are built from components — reusable pieces of UI. Components can be functional or class-based, but functional components are the modern standard.

              
            
JSX

          Simple functional React component
        
// Functional component with props
function UserCard({ name, email, role }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{email}</p>
      <span className="badge">{role}</span>
    </div>
  );
}

export default UserCard;

JSX allows you to write HTML-like syntax inside JavaScript, making component structure intuitive and readable.

React Hooks - useState and useEffect

Hooks allow functional components to manage state and side effects without class components. The two most commonly used hooks are useState and useEffect.

              
            
JSX

          useState and useEffect in a functional component
        
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

useEffect runs after every render by default. Pass a dependency array to control when it runs — an empty array means it runs only once on mount.

Next.js File-Based Routing

Next.js uses a file-based routing system where every file inside the app/ (or pages/) directory automatically becomes a route.

              
            
TEXT

          Next.js App Router folder structure
        
app/
├── page.jsx          → /
├── about/
│   └── page.jsx      → /about
├── blog/
│   ├── page.jsx      → /blog
│   └── [slug]/
│       └── page.jsx  → /blog/:slug
└── layout.jsx        → shared layout

Dynamic routes using [param] folders allow you to build pages for variable URL segments like blog posts or product pages.

Data Fetching in Next.js

Next.js supports multiple data fetching strategies: Server Components (default), Static Generation (SSG), and Server-Side Rendering (SSR).

              
            
JSX

          Server component with async data fetching in Next.js
        
// app/posts/page.jsx - Server Component
async function PostsPage() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 } // ISR - revalidate every 60 seconds
  });
  const posts = await res.json();

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

export default PostsPage;

Incremental Static Regeneration (ISR) lets you update static pages in the background without rebuilding your entire site.

Why Use React and Next.js?

Component-based architecture for reusable UI elements
Virtual DOM for efficient re-rendering and performance
Server-side rendering for improved SEO and initial load speed
Built-in image optimization, font loading, and code splitting
Large ecosystem with thousands of community packages
Full-stack capability with API routes and server actions

Conclusion

React and Next.js are among the most widely used tools in modern frontend development. Learning them opens doors to building everything from landing pages to full-stack web applications.

Start with React fundamentals, understand hooks and component patterns, then explore Next.js features like routing, data fetching, and server components.