英文:
Next js build in vercel fails when with meta data. Why?
问题
以下是翻译好的部分：
这是layout.js。我已经注释掉了导出的metadata常量，这样做可以成功部署到Vercel。如果不注释掉metadata，部署将失败。
"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>
);
}
当取消注释metadata时，构建部署会失败，并出现以下错误：
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
为什么metadata会导致错误，以及解决方法是什么？
英文:
Here is layout.js. I have commented out the export const metadata, doing this makes the deployment to Vercel successful. Without commenting out the metadata, the deployment will fail.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
"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>
);
}
<!-- end snippet -->
When I un-comment the metadata, the build deployment fails with the following errors.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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
<!-- end snippet -->
Why does having the metadata cause the errors and what's the solution?
答案1
得分: 1
After <HTML> starting tag on Layout I added Head tag to fix this problem!
<html lang="en">
<head>
<title>Title</title>
<meta name='description' content='Description' />
</head>
<body className={`${inter.className} max-w-[1580px] mx-auto`}>
</body>
</html>
英文:
After <HTML> starting tag on Layout I added Head tag to fix this problem!
<html lang="en">
<head>
<title>Title</title>
<meta name='description' content='Description' />
</head>
<body className={`${inter.className} max-w-[1580px] mx-auto`}>
</body>
</html>
答案2
得分: 0
从这里开始：
> 新的Metadata API 允许您在服务器组件中使用显式的元数据配置来定义元数据（例如在HTML head元素内部的meta和link标签）。
元数据仅在服务器组件中起作用。
英文:
> The new Metadata API allows you to define metadata (e.g. meta and link
> tags inside your HTML head element) with an explicit metadata
> configuration in any layout or page that is a Server Component.
Metadata works only in server components
答案3
得分: 0
在Next.js中，“use client”指令用于从组件直接导出数据以执行服务器端渲染（SSR）。当您使用“use client”时，组件旨在仅在客户端执行代码。这意味着您不应该从标有“use client”的组件导出任何变量或数据，因为这会导致服务器端渲染出现问题。
错误消息正在通知您有关此违规行为，并建议两种可能的解决方法：
- 从组件中移除“metadata”的导出。
- 如果需要从组件导出数据，则移除“use client”指令。
通过遵循这两种解决方案中的任何一种，您可以确保组件符合Next.js关于服务器端渲染和数据导出的指南，从而解决ReactServerComponentsError。
英文:
In Next.js, the "use client" directive is used when exporting data directly from the component to perform server-side rendering (SSR). When you use "use client," the component is intended to execute code only on the client-side. It means that you should not export any variables or data from a component marked with "use client" because it would cause issues with server-side rendering.
The error message is notifying you about this violation, suggesting two possible solutions:
- Remove the export of "metadata" from the component.
- Remove the "use client" directive if you need to export data from the component.
By following either of these solutions, you ensure that the component adheres to Next.js' guidelines for server-side rendering and exporting data, resolving the ReactServerComponentsError.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论