Next.js 中的元数据更改问题：.next 文件夹重建后元数据被覆盖

Question

我在 Next.js 应用程序中遇到元数据自定义问题。尽管我能够成功修改layout.tsx 文件中的元数据，但这些更改并未反映在控制台输出中。此外，我注意到删除 .next 文件夹并重建后，元数据被覆盖。

下面是我的layout.tsx文件中的相关代码片段：

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: {
    default: "Love Coding? Master Web Dev with Forge Code: Python, Next.js, FastAPI, Deployment & More!",
    template: "%s | Forge Code"
  },
  description: "**Learn to code like a pro!** Master Python, Next.js, FastAPI, deployment strategies, **SOLID principles**, and **system design**. Build real-world web applications and **unleash your coding potential** with Forge Code. We'll guide you every step of the way!",
  keywords: [
    "web development",
    "coding",
    // Other keywords...
  ]
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div>
          Hello 
        </div>
        {children}
      </body>
    </html>
  );
}

项目目录结构：

├── app
│   ├── favicon.ico
│   ├── globals.css
│   └── layout.tsx
├── ... (other directories and files)

观察： 删除 .next 文件夹并重建后，我可以看到元数据更改，但无法访问我的应用程序。重建后，元数据会被覆盖，导致我的自定义内容丢失。预期行为：我希望我的元数据更改能够一致地反映在整个应用程序中，而不会在构建过程中被覆盖。

其他背景： 我在我的项目中使用 Emotion 、material -ui 进行样式设计。这个问题阻碍了我的进步，任何有关解决它的见解或指导将不胜感激。截屏：元数据覆盖屏幕截图

在 Stack Overflow 上发布此问题应该可以帮助您从社区获得帮助和见解，以解决 Next.js 中的元数据自定义问题。

我想在下一个 js 项目中自定义我的元数据。

Answer 1

问题：

元数据被覆盖

我注意到，当我的主页元数据位于应用程序目录中的 page.tsx 中时，它可以完美地工作。但是，当我使用页面文件夹中的 index.tsx 时，元数据无法正确呈现。

可能的原因：

用
```
layout
```
写入的元数据会被
```
current page's
```
元数据覆盖。
根据
```
app
```
路由器文件约定，在应用程序路由器中没有index.js。不要混合文件约定。

请阅读：

元数据合并：https://nextjs.org/docs/app/building-your-application/optimizing/metadata#merging
应用程序路由约定：https://nextjs.org/docs/getting-started/project-structed#app-routing-conventions
元数据排序：https://nextjs.org/docs/app/building-your-application/optimizing/metadata#ordering
覆盖字段：https://nextjs.org/docs/app/building-your-application/optimizing/metadata#overwriting-fields
继承字段（意味着在布局中保留一些所有页面通用的字段）：https://nextjs.org/docs/app/building-your-application/optimizing/metadata#inheriting-fields

可能的解决方案：

将布局的元数据移动到主页（page.js 位于根级别），并为其他页面在各自的页面中设置元数据。这是因为 NextJs 替换了重复的元数据键 阅读本文 1。
在
```
layout.js
```
中仅保留不会更改的元数据（阅读本文 5），或者不将任何元数据放入
```
layout.js
```
将元数据保留在自己的页面中。

显示元数据覆盖的小演示：

文件夹结构：

app
├── about
│   └── page.js   // about page
├── favicon.ico
├── globals.css
├── layout.js
└── page.js   // home page

layout.js

：

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "MetaData from Layout",
  description: "MetaData from Layout",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

page.js

在

src\app\page.js

:

import Image from "next/image";
// export const metadata = {
//   title: "MetaData from HomePage",
//   description: "MetaData from HomePage",
// };

// NOW HOMEPAGE SHOWS METADATA FROM layout.js

// UNCOMMENT & SEE

export default function Home() {
  return (
    <div>
      Homepage
    </div>
  );
}

about page

在

src\app\about\page.js

:

export const metadata = {
    title: "MetaData from About",
    description: "MetaData from About",
};

 // THIS WILL NOT GET OVERWRITTEN

export default function AboutPg() {
    return (
        <div>
            About
        </div>
    );
}

如果您有任何疑问，请发表评论（如果有必要我会更新答案）

Next.js 中的元数据更改问题：.next 文件夹重建后元数据被覆盖

问题描述投票：0回答：1

1个回答

最新问题

Next.js 中的元数据更改问题：.next 文件夹重建后元数据被覆盖

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1