React framework for production with server-side rendering and static generation

Core Idea: Next.js is an open-source React framework by Vercel that simplifies building production-ready web applications with built-in features like server-side rendering, static site generation, and API routes.

Key Elements

Rendering Strategies

• Server-side rendering: Pre-renders pages on each request for fresh data
• Static Site Generation: Pre-renders pages at build time for optimal performance
• Incremental Static Regeneration: Updates static pages after deployment without rebuilding
• Client-side rendering: Traditional React rendering for highly dynamic content

Routing System

• File-Based Routing: Pages automatically correspond to file structure
• Dynamic routes: Support for parameterized paths (e.g., [id].tsx)
• Nested routes: Supports deep path hierarchies
• Route groups: Logical organization without affecting URL structure

Data Fetching

• getServerSideProps: Server-side data fetching on each request
• getStaticProps: Data fetching at build time
• getStaticPaths: Specifies dynamic routes to pre-render
• SWR/React Query integration: Client-side data fetching with caching

Server Components

• React Server Components: First-class support for efficient rendering
• Streaming: Progressive rendering of page content
• Suspense: Native React suspense support

Development Experience

• Fast Refresh: Instant feedback during development
• TypeScript Programming Language support: First-class TypeScript integration
• Built-in optimizations: Automatic image, font, and script optimization
• Middleware: Custom request handling before rendering

Latest Features (Next.js 15)

• Server Actions: Write server-side code directly in components
• Turbopack: Rust-based bundler for faster builds
• On-demand ISR: Invalidate static pages programmatically
• Advanced image optimization: Next/image with modern formats
• App Router: New routing system with nested layouts and parallel routes

Practical Implementation

Project Setup

# Create new project
npx create-next-app@latest my-app
# or with bun
bun create next-app my-app

Creating Pages

// pages/index.tsx (Pages Router)
export default function Home() {
  return <h1>Hello, World!</h1>
}

// app/page.tsx (App Router)
export default function Home() {
  return <h1>Hello, World!</h1>
}

API Routes

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.status(200).json({ name: 'John Doe' })
}

// app/api/hello/route.ts (App Router)
export async function GET() {
  return Response.json({ name: 'John Doe' })
}

Data Fetching Patterns

// Server Component (App Router)
export default async function Page() {
  const data = await fetch('https://api.example.com/data')
  const json = await data.json()
  
  return <main>{json.title}</main>
}

// Pages Router
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  
  return { props: { data } }
}

Additional Connections

• Broader Context: React Ecosystem (Next.js position in React landscape)
• Applications: E-commerce Sites (ideal use case for hybrid rendering)
• See Also: Gatsby (alternative React framework with different tradeoffs)

References

1. Next.js Documentation: https://nextjs.org/docs
2. Vercel Platform: https://vercel.com
3. React Documentation: https://react.dev

#next-js #react #web-development #javascript #typescript #frontend #server-side-rendering

From: The Coding Sloth - Cómo programar aplicaciones que generen DINERO INFINITO
Rel: https://nextjs.org/docs