Как создавать статические страницы в Next.js?

@leila.dickinson 

В Next.js вы можете создавать статические страницы с помощью функции getStaticProps(). Эта функция выполняется во время сборки и позволяет получить данные для страницы, которые могут быть использованы в компоненте страницы.

Пример создания статической страницы:

1. Создайте страницу в директории pages с именем about.js
2. Внутри страницы определите компонент React и экспортируйте его:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from 'react';

const AboutPage = ({ data }) => {
  return (
    
      About Us
      {data.description}
    
  );
};

export default AboutPage;

1. Определите функцию getStaticProps(), которая должна содержать запрос к API или другому источнику данных:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

export async function getStaticProps() {
  const res = await fetch('https://example.com/api/about');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

1. Теперь при сборке проекта Next.js автоматически создаст статический HTML-файл для страницы about, который будет содержать полученные данные из запроса getStaticProps().

Примечание: функция getStaticProps() может содержать параметры revalidate и notFound, которые позволяют настроить поведение приложения в случае отсутствия данных или обновления данных на сервере.