这是layout.js。我已注释掉导出 const 元数据,这样做可以使 Vercel 的部署成功。如果不注释掉元数据,部署将会失败。
"use client";
import "./globals.css";
import { store } from "./store/store";
import { Provider } from "react-redux";
/*export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};*/
export default function RootLayout({ children }) {
return (
<html lang="en">
<Provider store={store}>
<body
style={{
minHeight: "100vh",
maxHeight: "fit-content",
boxSizing: "border-box",
backgroundColor: "#f2f5fd",
}}
>
{children}
</body>
</Provider>
</html>
);
}
当我取消注释元数据时,构建部署失败并出现以下错误。
Failed to compile.
14:35:07.115
14:35:07.115
./app/layout.js
14:35:07.115
ReactServerComponentsError:
14:35:07.115
14:35:07.115
You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive
14:35:07.115
14:35:07.115
,-[/vercel/path0/app/layout.js:3:1]
14:35:07.115
3 | import { store } from "./store/store";
14:35:07.115
4 | import { Provider } from "react-redux";
14:35:07.115
5 |
14:35:07.115
6 | export const metadata = {
14:35:07.116
: ^^^^^^^^
14:35:07.116
7 | title: "Create Next App",
14:35:07.116
8 | description: "Generated by create next app",
14:35:07.116
9 | };
14:35:07.116
`----
14:35:07.116
14:35:07.116
File path:
14:35:07.116
./app/layout.js
14:35:07.116
14:35:07.116
14:35:07.116
> Build failed because of webpack errors
14:35:07.147
Error: Command "npm run build" exited with 1
14:35:07.372
BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1
为什么元数据会导致错误以及解决方案是什么?
在 Next.js 中,直接从组件导出数据以执行服务器端渲染(SSR)时使用“使用客户端”指令。当您使用“使用客户端”时,该组件仅用于在客户端执行代码。这意味着您不应从标记为“使用客户端”的组件导出任何变量或数据,因为这会导致服务器端渲染出现问题。
错误消息通知您此违规行为,并建议两种可能的解决方案:
通过遵循这些解决方案之一,您可以确保组件遵守 Next.js 的服务器端渲染和导出数据指南,从而解决 ReactServerComponentsError。