在nextjs页面中使用另一个js文件中的数组

jfgube3f 于 2023-01-25 发布在其他

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

我想使用另一个页面上的数组，我需要title和 meta标签的数组信息，但是似乎在next js中加载信息需要花费时间，所以我一开始遇到了undefined，我应该用什么方法来加载这个数组呢？
（我不能将数组放在同一个文件中，因为我还需要将它放在其他一些页面中。）
我也试过获取静态 prop ，但是它返回未定义的 prop 。我应该使用swr吗？搜索引擎优化的最佳解决方案是什么？

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>
   </>
   )
   }

next.js

来源：https://stackoverflow.com/questions/75180659/use-an-array-from-another-js-file-in-nextjs-page

2条答案

按热度按时间

vyswwuz21#

我建议使用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;

赞(0）回复(0）举报 2023-01-25

gmol16392#

制作一个如下所示的通用组件：并在页面顶部导入，这样就不会有未定义数据的问题。

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;

赞(0）回复(0）举报 2023-01-25

我来回答

在nextjs页面中使用另一个js文件中的数组

2条答案

相关问题

热门标签

最新问答