Next-Js on 技術、遊戲、生活通俗易懂的解釋

2026 靜態站點產生器：Astro、Hugo 與 11ty

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

2026 靜態站點產生器：Astro、Hugo 與 11ty

2026 年的靜態站點生成器格局比以往任何時候都更加多樣化。開發人員可以在基於 Go 的速度極快的 Hugo、島嶼架構先驅 Astro 和極簡、靈活的 11ty (Eleventy) 之間進行選擇。每個工具都在不同的場景中表現出色——了解它們的權衡對於為您的專案選擇正確的工具至關重要。

此比較從建置速度、範本、內容管理、影像最佳化、i18n 和部署方面對它們進行評估。

建構速度

SSG	語言	建置時間（10k 頁）	冷啟動	開發伺服器重新載入
雨果	去	〜3-5秒	即時	〜50ms
天文學	Node.js（打字稿）	~45-90 年代	中	約 200 毫秒
11歲	Node.js（JavaScript）	〜60-120秒	中	約 300 毫秒

Hugo 在建造速度方面擊敗了競爭對手。其基於 Go 的架構可在幾秒鐘內處理數千個頁面，使其成為大型文件網站和部落格的理想選擇。 Astro 為其功能集提供了出色的速度，尤其是其部分補水方法。 11ty 在大型站點上速度較慢，但其簡單性意味著小型專案的開銷更少。

模板化和靈活性

Hugo 使用 Go 範本及其自己的 .RenderShortcodes 管道。學習曲線很陡——Go 模板語法很特殊——但短代碼系統很強大。

{{ $pages := where .Site.RegularPages "Section" "blog" }}
{{ range $pages }}
 <article>
 <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
 <p>{{ .Summary }}</p>
 </article>
{{ end }}

Astro 使用 .astro 元件文件，將 HTML、JavaScript 和 CSS 混合在單一文件元件模型中。它透過其島嶼架構支援 UI 框架（React、Vue、Svelte、Solid）。

PPR（部分預先渲染）：合併靜態和動態路由

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

問題：靜態與動態的權衡

傳統上，Next.js 開發人員面臨著一個二元選擇：靜態生成（快速但陳舊）或伺服器端渲染（新鮮但較慢）。部分預先渲染（PPR）透過將兩種方法結合在一個頁面中消除了這種權衡——靜態 HTML shell 立即串流傳輸，而動態內容透過 React Suspense 載入。

PPR 的工作原理

PPR 的工作原理是使用 React Suspense 識別靜態和動態邊界。在建置期間，Next.js 預先渲染靜態 shell。在請求時，它會用串流動態內容取代 Suspense 回退：

// page.tsx — PPR enabled
import { Suspense } from "react";
import { Header } from "@/components/header";
import { PersonalizedGreeting } from "@/components/greeting";
import { ProductList } from "@/components/products";

export default function HomePage() {
 return (
 <div>
 {/* Static — prerendered at build time */}
 <Header />

 {/* Dynamic — streamed at request time */}
 <Suspense fallback={<GreetingSkeleton />}>
 <PersonalizedGreeting />
 </Suspense>

 {/* Static — prerendered at build time */}
 <ProductList />
 </div>
 );
}

配置

在 next.config.ts 中啟用 PPR：

Next.js 15 Stable Release: 最佳 Practices in Production

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

Introduction

Next.js 15 ships as a stable release with React 19 支援, 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.

揭秘 Next.js 應用路由器快取機制

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

介紹

Next.js App Router 具有強大的快取架構，旨在優化載入速度並減少後端 API 開銷。

然而，由於 Next.js 整合了多個快取層，開發人員經常遇到除錯問題。常見問題包括頁面顯示陳舊資料或 API 觸發過於頻繁。

本文透過解釋 Next.js 中的四種快取機制以及配置、刷新和無效它們的技術來消除混亂。

1. Next.js App Router 的四個快取層

Next.js App Router 使用四個獨立的快取層：

[Client Side]
 1. Router Cache (Temporary in-browser navigation cache)
 │
[Server Side]
 2. Request Memoization (React component render-cycle memory)
 │
 3. Data Cache (Persistent API request data across users)
 │
 4. Full Route Cache (Static HTML and RSC payloads at build-time)

以下總結各層的特色：

Next.js 國際化：路由與內容策略

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

介紹

國際化是現代 Web 應用程式的基本要求。 Next.js 已將其 i18n 支援從 Pages Router 中的整合路由系統發展為 App Router 中靈活的基於中間件的方法。本文涵蓋多語言 Next.js 應用程式的路由策略、區域設定偵測、內容管理和 SEO 最佳化。

關鍵概念是區域設定、預設區域設定、區域設定偵測以及子路徑路由和域路由之間的權衡。 App Router 方法提供了更大的靈活性，但比其前身需要更多的手動設定。

路由策略－子路徑與域

子路徑和網域路由之間的選擇對 SEO 和基礎設施有重大影響。

標準	子路徑 (`/en/about`)	域 (`en.example.com`)
SEO權威	共享域權限	每個語言環境獨立
地理定位	訊號較弱	更強的訊號
基礎架構	單一部署	多重部署
分析	統一	分段

對於大多數項目，建議使用子路徑路由，因為它簡單且共享網域權限。 App Router 中的實作使用中間件來處理區域設定前綴重寫。

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const locales = ["en", "ja", "fr"];
const defaultLocale = "en";

export function middleware(request: NextRequest) {
 const { pathname } = request.nextUrl;
 const pathnameHasLocale = locales.some(
 (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
 );
 if (pathnameHasLocale) return;

 const locale = request.cookies.get("NEXT_LOCALE")?.value || defaultLocale;
 return NextResponse.redirect(new URL(`/${locale}${pathname}`, request.url));
}

export const config = {
 matcher: ["/((?!api|_next|favicon.ico).*)"],
};

區域設定檢測和協商

Next.js 透過協商鏈確定區域設定：cookie 到 Accept-Language 標頭到預設區域設定。 NEXT_LOCALE cookie 約定允許使用者保留其語言首選項。

Next.js 中間件：路由、驗證和邊緣運算

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

介紹

Next.js 中間件在每個請求之前執行，在邊緣或無伺服器區域運行。專案根目錄下的單一 middleware.ts 檔案會攔截傳入要求，並且可以在請求到達匹配路由之前重定向、重寫、操作標頭或執行驗證檢查。

中間件非常適合在頁面渲染之前進行快速、基於邊緣的決策。預設情況下，它不在靜態資源或 _next/static 上運作。

基本結構

中間件檔案匯出一個接收 NextRequest 並傳回 NextResponse 的函數，以及定義哪些路徑觸發執行的 config 物件。

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
 console.log(`Request: ${request.nextUrl.pathname}`);
 return NextResponse.next();
}

export const config = {
 matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

matcher 配置使用帶有負向前瞻的路徑到正規表示式語法來排除靜態檔案。對於特定於部分的中間件，請使用多種模式，例如 ['/dashboard/:path*', '/admin/:path*']。

認證與授權

在中間件中處理身份驗證優於每頁檢查，因為它提供了單一事實來源並消除了頁面轉換時的閃爍。

export function middleware(request: NextRequest) {
 const token = request.cookies.get("session")?.value;
 const { pathname } = request.nextUrl;

 if (!token && pathname.startsWith("/dashboard")) {
 return NextResponse.redirect(new URL("/login", request.url));
 }

 if (token && pathname.startsWith("/login")) {
 return NextResponse.redirect(new URL("/dashboard", request.url));
 }

 return NextResponse.next();
}

對於基於角色的訪問，請在允許訪問管理路由之前解碼 JWT 或會話令牌並檢查使用者的角色。 NextAuth.js、Clerk 和 Auth0 都提供了簡化此過程的中間件助手。

Next.js Image 優化: From 設定 to 進階 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 伺服器元件：Web 渲染的未來

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

React 服务器组件 (RSC) 代表了 React 应用程序渲染方式的范式转变。组件专门在服务器上运行，向客户端发送零 JavaScript。這與伺服器端渲染（SSR）不同，後者在伺服器上渲染元件，但仍然將它們的所有 JavaScript 發送到客戶端進行補水。 RSC 產生一種特殊的序列化格式——RSC 有效負載——客戶端上的 React 協調器使用它來重建元件樹，而不執行元件程式碼。

核心好處是客戶端 JavaScript 的顯著減少。不需要互動性的佈局元件、資料取得邏輯和表示元素可以完全在伺服器上執行。更小的捆綁包意味著更快的頁面加載、更低的記憶體使用量以及改進的 Core Web Vitals。

伺服器與客戶端的邊界

指令 'use client' 和 'use server' 定義邊界。在支援 RSC 的框架（Next.js App Router、Hydrogen 等）中，任何沒有指令的元件預設都是伺服器元件。

// This is a server component by default
import { db } from "@/lib/db";

export default async function ProductList() {
 const products = await db.query("SELECT * FROM products");
 return (
 <ul>
 {products.map((p) => (
 <li key={p.id}>{p.name}</li>
 ))}
 </ul>
 );
}

// This is a client component
"use client";

import { useState } from "react";

export default function LikeButton({ productId }) {
 const [liked, setLiked] = useState(false);
 return (
 <button onClick={() => setLiked(!liked)}>
 {liked ? "♥" : "♡"}
 </button>
 );
}

關鍵規則：伺服器元件不能使用狀態、效果或瀏覽器 API。從伺服器傳遞到客戶端的道具必須是可序列化的－沒有函數，沒有類別實例，沒有循環引用。客戶端元件可以透過組合匯入伺服器元件（將伺服器元件作為子元件或 props 傳遞），但不能直接匯入它們。