如何在Next.js 13.4.1服务端组件中实现history.back()？

云上老周

2026-7-22

在Next.js 13服务端组件中实现返回上一页功能的解决方案

问题原因

服务端组件（Server Component）无法使用客户端专属API（如useRouter），因为服务端组件在服务器端渲染，不具备浏览器环境的客户端API权限。

解决方案

方案1：将返回按钮拆分为独立的客户端组件

把交互逻辑封装到带有'use client'指令的客户端组件中，服务端组件负责数据获取和静态内容渲染，两者配合使用：

创建客户端组件components/BackButton.js：

'use client';

export default function BackButton() {
  return (
    <button onClick={() => window.history.back()}>Go back</button>
  );
}

在服务端页面组件中导入并使用该组件：

import 'server-only';
import BackButton from '@/components/BackButton';

function getLocalData() {
  // 读取本地JSON文件的逻辑示例
  const fs = require('fs');
  const path = require('path');
  const filePath = path.join(process.cwd(), 'data', 'your-file.json');
  const jsonData = fs.readFileSync(filePath, 'utf8');
  return JSON.parse(jsonData);
}

export default function Page() {
  const data = getLocalData();

  return (
    <div>
      <div>{JSON.stringify(data)}</div>
      <BackButton />
    </div>
  );
}

方案2：直接使用原生浏览器API（无需额外组件）

对于简单的返回需求，可以直接在服务端组件的按钮上绑定原生window.history.back()，该代码会在浏览器客户端执行，无需单独的客户端组件：

import 'server-only';

function getLocalData() {
  // 读取本地JSON文件的逻辑示例
  const fs = require('fs');
  const path = require('path');
  const filePath = path.join(process.cwd(), 'data', 'your-file.json');
  const jsonData = fs.readFileSync(filePath, 'utf8');
  return JSON.parse(jsonData);
}

export default function Page() {
  const data = getLocalData();

  return (
    <div>
      <div>{JSON.stringify(data)}</div>
      <button onClick={() => window.history.back()}>Go back</button>
    </div>
  );
}