使用元数据时,Vercel 中的下一个 js 构建失败。为什么?

问题描述 投票:0回答:2

这是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 seo server-side-rendering vercel nextjs13
2个回答
0
投票

从这里

新的元数据 API 允许您定义元数据(例如元数据和链接) HTML head 元素中的标签)带有显式元数据 作为服务器组件的任何布局或页面中的配置。

元数据仅在服务器组件中工作


0
投票

在 Next.js 中,直接从组件导出数据以执行服务器端渲染(SSR)时使用“使用客户端”指令。当您使用“使用客户端”时,该组件仅用于在客户端执行代码。这意味着您不应从标记为“使用客户端”的组件导出任何变量或数据,因为这会导致服务器端渲染出现问题。

错误消息通知您此违规行为,并建议两种可能的解决方案:

  1. 从组件中删除“元数据”的导出。
  2. 如果需要从组件导出数据,请删除“使用客户端”指令。

通过遵循这些解决方案之一,您可以确保组件遵守 Next.js 的服务器端渲染和导出数据指南,从而解决 ReactServerComponentsError。

© www.soinside.com 2019 - 2024. All rights reserved.