Next.js 14中src/utils.ts引入next/headers报错，求问题排查

导入代码 #

在src/utils.ts中进行了如下导入：

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
import { SignJWT, jwtVerify } from "jose";
import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";

报错信息 #

./src/utils.ts
错误：
× 你正在导入一个依赖next/headers的模块，它仅能在服务端组件中使用，而pages/目录不支持服务端组件。
╭─[D:\Projects\Programming\supermuslim-dashboard-nextjs\src\utils.ts:2:1]
2 │ import { twMerge } from "tailwind-merge";
3 │ import { SignJWT, jwtVerify } from "jose";
4 │ import { NextRequest, NextResponse } from "next/server";
5 │ import { cookies } from "next/headers";
· ───────────────────────────────────────

项目src目录结构 #

│   middleware.ts
│   utils.ts
│
├───app
│   │   favicon.ico
│   │   globals.css
│   │   layout.tsx
│   │   page.tsx
│   │
│   ├───(auth)
│   │   │   layout.tsx
│   │   │
│   │   └───signin
│   │           page.tsx
│   │
│   └───dashboard
│           page.tsx
│
├───components
│   │   ModeToggle.tsx
│   │   Navbar.tsx
│   │
│   ├───Forms
│   │       LogInForm.tsx
│   │       RememberMeCheckbox.tsx
│   │       SignUpForm.tsx
│   │
│   └───ui
│           button.tsx
│           checkbox.tsx
│           dropdown-menu.tsx
│           form.tsx
│           input.tsx
│           label.tsx
│           toast.tsx
│           toaster.tsx
│           use-toast.ts
│
├───interfaces
│       index.ts
│
├───providers
│       theme-provider.tsx
│
└───server-actions
    └───auth
            actions.ts

补充说明 #

src/utils.ts中的某个函数会通过middleware.ts在每次请求时被调用，实现参考了一个认证示例仓库，但目前无法定位错误根源，寻求解决帮助。

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