Problem with the metadata when attempting to deploy it on Vercel

[aditya305]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home Single Language
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.3
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

warn  - Latest canary version not detected, detected: "13.4.3", newest: "13.4.4-canary.3".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.

Which example does this report relate to?

page.js, metadata

What browser are you using? (if relevant)

Chrome 113.0.5672.127

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I recently created a new Next.js project and developed a website. During this process, I discovered that the head tags are now being written using the _export const metadata = {}_ method, including a title like this:

_export const metadata = {
  title: "Flutter Roadshow"
};

After pushing the code and attempting to deploy it on Vercel, I encountered an issue where Vercel was unable to successfully deploy the code onto the website.

Expected Behavior

Ideally, the website should execute and deploy seamlessly, devoid of any errors. However, instead of the expected smooth deployment, I encountered some errors. To provide a better understanding of the situation, I have included screenshots of the relevant code and the error message displayed by Vercel:

These errors are hindering the successful deployment of the website on Vercel.

To Reproduce

[joulev]

The export const metadata and export function generateMetadata syntaxes only work in server components (at least for now), see #48266. So you need to do something like this

• Make a client component, say, page.client.tsx with all your logic

"use client";

export default function PageClient() {
  return <div>Hello, world!</div>;
}

• then use it in the server component page.tsx

// page.tsx
import PageClient from "./page.client";

export default function Page() {
  return <PageClient />;
}

export const metadata = {
  title: "Hello, world!",
};

[aditya305]

sounds good! However, is there a simpler method to define the remaining SEO tags?

[joulev]

See the documentation.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.