英文:
What's the correct way to use structured data jsonLD in Next.js 13 app-router?
问题
以下是您要翻译的内容：
"我试图在我的Next.js 13（应用路由器）应用程序中添加结构化数据，但找不到正确的方法。
Next-seo包也出现错误。
我尝试了next-seo，但出现了以下错误：
未处理的运行时错误
错误：无法读取null的属性（读取'useContext'）
当我在应用程序目录中的layout.js中添加
export default function RootLayout({ children }) {
return (
{children}
{/*
}"
请注意，我已经省略了您提到的代码部分，只提供了翻译好的内容。
英文:
I was trying to add structured data in my nextJS 13(app router) application but couldn't find the correct method.
Next-seo package also gives errors
I tried next-seo but got this error:
Unhandled Runtime Error
Error: Cannot read properties of null (reading 'useContext')
While adding <NextSeo useAppDir={true}/>
To the layout.js in the app directory
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<NextSeo useAppDir={true} />
</head>
<body className={inter.className}>
<Navbar />
{children}
{/* <GlobalContextProvider>{children}</GlobalContextProvider> */}
<Analytics />
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
在Next.js 13中，您可以使用JSON-LD格式的结构化数据，利用Head组件和内置的next-seo包。以下是如何在Next.js 13应用程序中使用JSON-LD实现结构化数据的示例，同时使用app-router：
在您的项目目录中运行以下命令来安装所需的依赖项：
npm install next-seo
创建一个新文件，例如Layout.js，在其中定义您的应用程序的布局组件。在此组件中，您可以使用next-seo包设置结构化数据。
import { DefaultSeo, NextSeo } from 'next-seo';
import Head from 'next/head';
const Layout = ({ children }) => {
return (
<>
<DefaultSeo
// 在此处定义默认的SEO配置
/>
<Head>
{/* 在此处添加额外的元标记或样式表 */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Organization',
name: 'Your Organization Name',
url: 'https://www.example.com',
// 在此处添加更多的结构化数据属性
}),
}}
/>
</Head>
{children}
</>
);
};
export default Layout;
在您的_app.js文件中，导入并使用Layout组件包装您的应用程序。
import Layout from './Layout';
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
在您的各个页面中，您可以使用next-seo的NextSeo组件来设置特定的SEO和结构化数据。例如：
import { NextSeo } from 'next-seo';
const MyPage = () => {
return (
<>
<NextSeo
title="My Page Title"
description="Description of my page"
// 在此处添加更多的SEO属性
/>
{/* 您页面的其余内容 */}
</>
);
};
export default MyPage;
通过按照这些步骤，您可以使用next-seo包和Head组件将JSON-LD格式的结构化数据添加到您的Next.js 13应用程序中。这种方法允许您定义默认的SEO配置，设置全局结构化数据，并根据需要在每个页面上进行覆盖。
英文:
What is the error you are getting kindly mentioned but as I understand hope It will help you
In Next.js 13, you can use structured data in JSON-LD format by leveraging the Head component and the built-in next-seo package. Here's an example of how you can implement structured data using JSON-LD in a Next.js 13 app with the app-router:
Install the required dependencies by running the following command in your project directory:
lua
npm install next-seo
Create a new file, for example, Layout.js, where you will define the layout component for your app. In this component, you can set up the structured data using the next-seo package.
jsx
import { DefaultSeo, NextSeo } from 'next-seo';
import Head from 'next/head';
const Layout = ({ children }) => {
return (
<>
<DefaultSeo
// Define default SEO configuration here
/>
<Head>
{/* Add additional meta tags or stylesheets here */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Organization',
name: 'Your Organization Name',
url: 'https://www.example.com',
// Add more structured data properties here
}),
}}
/>
</Head>
{children}
</>
);
};
export default Layout;
In your _app.js file, import and wrap your app with the Layout component.
jsx
import Layout from './Layout';
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
In your individual pages, you can set specific SEO and structured data using the NextSeo component from next-seo. For example:
jsx
import { NextSeo } from 'next-seo';
const MyPage = () => {
return (
<>
<NextSeo
title="My Page Title"
description="Description of my page"
// Add more SEO properties here
/>
{/* Rest of your page content */}
</>
);
};
export default MyPage;
By following these steps, you can add structured data in JSON-LD format to your Next.js 13 app using the next-seo package and the Head component. This approach allows you to define default SEO configurations, set up global structured data, and override them on a per-page basis as needed.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论