[英]use an array from another js file in nextjs page
我想使用另一页上的数组。 我需要title和meta标签的数组信息,但是好像在next.js加载信息需要时间,所以一开始遇到undefined。 我应该使用什么解决方案来加载这个数组?
(我不能将数组放在同一个文件中,因为我在其他一些页面中也需要它。)
我也尝试获取 static 道具,但它返回未定义的道具。 我应该使用 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.