Как создать динамическую маршрутизацию с компонентом Next.Js

В последней части серии (Как использовать getInitialProps для извлечения внешних данных и заполнения данных на предварительно обработанной странице Next.Js) мы создали демонстрацию получения начальных реквизитов (вызов внешнего API) и заполнения в компонент для использования.

В серии № 3 мы хотели бы создать отдельную страницу автора с маршрутом /author/[authorId] с помощью функции динамической маршрутизации в Next.Js.

Сначала мы создаем папку с именем «автор» и создаем файл с именем «[authorId].js» в папке «автор». Обратите внимание на скобки в имени файла, чтобы указать динамический маршрут. «author/[autodId].js» будет соответствовать любому URL-адресу, такому как «author/1», «author/abc».

В [authorId].js мы можем использовать хук «useRouter()», чтобы получить путь URL (например, «1» из «/author/1») как часть объекта запроса. Объект запроса будет выглядеть так, если маршрут «/author/1»:

{"authorId": "1"}

… где «authorId» — это имя нашего файла.

После получения authorId из URL-адреса мы собираемся получить данные из API, передав этот authorId в URL-адрес API:

let fetchData = async (authorId) => {
    const response = await fetch(`https://reqres.in/api/users/${authorId}`);
    const data = await response.json();
    return data.data;
}

Эта функция fetchData будет вызываться в хуке useEffect компонента при его первом монтировании. Функция fetchData вернет объект Promise обратно в хук useEffect, затем мы разрешаем обещание получить данные об авторе из объекта Promise.

Наконец, мы можем заполнить данные об авторе в компоненте React:

Вы можете добавить компонент «Загрузка» до того, как данные об авторе отобразятся на странице.

Пример авторской страницы будет выглядеть так:

Причина, по которой мы реализовали это с помощью хука useEffect, заключается в том, что страницы статически оптимизируются с помощью «Автоматической статической оптимизации» в Next.Js, и поэтому перед гидратацией статической страницы параметр маршрута не предоставлялся.

После гидратации Next.Js запустит обновление приложения и предоставит параметр маршрутизатора, о котором мы упоминали ранее, и только после этого мы получим данные в хуке useEffect. «Автоматическая статическая оптимизация» — это функция Next.Js, которая определяет (по наличию «getServerSideProps» или «getInitialProps»), можно ли предварительно загрузить страницу в статический HTML.

Надеюсь, эта статья поможет вам вкратце понять, как работает динамическая маршрутизация в Next.Js. Мы продолжим публиковать больше статей для этой серии, чтобы представить функции Next.Js и то, как вы можете их реализовать. Следите за обновлениями.