在 nextjs 頁面中使用另一個 js 文件中的數組

Question

我想使用另一頁上的數組。 我需要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>
   </>
   )
   }

Answer 1

我推薦使用 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;

Answer 2

制作一個如下所示的通用組件：並在頁面頂部導入。 那么你就不會有任何未定義數據的問題。

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;

在 nextjs 頁面中使用另一個 js 文件中的數組

問題描述

2 個解決方案

解決方案1
1 已采納 2023-01-20 06:58:53

解決方案2
0 2023-01-20 11:37:20

在 nextjs 頁面中使用另一個 js 文件中的數組

問題描述

2 個解決方案

解決方案1 1 已采納 2023-01-20 06:58:53

解決方案2 0 2023-01-20 11:37:20

解決方案1
1 已采納 2023-01-20 06:58:53

解決方案2
0 2023-01-20 11:37:20