Next.js

Next.js is a React framework that enables server-side rendering, static site generation, and full-stack development. Created by Vercel, it's become the de facto standard for production React applications.

Key Features

• Hybrid rendering: SSR, SSG, ISR, and client-side in one app
• File-based routing: Pages defined by file structure
• API routes: Backend endpoints alongside frontend
• Image optimisation: Automatic image handling
• Zero config: Works out of the box

Rendering Methods

Method	When	Best For
SSG (Static)	Build time	Blogs, marketing pages
SSR (Server)	Request time	Dynamic, personalised content
ISR (Incremental)	Background	Large sites with frequent updates
CSR (Client)	Browser	Highly interactive parts

App Router (Next.js 13+)

app/
├── layout.tsx        # Root layout
├── page.tsx          # Home page (/)
├── about/
│   └── page.tsx      # About page (/about)
├── blog/
│   ├── page.tsx      # Blog index (/blog)
│   └── [slug]/
│       └── page.tsx  # Blog post (/blog/my-post)
└── api/
    └── users/
        └── route.ts  # API endpoint (/api/users)

Server Components

// This runs on the server by default
async function ProductPage({ params }) {
  const product = await db.product.findUnique({
    where: { id: params.id },
  });
  
  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCart id={product.id} /> {/* Client component */}
    </div>
  );
}

What We Like

• Developer experience: Fast refresh, excellent error handling
• Performance: Automatic optimisations, Edge runtime
• Full-stack: Frontend and API in one codebase
• Vercel integration: Seamless deployment
• Active development: Regular updates and improvements

What We Don't Like

• Complexity: Many rendering modes to understand
• Vercel-centric: Some features work best on Vercel
• App Router learning curve: Significant shift from Pages Router
• Build times: Can be slow for large sites
• Vendor lock-in concerns: Increasingly tied to Vercel

Next.js vs Nuxt

Aspect	Next.js	Nuxt
Framework	React	Vue
Rendering	SSR, SSG, ISR	SSR, SSG
API routes	Built-in	Nitro server
Deployment	Vercel optimised	Universal
Learning curve	Steeper	Gentler

When to Use Next.js

• Production React applications
• SEO-critical websites
• E-commerce storefronts
• Marketing sites with dynamic features
• Full-stack React projects