NextJs 从数据文件中获取复制文本

Question

我是 NextJs 和 React 的新手。 我正在编写一个网站，并希望能够将所有复制文本（网站用户看到的文本）存储在一个中央数据文件中，并动态地将其调用到每个部分/组件元素中。

我走这条路而不是将 static 文本硬编码到每个元素中的原因是我使用文案来编辑我的文本。 因此，我希望能够向此人发送一个包含所有站点文本的简单文件以供编辑，而无需让编辑器提供或访问整个站点代码。

我想我应该为此目的在 NextJs 中使用getStaticProps function ：

 export async function getStaticProps(context) {
  const res = await fetch(`../data/copy.data.js`);
  const data = await res.json();

  if (!data) {
    return {
      notFound: true
    };
  }

  return {
    props: { data } // will be passed to the page component as props
  };
}

连同将保存每个部分复制文本作为属性的 Jason 文件。 像copy.data.js这样的东西

 export const copyText = [
    {
      id: 1,
      section: "Hero",
      Header: "The Heading Text",
      SubHeading: "SubHeading Text",
      Body: "The Body paragragh of text which has a lot more to say"
    },
    {
      id: 2,
      section: "Feature",
      Header: "Feature Heading",
      SubHeading: "Feature SubHeading",
      Body: "The Body paragragh of text which has a lot more to say"
    },
    {
      id: 3,
      section: "Services",
      Header: "Services Heading",
      SubHeading: "Services SubHeading",
      Body: "The Body paragragh of text which has a lot more to say"
    },
    {
      id: 4,
      section: "Service",
      Header: "Service Heading",
      SubHeading: "Service SubHeading",
      Description: "The Specific Service Description paragragh"
    },
];

然后在我的组件中使用如下数据：

<section sx={styles.section} className="Hero">
  {copyText.map ((copyItem, 1) => (
   <Header sx={styles.header}>{copyItem.Header}</Header>
   <SubHeading sx={styles.header}>{copyItem.SubHeading}</SubHeading>
   <Text sx={styles.header}>{copyItem.Body}</Text>
</section>

我不确定这是否是 go 的正确方法，或者我是否有更简单的方法来实现。

Answer 1

如果我们使用上面介绍的fetch function，我们会得到一个错误：

服务器错误

TypeError：仅支持绝对 URL

---

为避免此错误，代码应如下所示（这是我的主观主张）：演示文稿尽可能简单，您可以尝试根据自己的需要调整代码。

data.js文件位于项目root目录中。 在id:4中，我将最后一项从Description更改为Body以保持一致；-)

---

index.js （主页）

import ItemsList from "../components/ItemsList.js";
import { copyText } from "../data.js";

export default function Home({ data }) {
  // console.log(data);
  return (
    <div className="center">
      <ItemsList data={data} />
    </div>
  );
}

export async function getStaticProps() {
  return {
    props: { data: copyText }, // will be passed to the page component as props
  };
}

---

ItemsList.js

import Items from "./Items";

function ItemsList({ data }) {
  return (
    <>
      <ul className="center">
        {data.map((event) => (
          <Items
            key={event.id}
            id={event.id}
            section={event.section}
            header={event.Header}
            subHeading={event.SubHeading}
            body={event.Body}
          />
        ))}
      </ul>
    </>
  );
}

export default ItemsList;

---

项目.js

function Items({ id, section, header, subHeading, body }) {
  return (
    <div className="card">
      <small>{id}</small>
      <h4>{section}</h4>
      <h1>{header}</h1>
      <h2>{subHeading}</h2>
      <p>{body}</p>
    </div>
  );
}

export default Items;

---

当然我添加了一些css ，但我不会展示它，因为这不是重点。

output 看起来像这样：

在 Win10 上测试“next”：“12.0.4”，“react”：“17.0.2”，