Учебник по созданию статического сайта в Next.js с использованием getStaticPaths и getStaticProps
В этом руководстве мы рассмотрим, как мы можем создавать статические сайты в Next.js и использовать их в нашем приложении.
В Next.js при настройке статических маршрутов и динамических маршрутов необходимо определить маршруты в папке pages. Это необходимо для создания страниц до их рендеринга.
Если вы хотите освежить в памяти динамические маршруты Next.js, предлагаю вам прочитать другую мою статью:
Как создавать динамические страницы во время сборки?
В проекте Next.js, когда вы создаете свое приложение, оно уже создает для вас динамические страницы в .next/server/pages/{dynamicPath}.
Создание этих динамических путей очень важно для SEO и контента, который мы хотели бы показать в нашем приложении.
Есть две основные функции, которые нам нужно использовать для создания этих динамических страниц в зависимости от данных, которые мы хотели бы использовать:
1- getStaticProps
2- getStaticPaths
Давайте рассмотрим эти функции и попробуем понять, когда нам нужно их использовать.
getStaticProps
Next.js предварительно отрендерит ваше приложение, если вы вызовете и используете getStaticProps.
export async function getStaticProps(context) {
return {
props: {}, // props will be passed to component
}
}Когда вам нужно получить данные из базы данных или CMS, getStaticProps — это способ получить эти данные до отображения страницы и отобразить их на странице.
Если страница должна быть отображена и избежать проблем с мерцанием компонентов для выборки данных, вы должны использовать getStaticProps до отображения страницы.
Эта функция всегда запускается во время сборки и никогда не запускается на стороне клиента. Это означает, что всякий раз, когда вы запускаете сценарий следующей сборки в своем проекте, он уже извлекает и подготавливает страницу для вас.
Эту функцию можно экспортировать только непосредственно со страницы. Вы не можете экспортировать его из других файлов.
получитьстатические пути
Когда мы должны использовать getStaticPaths?
Если вы извлекаете некоторые данные и создание вашей страницы зависит от этих данных, мы должны использовать getStaticPaths с getStaticProps.
Эта генерация статического сайта из динамического пути использует и создает все динамические страницы, указанные в getStaticPaths.
Как мы можем использовать getStaticPaths и getStaticProps с примером
Давайте представим, что мы создаем страницу продуктов с множеством разных продуктов в нашем приложении. Эти сведения о продукте поступают с сервера, и мы хотели бы создать динамический путь для этих страниц.
Чтобы создать все эти страницы на одной динамической странице, нам нужно создать:
- Динамический путь для этих продуктов с соответствующими идентификаторами.
Чтобы иметь возможность получить все эти пути, нам нужно использовать getStaticPaths.
И нам нужно использовать getStaticProps для использования этого идентификатора и получения соответствующих данных для конкретного продукта в нашем динамическом пути.
В этом примере мы будем использовать https://dummyjson.com/products для получения продуктов и создания динамической страницы продуктов для каждого продукта.
Во-первых, нам нужно создать страницу pages/products/index.tsx
Мы получили все продукты до того, как страница отобразится, и мы создали страницу продуктов.
Теперь нам нужно создать каждую отдельную страницу продукта с помощью getStaticPaths и getStaticProps.
Мы должны создать динамическую страницу здесь как /pages/products/[id].tsx.
И мы создали все динамические страницы с полученными данными.
Если вы хотите посмотреть все реализации, вы можете проверить здесь:
Вот и все :)
Если вы нашли эту статью полезной, вы можете получить доступ к похожим, подписавшись на Medium-членство по моей реферальной ссылке
Подпишитесь на меня в Твиттере
Удачного кодирования!
Мелих
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
