Блог

Я новичок в NextJS и реагирую. Я кодирую веб-сайт и хочу иметь возможность хранить весь текст копии (текст, просматриваемый пользователями сайта) в центральном файле данных и динамически вызывать его в каждый раздел/элемент компонента.

Причина, по которой я иду по этому пути вместо жесткого кодирования статического текста в каждый элемент, заключается в том, что я использую копирайтера для редактирования своего текста. Поэтому я хочу иметь возможность отправить этому человеку простой файл всего текста сайта для редактирования, без необходимости предоставления или доступа редактора ко всему коду сайта.

Я думаю, что для этой цели я должен использовать getStaticProps функцию в NextJS:

 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"  }, ];  

Затем в моем компоненте используйте данные следующим образом:

 lt;section sx={styles.section} className="Hero"gt;  {copyText.map ((copyItem, 1) =gt; (  lt;Header sx={styles.header}gt;{copyItem.Header}lt;/Headergt;  lt;SubHeading sx={styles.header}gt;{copyItem.SubHeading}lt;/SubHeadinggt;  lt;Text sx={styles.header}gt;{copyItem.Body}lt;/Textgt; lt;/sectiongt;  

Я не уверен, что это правильный путь, или если есть более простой метод для того, чего я пытаюсь достичь.

Если мы используем fetch функцию, представленную выше, мы получим сообщение об ошибке:

Ошибка Сервера

Ошибка типа: Поддерживаются только абсолютные 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 (  lt;div className="center"gt;  lt;ItemsList data={data} /gt;  lt;/divgt;  ); }  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 (  lt;gt;  lt;ul className="center"gt;  {data.map((event) =gt; (  lt;Items  key={event.id}  id={event.id}  section={event.section}  header={event.Header}  subHeading={event.SubHeading}  body={event.Body}  /gt;  ))}  lt;/ulgt;  lt;/gt;  ); }  export default ItemsList;  

Items.js

 function Items({ id, section, header, subHeading, body }) {  return (  lt;div className="card"gt;  lt;smallgt;{id}lt;/smallgt;  lt;h4gt;{section}lt;/h4gt;  lt;h1gt;{header}lt;/h1gt;  lt;h2gt;{subHeading}lt;/h2gt;  lt;pgt;{body}lt;/pgt;  lt;/divgt;  ); }  export default Items;  

Конечно , я кое-что добавил css , но я не буду это представлять, потому что здесь не в этом дело.

Результат выглядит так:

Протестировано на Win10 «далее»: «12.0.4»,»реагировать»: «17.0.2»,