Question 223293 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – Next js build in vercel fails when with meta data. Why?

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.

"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>
  );
}

When I un-comment the metadata, the build deployment fails with the following errors.

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

Why does having the metadata cause the errors and what’s the solution?

Tags:

2

Answers


  1. 0

    from here

    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

    Login or Signup to reply.
  2. 0

    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:

    1. Remove the export of "metadata" from the component.
    2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search