Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Metadata is not working at all in /not-found.tsx (App directory) #49030

Closed
1 task done
ReoHakase opened this issue May 1, 2023 · 3 comments
Closed
1 task done

Metadata is not working at all in /not-found.tsx (App directory) #49030

ReoHakase opened this issue May 1, 2023 · 3 comments
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. Metadata Related to Next.js' Metadata API.

Comments

@ReoHakase
Copy link

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
    Binaries:
      Node: 18.14.1
      npm: 9.3.1
      Yarn: 3.3.0
      pnpm: 7.29.3
    Relevant packages:
      next: 13.3.3-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Metadata (metadata, generateMetadata, next/head, head.js)

Link to the code that reproduces this issue

https://github.com/ReoHakase/next13-app-head-is-not-working-in-not-found

To Reproduce

# Clone the repo to reproduce
gh repo clone ReoHakase/next13-app-head-is-not-working-in-not-found

# Install dependencies
pnpm i

# Run the dev server
pnpm dev

Visit /

You can see metadata from layout.tsx is loaded and working as intended.
image
image

Visit /404 or /not-found or /whatever-you-can-type

No metadata is loaded unlike /.
image
Since no viewport settings is given, the content gets displayed very tiny in mobile environment.
image

Describe the Bug

Metadata is not loaded and working in /not-found.tsx

metadata configuration

// layout.tsx
export const metadata: Metadata = {
  title: {
    default: "Acme Inc.",
    template: "%s | Acme Inc.",
  },
  description: "Lorem Ipsum",
  viewport: {
    width: "device-width",
    initialScale: 1.0,
  },
  openGraph: {
    // Open graph image will be provided via file-based configuration.
    // Refer: https://beta.nextjs.org/docs/api-reference/metadata#static-images
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    site: "@acme",
  },
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#f8f9fa" },
    { media: "(prefers-color-scheme: dark)", color: "#1a1d1e" },
  ],
};
// not-found.tsx
export const metadata: Metadata = {
  title: "Not Found",
};

Rendered <head> in routes that /not-found.tsx is used

No corresponding tags is rendered, even title.

<head><meta name="robots" content="noindex"><script src="/_next/static/chunks/polyfills.js" nomodule=""></script></head>

Rendered <head> in the other normal routes such as /.

Working as expected

<head><meta charset="utf-8"><title>Acme Inc.</title><meta name="description" content="Lorem Ipsum"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#f8f9fa"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1d1e"><meta name="viewport" content="width=device-width, initial-scale=1"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@acme"><script src="/_next/static/chunks/polyfills.js" nomodule=""></script></head>

Expected Behavior

<head> should be rendered with the following content in /not-found.tsx, as it is working in the other routes.

<head><meta charset="utf-8"><title>Not Found | Acme Inc.</title><meta name="description" content="Lorem Ipsum"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#f8f9fa"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1d1e"><meta name="viewport" content="width=device-width, initial-scale=1"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@acme"><script src="/_next/static/chunks/polyfills.js" nomodule=""></script></head>

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response
@ReoHakase ReoHakase added the bug Issue was opened via the bug report template. label May 1, 2023
@github-actions github-actions bot added area: app App directory (appDir: true) Metadata Related to Next.js' Metadata API. labels May 1, 2023
@ReoHakase ReoHakase mentioned this issue May 1, 2023
Open
@darthmaim
Copy link
Contributor

Duplicate of #45620 and #46619

@shuding
Copy link
Member

shuding commented May 3, 2023

Closing this one as we are tracking it in #45620.

@shuding shuding closed this as completed May 3, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jun 3, 2023

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. Metadata Related to Next.js' Metadata API.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@darthmaim @shuding @ReoHakase