Next.js 13 App Router中为何无法在中间件导入server-only函数？

原因分析 #

Next.js的server-only模块标记，核心作用是限制模块仅能被**服务端组件（Server Component）或服务端路由处理函数（如API路由）**导入。虽然Middleware确实运行在服务端，但Next.js当前的模块校验逻辑并未将Middleware纳入server-only允许的导入范围，因此触发了这个误判的错误提示。

解决方案 #

提供两种可行的处理方式：

方案1：移除server-only标记

如果getClientData只会在服务端环境（包括Middleware）被调用，不需要防止客户端组件误导入，直接删除getClientData.js里的import "server-only";即可：

// getClientData.js
export const getClientData = async () => {
  const data = await ....
};

方案2：抽离共享逻辑（保留server-only约束）

如果需要保留server-only来避免模块被客户端组件导入，可以把核心业务逻辑抽离成无标记的共享模块，再分别在getClientData.js和Middleware中导入：

1. 创建共享模块@lib/clientDataLogic.js：

// @lib/clientDataLogic.js
export const fetchClientData = async () => {
  const data = await ....
};

2. 修改getClientData.js保留server-only：

// @lib/getClientData.js
import "server-only";
import { fetchClientData } from "./clientDataLogic";

export const getClientData = async () => {
  return fetchClientData();
};

3. 在Middleware中导入共享逻辑：

// middleware.js
import { fetchClientData } from "@lib/clientDataLogic";

export default async function middleware(req) {
  const data = await fetchClientData();
  // ...其他业务逻辑
}

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