如何在next.js 13中更改Meta title？

jslywgbw 于 2023-10-18 发布在其他

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

我创建了一个未来13项目与曼尼子页面。在接下来的13我发现soloutin这样做的应用程序文件夹中的文件夹，如app/contact/page.tsx我尝试了它，它的工作，所以我可以打开路由与localhost：3000/联系人现在我在点，我想改变子页面的Meta标题，但有问题.我不能补充：

import type { Metadata } from 'next'
export const metadata: Metadata = {
  title: 'Home | Sakura Hagen',
  description: 'Home Page of Sakura Hagen',
}

因为我使用“使用客户端”在我的子页面，所以这是我尝试其他。
首先，我尝试像这样导入头部：

import Head from 'next/head';

  return (
    <>
      <Head>
        <title>Contact - Page </title>
        <meta name="description" content="Willkommen zu meinem Blog" />
      </Head>....

但什么都没改变这与之前的标题有关。
接下来我试着
npm i next-seo
然后我试着这样导入

import { NextSeo } from 'next-seo';

<NextSeo
        title="Contact - Page"
        description="description"
      />

但一切都没有改变
最后，我尝试创建一个layout.tsx，在这里我添加了如下的Meta：

import { Footer, Navbar, ScrollToTop, Tel } from '@/components'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

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

export const metadata: Metadata = {
  title: 'contact - page',
  description: 'description',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="de" className='scroll-smooth'>
      <body className="relative"> 
        <Navbar />
        {children}
        <Footer />
        <Tel />
        <ScrollToTop />
      </body>
    </html>
  )
}

它工作了一点，如果我打开我的主页，点击联系人，我去./联系人与新的标题。但是，如果我试图跳回到主页的错误看起来像这样。

Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

next.js

来源：https://stackoverflow.com/questions/77274042/how-do-i-change-the-meta-title-in-next-js-13

2条答案

按热度按时间

jgovgodb1#

我已经找到了一个答案，而制定它，我希望它能帮助别人
很简单…
只需用途：

<title>Page title</title>

在页面里面.tsx
应该看起来像这样

import React from 'react'

const page = () => {
  return (
    <title>Page title</title>
    <div>page</div>
  )
}

export default page

赞(0）回复(0）举报 2023-10-18

fgw7neuy2#

由于您正在使用App Router，因此无需手动使用<title>元素。如果你查看Next.js关于元数据的文档，你会注意到沿着段有沿着的合并。
例如，在app/layout.tsx的根布局中，我声明如下：

export const metadata = {
  title: {
    template: '%s — Showcasething'
  }
}

在一个页面中，比如app/page.tsx，我可以做以下事情：

export const metadata = {
  title: 'Page Title'
}

Next.js所做的是合并这些导出的metadata对象（或从generateMetadata生成的元数据）以构建最终的元数据，从而构建标题。在我的示例中，导航到/处的根路径将把根布局的模板和特定于页面的标题“Page Title”中的插槽放入其中，导致“Page Title - Showcasething”。
当然，在没有模板的情况下也可以这样做，只要在适用的地方沿线段使用一个title沿着来覆盖它们。另一个例子：

// app/layout.tsx
export const metadata = {
  title: 'Home'
}

// app/nested/page.tsx
export const metadata = {
  title: 'Nested'
}

此配置将使/nested的标题为“嵌套”。

赞(0）回复(0）举报 2023-10-18

我来回答

如何在next.js 13中更改Meta title？

2条答案

相关问题

热门标签

最新问答