Реализация getStaticProps

Предварительный рендеринг в Next.js

Next.js поддерживает два вида предварительного рендеринга: Статическую генерацию и Рендеринг на стороне сервера (SSR). Разница заключается в моменте, когда генерируется HTML для страницы.

• Статическая генерация — это метод предварительного рендеринга, который создаёт HTML во время сборки. Сгенерированный HTML затем переиспользуется при каждом запросе.
• Рендеринг на стороне сервера (SSR) — это метод предварительного рендеринга, который генерирует HTML при каждом запросе.

Важно, что Next.js позволяет выбирать, какой метод предварительного рендеринга использовать для каждой страницы. Вы можете создать "гибридное" приложение Next.js, используя Статическую генерацию для большинства страниц и SSR для остальных.

Использование статической генерации (getStaticProps())

Теперь нам нужно добавить импорт getSortedPostsData и вызвать эту функцию внутри getStaticProps в файле pages/index.js.

Откройте pages/index.js в редакторе и добавьте следующий код перед экспортируемым компонентом Home:

import { getSortedPostsData } from '../lib/posts';
 
export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

Возвращая allPostsData внутри объекта props в getStaticProps, мы передаём записи блога в компонент Home как пропс. Теперь вы можете получить доступ к записям блога следующим образом:

export default function Home ({ allPostsData }) { ... }

Чтобы отобразить записи блога, обновим компонент Home, добавив новый тег <section> с данными ниже секции с вашим представлением. Не забудьте также изменить пропсы с () на ({ allPostsData }):

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Оставляем существующий код здесь */}
 
      {/* Добавляем этот тег <section> ниже существующего */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Блог</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

Теперь вы должны увидеть данные блога при переходе по адресу http://localhost:3000.

Поздравляем! Мы успешно получили внешние данные (из файловой системы) и предварительно отрендерили главную страницу с этими данными.

На следующей странице обсудим несколько советов по использованию getStaticProps.