如何配置Next.js 13以仅启用全客户端渲染？

全局配置（App Router） #

如果想让整个项目默认使用客户端渲染，有两种常用方案：

1. 启用静态导出模式，生成纯静态资源，所有内容均在浏览器端渲染：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: { appDir: true }, // 适配App Router环境
  output: 'export'
}

module.exports = nextConfig

注意：这种模式下，API路由、Server Actions等依赖服务器环境的功能会失效，适合纯静态站点场景。

2. 全局强制所有组件为客户端组件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: []
  }
}

module.exports = nextConfig

同时需要在根布局文件（app/layout.js）顶部添加'use client'指令，让所有子组件继承客户端渲染属性。

单个组件/页面单独设置 #

如果只需指定部分内容为客户端渲染，直接在组件文件顶部添加'use client'指令即可：

'use client';

export default function ClientComponent() {
  return <div>仅在浏览器端渲染的组件</div>;
}

在App Router中，默认所有组件为服务器组件，添加该指令后，当前组件及其子组件都会切换为客户端渲染模式。

Pages Router场景（旧路由系统） #

如果使用的是Pages Router，可通过以下方式禁用SSR：

1. 全局禁用SSR：

/** @type {import('next').NextConfig} */
const nextConfig = {
  ssr: false
}

module.exports = nextConfig

2. 单个页面禁用SSR：

import dynamic from 'next/dynamic';

// 动态导入页面组件并关闭SSR
const ClientOnlyPage = dynamic(() => import('./ClientPage'), { ssr: false });

export default ClientOnlyPage;

内容的提问来源于stack exchange，提问作者chaelgutierrez