Введение в курс и настройка окружения для разработки блога на Next.js и Sanity CMS

В этом модуле мы заложим фундамент вашего будущего серверлесс-приложения. Вы узнаете, как инициализировать проект на Next.js, используя команду npx create-next-app, и настроить его для дальнейшей работы. Мы также установим React Bootstrap для создания стильного и адаптивного пользовательского интерфейса, чтобы сразу перейти к логике приложения, минуя рутинную верстку.

Ключевой шаг этого раздела — освоение абсолютных путей к файлам. Мы создадим файл jsconfig.json и пропишем в нем базовый путь (baseUrl), что избавит вас от громоздких импортов вида ../../../components/Navbar. Это не только упростит код, но и сделает его гораздо более читаемым и легким в поддержке.

Интеграция Sanity Studio и создание схем данных для блога

Мы переходим к сердцу нашего проекта — Sanity CMS. Вы узнаете, что такое headless CMS, и в чем ее принципиальное отличие от классических систем, таких как WordPress. Мы установим глобальный пакет @sanity/cli, инициализируем новое Sanity Studio и свяжем его с нашим Next.js-приложением через переменные окружения (.env.local).

Практическая часть будет посвящена созданию схем данных (schemas) для наших документов: 'Блог' и 'Автор'. Вы научитесь определять различные типы полей: строки (string), слаг (slug), дату и время (datetime) и изображения (image). Мы также создадим связи между документами, добавив ссылку (reference) на автора в документе блога.

Наполнение данными и работа с API Sanity

В этом разделе мы оживим наш проект. Вы создадите несколько тестовых блогов прямо в Sanity Studio, наполните их контентом, изображениями и укажете авторов. Затем мы настроим клиентскую часть для извлечения этих данных. Вы создадите Sanity Client, который будет использовать GROQ-запросы для получения списка всех блогов и их детальной информации по слагу.

Мы реализуем генерацию статических страниц для каждого блога, используя функции Next.js getStaticProps и getStaticPaths. Это позволит создать высокопроизводительное приложение, где страницы формируются на этапе сборки, что идеально подходит для блогов. Вы увидите, как передавать данные из Sanity в ваши React-компоненты, создавая динамические, но при этом статически сгенерированные страницы.

Мы научимся отображать портативный текст (Portable Text) из Sanity. Это мощный инструмент для создания структурированного текстового контента. Вы познакомитесь с пакетом @sanity/block-content-to-react, который позволит превратить JSON-данные из Sanity в полноценные React-компоненты. Отдельно мы настроим рендеринг кодовых блоков с подсветкой синтаксиса, используя библиотеку highlight.js.

Клиентская загрузка данных и пагинация с использованием SWR

Мы реализуем клиентскую загрузку данных для пагинации, используя хук useSWR. Это позволяет эффективно кэшировать данные и обновлять их без перезагрузки страницы. Вы узнаете, как настроить API-маршруты Next.js для прокси-запросов к Sanity, обходя ограничения CORS.

Создадим функцию-обертку useGetBlogs, которая использует useSWR для получения данных. Это централизованное решение упрощает работу с запросами, предоставляя состояние загрузки и ошибок. Мы также научимся передавать начальные данные (initialData) для мгновенного рендеринга страницы, избегая эффекта "моргания".

Реализация фильтрации и сортировки списка блогов

Мы добавим фильтрацию для переключения между отображением в виде карточек и списка. Вы научитесь управлять состоянием интерфейса с помощью хука useState и создавать компонент фильтрации, который принимает колбэк для изменения вида. Также интегрируем иконки из библиотеки Font Awesome для улучшения UX.

Реализуем сортировку блогов по дате с использованием оператора порядка (order) в GROQ-запросах. Вы узнаете разницу между сортировкой по полю date и встроенным полем _createdAt. Это позволит нам отображать сначала самые новые или самые старые записи, что критично для информационных ресурсов.

Расширенная пагинация и навигация по страницам блога

Наша конечная цель — создать полнофункциональную пагинацию. Вы научитесь динамически загружать порции данных, используя оператор среза (slice) в GROQ. Это позволяет задавать смещение (offset) и ограничивать количество получаемых записей, что критично для производительности при большом количестве постов.

Мы создадим компонент пагинации, который будет управлять параметрами запроса. Вы поймете, как синхронизировать состояние между компонентами, чтобы при клике на кнопку "Следующая" или "Предыдущая" страница обновлялась без перезагрузки. Это обеспечит плавный пользовательский опыт, характерный для современных SPA.

Завершим этот раздел оптимизацией изображений с использованием image-url-builder от Sanity. Вы научитесь применять параметры crop и hotspot для интеллектуального кадрирования и управления позицией изображений в контенте, что значительно улучшит визуальное восприятие вашего блога.

Questions and answers

Какой командой инициализируется новый проект Next.js для создания серверлесс-приложения, такого как блог?

npx create-next-app

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

npm start next

create-react-app next-blog

Какая библиотека используется в курсе для создания стильного и адаптивного пользовательского интерфейса, чтобы ускорить разработку?

React Bootstrap

Выбор пал на React Bootstrap, так как он предоставляет готовые, адаптивные компоненты. Это позволяет сосредоточиться на бизнес-логике приложения, а не на рутинной верстке, что критично для быстрой разработки серверлесс-решений.

Material-UI

Tailwind CSS

Для чего в проекте создается файл jsconfig.json и прописывается baseUrl?

Для настройки абсолютных путей к файлам, чтобы упростить импорты и сделать код более читаемым.

Настройка абсолютных путей избавляет от громоздких конструкций вида ../../../components/Navbar. Вместо этого можно писать components/Navbar, что значительно упрощает навигацию по проекту и его поддержку, особенно когда структура папок становится глубокой.

Для конфигурации Webpack

Для хранения переменных окружения

Какое ключевое отличие headless CMS, такой как Sanity, от классических систем, например WordPress, подчеркивается в курсе?

Headless CMS отделяет контент (бэкенд) от его представления (фронтенда), предоставляя данные через API.

В отличие от монолитных систем, headless CMS, как Sanity, не диктует, как контент должен отображаться. Она предоставляет гибкий API для доступа к данным, что позволяет разработчикам использовать любой стек технологий для фронтенда, например, Next.js, и создавать высокопроизводительные приложения.

Headless CMS имеет встроенные шаблоны для отображения контента.

Headless CMS не поддерживает мультимедийные файлы.

Какой тип данных в Sanity используется для создания уникальных, человекопонятных URL-адресов для записей блога?

slug

Тип slug в Sanity предназначен именно для этой цели. Он автоматически генерирует SEO-дружественные URL на основе заголовка, гарантируя их уникальность и читаемость, что критично для навигации и поисковой оптимизации блога.

string

url

Какая функция Next.js используется для генерации статических страниц блога на этапе сборки, что идеально подходит для контентных сайтов?

getStaticProps

Функция getStaticProps позволяет получить данные из Sanity во время сборки проекта и передать их в компонент страницы. Это обеспечивает генерацию статических страниц, которые загружаются мгновенно, что идеально для блогов и снижает нагрузку на сервер.

getServerSideProps