我想使用另一个页面上的数组。我需要标题和元标签的数组信息，但似乎在下一个js它需要时间来加载信息，所以我遇到未定义的第一。我应该使用什么解决方案来加载这个数组?
(我不能把数组放在同一个文件中，因为我也需要在其他页面中使用它。)
我也尝试获得静态道具，但它返回未定义的道具。我应该用swr吗?seo的最佳解决方案是什么?
import { items } from "../../public/assets/ArticlesList.js";
const ArticlePage = () => {
const router = useRouter();
const { id } = router.query;
let data = items[id];
return (
<>
<Head>
<title> {data.title} </title>
</Head>
<div>
....
</div>
</>
)
}
我推荐使用getServerSideProps
import { items } from "../../public/assets/ArticlesList.js";
const ArticlePage = ({ data }) => {
return (
<>
<Head>
<title> {data.title} </title>
</Head>
<div>
....
</div>
</>
);
}
export async function getServerSideProps(context) {
const { id } = context.query;
const data = items[id];
return {
props: { data }
}
}
export default ArticlePage;
创建一个像下面这样的公共组件，并在页面顶部导入。这样就不会有未定义数据的问题了。
import Head from 'next/head';
const MetaData = (props) => {
const title = props.title || '';
const description = props.description || '';
const keywords = props.keywords || '';
const image = props.image || '';
return (
<Head>
<title>{title}</title>
<meta name="description" content={description} />
<meta name="og:description" content={description} />
<meta name="twitter:description" content={description} />
<meta name="twitter:site" content="" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} />
<meta name="og:site_name" content="" />
<meta name="og:title" content={title} />
<meta name="keywords" content={keywords} />
<meta name="og:image" content={image} />
</Head>
);
};
export default MetaData;