Next.js静态和动态元数据不工作

j13ufse2 于 2024-01-07 发布在其他

关注(0)|答案(2)|浏览(175)

我正在检查这个document，以将静态或动态元数据添加到我的页面。当我在localhost中运行页面时，我无法在头部看到元数据。如果我直接使用<meta>添加，则一切都按预期工作。
尝试在index.js中直接使用它时的示例代码是：

import Layout from "@/components/layout"

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
}

export default function Home() {
  return (
    <Layout>
      <div>This is an example</div>
    </Layout>
  )
}

字符串
我注意到的另一个问题是，如果我试图在layout.js文件中添加元数据，那么即使我没有使用“use client”指令，我也会得到以下错误。

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

型
下面是layout.js代码：

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
}

export default function Layout({ children }) {
  return (
    <div>
      <p>This is a layout</p>
      {children}
    </div>
  )
}

型
该文件还提到以下内容：

Config-based Metadata: Export a static metadata object or a dynamic generateMetadata
function in a layout.js or page.js file.

型
布局文件是由什么构成的？是不是一个叫layout.js的文件？它是否依赖于它的父目录？
您可以找到项目here的示例

next.js

来源：https://stackoverflow.com/questions/77702038/next-js-static-and-dynamic-metadata-not-working

2条答案

按热度按时间

kmbjn2e31#

您提供的示例存储库正在运行Next.js 14，并且使用Page router方法。理想情况下，您应该使用App router方法，我认为这就是您的问题所在。如果我没记错的话，Page router方法组件默认为客户端，而您正在尝试使用App router（默认为服务器端组件）功能。
在应用程序路由器中，有一些特殊的文件要使用，在这种情况下，它们将是：

layout.tsx-此级别的页面及其后代将自动使用此布局。
page.tsx-使用layout.tsx中相同级别的布局。您不需要导入和使用layout.tsx中定义的组件。

下面是一个应用路由器的TypeScript结构示例：

- app
  - layout.tsx
  - page.tsx
  - child-1
     - layout.tsx
     - page.tsx
  - child-2
     - page.tsx

字符串

/（app/page.tsx）-将显示layout.tsx中page.tsx的内容。
/child-1（app/child-1/page.tsx）-将显示page.tsx的内容在同一级别的layout.tsx内，所有这些都将嵌套在app/layout.tsx内。
/child-2（app/child-2/page.tsx）-将显示app/layout.tsx中page.tsx的内容。

这是一个相当简单的答案，在App router文档中还有很多东西要读。它的tl;dr是你需要使用App router而不是Pages router来实现你提到的元数据功能。

赞(0）回复(0）举报 2024-01-07

1cosmwyk2#

使用Next.js时，metaddata对象不会自动注入到文档的<head>中。您必须使用next/head中的Head组件。因此，必须在Head组件中手动使用metadata对象来设置标题和描述。
试试这边...

import Head from 'next/head';
import Layout from '@/components/layout';

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function Home() {
  return (
    <Layout>
      <Head>
        <title>{metadata.title}</title>
        <meta name='description' content={metadata.description} />
      </Head>
      <div>This is an example</div>
    </Layout>
  );
}

字符串
另一个错误明确指出，你试图从一个使用use client指令的组件中导出metadata，或者在一个使用use client指令的组件中嵌套metadata。但是你的layout.js似乎没有使用该指令。该错误可能源于父组件或对项目结构的误解。
layout.js不是框架本身识别的特殊类型的文件。它是用于跨多个页面创建常量结构的常见模式。它是典型的React组件，它包裹页面的主要内容。就像你可以使用一致的header，footers和其他你想要的元素一样。

赞(0）回复(0）举报 2024-01-07

我来回答

Next.js静态和动态元数据不工作

2条答案

相关问题

热门标签

最新问答