英文:
Metadata not showing in tab Next.js 13.4.1
问题
I have translated the code portions as you requested:
Here's my layout.jsx:
"use client";
import './globals.css';
import { Exo_2, Bruno_Ace } from 'next/font/google';
import Navbar from '@/components/Navbar';
import { AnimatePresence } from 'framer-motion';
const exo_2 = Exo_2({
subsets: ['latin'],
variable: '--font-body',
display: 'swap'
});
const bruno_ace = Bruno_Ace({
subsets: ['latin'],
variable: '--font-nav',
weight: '400',
display: 'swap'
});
export const metadata = {
title: 'Inti Silva',
description: 'Portfolio Front-end Inti Tomas Silva',
};
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${exo_2.variable} ${bruno_ace.variable}`}>
<body>
<Navbar />
<AnimatePresence>
{children}
</AnimatePresence>
</body>
</html>
);
}
My root page.jsx:
"use client";
import About from '../components/About';
import Contact from '../components/Contact';
import Main from '../components/Main';
import Projects from '../components/Projects';
import Skills from '../components/Skills';
import Transitions from '@/components/Transitions';
export default function Home() {
return (
<>
<Transitions/>
<Main />
<About />
<Skills />
<Projects />
<Contact />
</>
);
};
If you need further assistance or have more content to translate, please let me know.
英文:
I have defined the metadata object as you'll see below but it doesn't show in my chrome tab, it only shows "localhost:3000/#home". All my .jsx files are marked with "use client" bc it's a portfolio I'll be uploading to Github Pages so I can't use Server Components. I don't know if that has something to do with it.
Here's my layout.jsx:
"use client"
import './globals.css'
import { Exo_2, Bruno_Ace } from 'next/font/google'
import Navbar from '@/components/Navbar'
import { AnimatePresence } from 'framer-motion';
const exo_2 = Exo_2({
subsets: ['latin'],
variable: '--font-body',
display: 'swap'
})
const bruno_ace = Bruno_Ace({
subsets: ['latin'],
variable: '--font-nav',
weight: '400',
display: 'swap'
})
export const metadata = {
title: 'Inti Silva',
description: 'Portfolio Front-end Inti Tomas Silva',
}
export default function RootLayout({children}) {
return (
<html lang="en" className={`${exo_2.variable} ${bruno_ace.variable}`}>
<body>
<Navbar />
<AnimatePresence>
{children}
</AnimatePresence>
</body>
</html>
)
}
I tried putting the metadata object in my page.jsx but it doesn't show either. I'm using the new app directory that it's supposed to be stable in this version.
My root page.jsx:
"use client"
import About from '../components/About';
import Contact from '../components/Contact';
import Main from '../components/Main';
import Projects from '../components/Projects';
import Skills from '../components/Skills';
import Transitions from '@/components/Transitions';
export default function Home() {
return (
<>
<Transitions/>
<Main />
<About />
<Skills />
<Projects />
<Contact />
</>
);
};
答案1
得分: 3
静态和动态元数据（generateMetadata）仅受服务器组件支持。你可以在文档中了解更多信息 这里。
英文:
Both static and dynamic metadata (generateMetadata) are only supported in server components. You can read more from the docs here.
答案2
得分: 0
我遇到了相同的问题，我只是从我的layout.tsx中删除了'use client'，然后标题就开始显示了。
英文:
I had the same problem, i fixed it just removing the 'use client' from my layout.tsx and the title starts showing up
答案3
得分: 0
在将所有内容标记为"use client"之后，您实际上破坏了Next.js框架的目的。
在深入讨论您的实现细节之前，我想指出您可以在Vercel（vercel.com/new）上免费部署Next应用程序。这非常简单，您可以做很多事情。我无法推荐它够多。
现在谈到您的元标签，您的根布局组件**必须是服务器组件。**当服务器构建您的应用程序时，它必须在服务器端呈现您的初始布局，因为这将保存应用程序的其余部分。
当爬虫、机器人或甚至用户访问您的网站时，预渲染的布局组件将作为纯HTML发送，以启动应用程序，同时加载CSS和JS。
在React中，我们在index.html中硬编码了head标签。然后，在JS下载并启动后，它可以操作标签以生成动态页面标题。但是，初始页面标题无论用户位于哪个用户端路由上都是相同的，因为head标签来自原始的index.html。
另一方面，当访问者首次访问您的网站时，Next会向他们发送一个使用正确head标签创建的HTML文件。这就是"metadata"对象发挥作用的地方。
"metadata"对象由Next用于构建应该伴随该路由的head标签。
当服务器上呈现布局组件时，Next知道该对象应该在构建该特定路由时使用。
然而，如果将布局或页面标记为客户端组件，那么您实际上是在告诉Next该组件的代码应在客户端上执行和呈现。
因此，当有人访问页面时，他们将看不到标题，因为HTML文件中没有标题。
当JavaScript完成下载并开始运行时，metadata对象对React来说毫无意义。
对于导航栏、标题和页脚，这些是根布局中最常见的组件，当您需要一个交互/动态组件时，您可以将特定的组件设置为"use client"组件。例如，不要将导航栏设置为客户端组件，而是将打开菜单的按钮设置为客户端组件。
我真的建议您部署完整的Next应用程序，而不是在GitHub上部署React SPA。我免费使用Vercel，但还有许多其他选项。
英文:
Well, by marking everything with "use client" you end up defeating the purpose of the Next.js framework.
Before going into details of your implementation, I want to point out that you can deploy Next apps for free on Vercel (vercel.com/new). It's extremely simple and you can do a lot of stuff. I cannot recommend it enough.
Now for your meta tags, your root layout component has to be a server component. When the server builds your application it has to render your initial layout on the server side because that is what is going to hold the rest of the application.
When a crawler, a bot, or even a user, access your site that pre-rendered layout component is sent as plain HTML to start up the application while CSS and JS load.
In React we have the head tags hard-coded in the index.html. Then after the JS downloads and kicks in it can manipulate the tags to generate dynamic page titles. However, the initial page title is the same regardless of which user-side route you're on because the head tag comes from the original index.html.
On the other hand, the first time a visitor access your website, Next will send them an HTML file that was created with the correct head tags in the server. That's where the "metadata" object comes into play.
The "metadata" object is used by Next to build the head tags that are supposed to accompany that route.
When your layout component is rendered on the server, Next knows that that object is supposed to be used when building that specific route.
However, if the layout or page is marked as a client component, you're telling Next that the code of that component is to be executed and rendered on the client.
So when someone accesses the page, they won't see a title because the title did not exist in the HTML file that was downloaded.
When the JavaScript finishes downloading and start running the metadata object is something that means nothing to React.
For navigation bars, headers, and footers, which are the most common components in the root layout, when you need a component that is interactive/dynamic, you can make that specific compontent a "use client" component. For example, instead of the navbar, make the button that opens up the menu a client component.
I really recommend deploying a full Next app instead of a React SPA on GitHub. I use Vercel for free, but there are many other options.
答案4
得分: 0
主要问题是你需要区分页面和组件，页面不应包含任何 React 逻辑，如 useState 等，但组件应该。
组件应该有 "使用客户端"，但页面不应该。
这样你就可以创建和使用 NextJS 的 metadata 对象来定义标题和元数据。现在 metadata 是由页面组件上的 next 创建的，它不能有 "use client"。
在上面的示例中，你正在使用 "use client" 创建布局，去掉它。其次，分离组件和页面。示例：
//page.js
import ContactForm from "@/components/ContactForm";
export const metadata = {
title: "My Awesome App",
description: "Nice Description"
}
export default function Page() {
return (
<ContactForm />
)
}
//ContactForm.js
"use client";
import { useState } from "react";
export default function ContactForm() {
const [myState, setMyState] = useState("Hi");
return (
<div>
{myState}
</div>
)
}
英文:
The main issue is that you need to separate Pages and Components, A page should not contain any react logic, like useState etc. but a Component should.
> A component should have "use client" but a page shouldn't.
This way you can create and use the NextJS's metadata object to define title and metadata. Now Metadata is created by next on the page component and it cannot have "use client".
In the above example, you are creating the layout with "use client", remove that. Secondly, split components and pages. Example:
//page.js
import ContactForm from "@/components/ContactForm";
export const metadata = {
title: "My Awesome App",
description: "Nice Description"
}
export default function Page() {
return (
<ContactForm />
)
}
>
//ContactForm.js
"use client";
import { useState } from "react";
export default function ContactForm() {
const [myState, setMyState] = useState("Hi");
return (
<div>
{myState}
</div>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论