開始使用 Next.js 15

Next.js 15 與 14 版本的主要差異

Next.js 15 在 14 版本的基礎上進行了多項重要改進和功能強化。以下是主要差異：

功能	Next.js 14	Next.js 15
Partial Prerendering (PPR)	實驗階段	穩定版
Turbopack	Beta	預設打包工具
React 版本	React 18	React 19
Server Actions	實驗功能	正式版
Edge Runtime	基礎支援	強化能力
MDX 支援	需額外配置	內建支援
Metadata API	基礎功能	改進的 API

Next.js 15 的重大優勢與新特性

重要更新

Next.js 15 已經正式發布，帶來了多項重要改進和功能強化。它是著眼於效能和開發體驗的重要版本。

Next.js 15 在原有 App Router、Server Components、Edge Rendering 等基礎上，進一步強化了開發效率、效能與 DX（Developer Experience）。主要亮點如下：

1. 穩定的 Partial Prerendering（PPR）

PPR 是 Next.js 15 最重要的突破，它允許頁面同時結合靜態與動態內容，從根本上改變了 Web 應用的渲染方式：

靜態外殼優先載入：頁面的靜態部分（如頁面框架、導航等）即刻呈現
動態區塊平行處理：使用者介面中的動態區域（如個人化內容）通過 Suspense 邊界平行載入
增量靜態再生（ISR）與 PPR 結合：靜態內容可設定重新驗證時間

與 Next.js 14 的實驗性 PPR 相比，15 版本的 PPR 提供：

更穩定的行為和可預測性
更完善的開發者工具支援
與 React 19 新特性的深度整合

// app/dashboard/page.tsx - Next.js 15 的 PPR 範例
import { Suspense } from 'react';
import StaticAnalytics from './StaticAnalytics';
import DynamicUserContent from './DynamicUserContent';

// 頁面結合靜態與動態內容
export default function Dashboard() {
  return (
    <main>
      {/* 靜態區域：立即渲染 */}
      <StaticAnalytics />
      
      {/* 動態區域：平行處理，不阻塞靜態內容 */}
      <Suspense fallback={<p>載入個人化內容中...</p>}>
        <DynamicUserContent />
      </Suspense>
    </main>
  );
}

// 設定靜態外殼的重新驗證時間
export const revalidate = 3600; // 1小時

2. Turbopack 穩定版

Turbopack 從 Beta 階段進入穩定版，取代 Webpack 成為 Next.js 15 的預設打包工具：

開發啟動速度提升 5-10 倍：相比 Next.js 14，開發伺服器啟動速度大幅提升
熱更新速度提升 3-5 倍：代碼修改反饋更快，開發流程更順暢
記憶體使用效率提升：大型專案記憶體占用減少約 40%
完整功能支援：支援所有 Next.js 特性，包括自定義 webpack 配置的平滑轉換

在 Next.js 14 中，Turbopack 還有相容性問題，但在 15 版本中已經全部解決。

# Next.js 15 中默認啟用 Turbopack
next dev

# 如需特別指定
next dev --turbo

3. React 19 支援

Next.js 15 是首個原生整合 React 19 的主流框架，帶來多項突破性能力：

更強大的 Suspense：針對數據獲取、代碼分割、圖片載入的進階支援
Actions 與 Server Functions：與 Server Actions 深度整合
Document Metadata API：原生支援 title、meta 等設定，SEO 更簡單
並發模式與優先級調度：UI 渲染可中斷，優先處理高優先級更新

相比 Next.js 14 使用的 React 18，這些改進使得複雜應用的性能和用戶體驗有了質的提升。

4. Server Actions 正式版

Server Actions 在 Next.js 15 正式穩定，功能更強大，安全性更高：

// app/actions.ts - Server Actions 在 Next.js 15 中的寫法
'use server';

import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';
import { revalidatePath } from 'next/cache';

// 強化類型安全
type FormState = {
  error?: string;
  success?: boolean;
};

// 改進的錯誤處理和表單驗證
export async function handleFormSubmission(
  prevState: FormState,
  formData: FormData
): Promise<FormState> {
  try {
    const email = formData.get('email') as string;
    
    if (!email || !email.includes('@')) {
      return { error: '請提供有效的電子郵件' };
    }
    
    // 處理表單提交
    await saveToDatabase(email);
    
    // 設置 cookies
    cookies().set('subscribed', 'true');
    
    // 重新驗證頁面數據
    revalidatePath('/newsletter');
    
    return { success: true };
  } catch (error) {
    return { error: '提交失敗，請稍後再試' };
  }
}

相比 Next.js 14 的 Server Actions：

更完善的錯誤處理機制
更強的類型安全性
與 React 19 的 useOptimistic 更好整合
改進的表單驗證體驗

5. Edge Runtime 強化

Next.js 15 全面擴展了 Edge Runtime 的能力：

API Routes 全面支援 Edge：比 Node.js 環境更快的冷啟動速度
Middleware 功能增強：更強大的請求處理能力，例如 A/B 測試、地理定位等
Edge 上的 Server Actions：動態功能無需完整 Node.js 運行時

// app/api/geo/route.ts - Edge API Route 範例
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(request: NextRequest) {
  const { geo } = request;
  
  // 根據地理位置提供本地化內容
  return Response.json({
    country: geo?.country || 'unknown',
    city: geo?.city || 'unknown',
    region: geo?.region || 'unknown',
  });
}

Next.js 14 雖然支援 Edge Runtime，但 15 版本在穩定性和功能廣度上有顯著提升。

6. MDX 2.0 原生支援

Next.js 15 內建 MDX 2.0 支援，不再需要額外配置：

自動編譯與優化：MDX 文件自動處理，靜態提取元數據
React Components 與 Markdown 無縫融合：更豐富的內容展示
Metadata API 整合：從 MDX 前置元數據自動生成頁面 metadata

// app/blog/[slug]/page.tsx - MDX 整合範例
import { getMDXBySlug, getAllSlugs } from '@/lib/mdx';

// 靜態生成所有文章路徑
export async function generateStaticParams() {
  const slugs = await getAllSlugs();
  return slugs.map(slug => ({ slug }));
}

// 自動從 MDX 生成頁面元數據
export async function generateMetadata({ params }) {
  const { slug } = params;
  const { meta } = await getMDXBySlug(slug);
  
  return {
    title: meta.title,
    description: meta.description,
    openGraph: {
      images: [meta.image],
    },
  };
}

// 渲染 MDX 內容
export default async function Post({ params }) {
  const { slug } = params;
  const { content, meta } = await getMDXBySlug(slug);
  
  return (
    <article>
      <h1>{meta.title}</h1>
      <time>{meta.date}</time>
      {content}
    </article>
  );
}

相較於 Next.js 14 需要手動配置 MDX 支援，15 版本提供了更無縫的體驗。

7. 更簡潔的 Metadata API

Next.js 15 改進了 Metadata API，使 SEO 和社交分享設定更簡單：

// app/layout.tsx - 改進的 Metadata API

Next.js 15 與 14 相比，增加了更多內置的 metadata 類型，提升了 SEO 優化體驗。