Nextjs on Commentary of Takao

2026 Static Site Generators: Astro, Hugo, and 11ty

Tue, 05 May 2026 00:00:00 +0900

2026 Static Site Generators: Astro, Hugo, and 11ty

The static site generator landscape in 2026 is more diverse than ever. Developers choose between blazing-fast Go-based Hugo, the islands-architecture pioneer Astro, and the minimalist, flexible 11ty (Eleventy). Each excels in different scenarios — understanding their trade-offs is essential for picking the right tool for your project.

This comparison evaluates them across build speed, templating, content management, image optimization, i18n, and deployment.

PPR (Partial Prerendering): Merging Static and Dynamic routes

Tue, 10 Feb 2026 00:00:00 +0900

The Problem: Static vs Dynamic Tradeoffs

Traditionally, Next.js developers faced a binary choice: static generation (fast but stale) or server-side rendering (fresh but slower). Partial Prerendering (PPR) eliminates this tradeoff by combining both approaches in a single page — a static HTML shell streams instantly, while dynamic content is loaded via React Suspense.

How PPR Works

PPR works by identifying static and dynamic boundaries using React Suspense. During build time, Next.js prerenders the static shell. At request time, it replaces Suspense fallbacks with streaming dynamic content:

Next.js 15 Stable Release: Best Practices in Production

Sun, 05 Oct 2025 00:00:00 +0900

Introduction

Next.js 15 ships as a stable release with React 19 support, a redesigned caching model, and major API improvements for async request handling. This version defaults to no caching for fetch requests and GET Route handlers, simplifying behavior predictability. It also introduces async variants for cookies(), headers(), and params(), aligning with React 19’s async rendering paradigm. This article covers every breaking change and best practice for production adoption.

React 19 Stable Compatibility

Next.js 15 pairs with React 19 stable, enabling the new React Compiler to automatically memoize components and hooks. This eliminates the need for manual useMemo, useCallback, and React.memo in many cases.

Demystifying Next.js App Router Caching Mechanisms

Thu, 10 Apr 2025 00:00:00 +0900

Introduction

Next.js App Router features a robust caching architecture designed to optimize loading speeds and reduce backend API overhead.

However, because Next.js integrates multiple caching layers, developers often run into debugging issues. Common issues include pages displaying stale data or APIs firing too frequently.

This article clears up the confusion by explaining the four caching mechanisms in Next.js, along with techniques to configure, refresh, and invalidate them.

1. The Four Caching Layers of Next.js App Router

The Next.js App Router uses four separate caching layers:

Next.js Internationalization: Routing and Content Strategy

Tue, 08 Oct 2024 00:00:00 +0900

Introduction

Internationalization is a fundamental requirement for modern web applications. Next.js has evolved its i18n support from an integrated routing system in Pages Router to a flexible middleware-based approach in App Router. This article covers routing strategies, locale detection, content management, and SEO optimization for multi-language Next.js applications.

The key concepts are locales, default locale, locale detection, and the trade-offs between sub-path routing and domain routing. The App Router approach offers more flexibility but requires more manual setup than its predecessor.

Next.js Middleware: Routing, Auth, and Edge Computing

Tue, 18 Jun 2024 00:00:00 +0900

Introduction

Next.js Middleware executes before every request, running at the Edge or serverless region. A single middleware.ts file at the project root intercepts incoming requests and can redirect, rewrite, manipulate headers, or perform authentication checks before the request reaches the matched route.

Middleware is ideal for fast, edge-based decisions that should happen before page rendering. It does not run on static assets or _next/static by default.

Basic Structure

The middleware file exports a function that receives NextRequest and returns NextResponse, along with a config object that defines which paths trigger execution.

Next.js Image Optimization: From Setup to Advanced Patterns

Tue, 26 Mar 2024 00:00:00 +0900

Introduction

Images account for over 50% of total webpage bytes on average, making optimization essential for performance. Next.js provides a comprehensive image optimization pipeline through the next/image component and its built-in Image Optimization API. This article covers setup, configuration, and advanced patterns with a focus on Core Web Vitals impact.

The next/image Component

The next/image component extends the HTML <img> element with automatic optimization features: lazy loading, responsive srcset generation, width and height enforcement to prevent Cumulative Layout Shift, blur-up placeholders, and automatic format negotiation.

React Server Components: The Future of Web Rendering

Mon, 08 Jan 2024 00:00:00 +0900

React Server Components (RSC) represent a paradigm shift in how React applications render. Components run exclusively on the server, sending zero JavaScript to the client. This is not the same as Server-Side Rendering (SSR), which renders components on the server but still sends all the JavaScript for them to the client for hydration. RSC produces a special serialized format — the RSC payload — that the React reconciler on the client uses to reconstruct the component tree without executing the component code.