Next.js

Next.js is a React framework developed by Vercel that adds server-side rendering, routing, API routes, and other features that React doesn't include out of the box. It's become the default choice for production React applications.

Why Next.js?

React alone is a library for building UI components. To build a complete application, you need routing, data fetching, server-side rendering, and more. Next.js provides all of this with sensible defaults.

Key Features

File-Based Routing

Create a file, get a route. No router configuration needed:

app/
  page.tsx      → /
  about/
    page.tsx    → /about
  blog/
    [slug]/
      page.tsx  → /blog/:slug

Rendering Options

• Server-Side Rendering (SSR): Generate HTML on each request
• Static Site Generation (SSG): Generate HTML at build time
• Incremental Static Regeneration (ISR): Update static pages without rebuilding
• Client-Side Rendering: Traditional React behavior

Server Components

React Server Components run only on the server, reducing JavaScript sent to browsers and enabling direct database access.

API Routes

Build backend API endpoints alongside your frontend:

// app/api/users/route.ts
export async function GET() {
  const users = await db.users.findMany();
  return Response.json(users);
}

Built-In Optimizations

• Image optimization
• Font optimization
• Script optimization
• Automatic code splitting

Who Uses Next.js

• Netflix, TikTok, Twitch
• Nike, Target, Notion
• This website (valyou.solutions)

Next.js vs. Plain React

| Next.js | Create React App | |---------|------------------| | SEO-friendly (SSR/SSG) | Client-side only | | Built-in routing | Need React Router | | API routes included | Need separate backend | | Optimized for production | Development-focused |