В этом уроке я покажу вам, как создать сайт ресторана, полностью реагирующий на мобильные устройства, используя Next.js и Cosmic Headless CMS. Шаблон Figma можно найти на ui8.net.

Бонусные функции включают развертывание в Vercel и настройку автоматической повторной проверки статического контента с помощью Cosmic Webhooks. Давайте начнем.

Инструменты, которые мы будем использовать

Next.js — рабочая среда React, упрощающая развертывание полнофункционального приложения.
Cosmic — безголовая CMS обеспечивает независимость уровня данных (контента) и дает нам возможность для быстрого управления содержимым веб-сайта.
Sass — стабильный и мощный язык расширений CSS профессионального уровня.

TL;DR

Проверить код
Просмотреть демоверсию
Установить шаблон приложения

Краткое введение

Next.js — это полный пакет для создания невероятно быстрых приложений React. Он удобен для разработчиков и интуитивно понятен в использовании. С выпуском Next.js 12.1 все станет только лучше благодаря новым функциям, включая оптимизацию производительности, промежуточное ПО, поддержку React 18, ISR по требованию, расширенную поддержку SWC и многое другое.
Cosmic — это отличная CMS без управления контентом, которая дает нам возможность полностью управлять и хранить содержимое нашего веб-сайта и мультимедиа, а также быстро обновлять их.

Изучите 4 новых потрясающих функции Next.js и используйте их для создания шаблонов

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

Установите зависимости из папки приложения:

Теперь вы можете запустить приложение в режиме разработки с помощью:

Откройте http://localhost:3000/ в браузере, чтобы увидеть аскетичную домашнюю страницу.

1. Компилятор ржавчины

Одной из ключевых особенностей Next.js 12 является оптимизация производительности. Чтобы повысить производительность, Next.js заменил компилятор Babel расширяемым компилятором Rust и включил его по умолчанию с помощью Next.js 12, компилятор построен поверх — SWC, что означает до Speedy Web Compiler. Он использует TypeScript/JavaScript и генерирует код JavaScript, который можно выполнять в старых браузерах.

SWC в 20 раз быстрее, чем Babel, на одном потоке и в 70 раз быстрее на четырех ядрах.

2. Промежуточное ПО

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

Промежуточное ПО создается /pages/_middleware.ts и будет работать на всех маршрутах в каталоге /pages. Как выглядит файл _middleware.js? Давайте посмотрим на это, например, с помощью нашего шаблона.

3. Инкрементальная статическая регенерация по требованию ISR

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

4. Более быстрая оптимизация изображений и изображения меньшего размера с использованием AVIF

Встроенный API оптимизации изображений был обновлен для поддержки того же шаблона, что и страницы ISR, где изображения обслуживаются устаревшими и повторно проверяются в фоновом режиме. Он также поддерживает изображения AVIF, что позволяет уменьшить размер изображений на 20 процентов по сравнению с WebP.

Эта функция не является обязательной и может быть включена путем изменения изображения. свойство формата в файле next.config.js:

Обзор космических возможностей

  • Настраиваемый API. Создайте схему, модели и контроллеры для API из редактора. Для нашего удобства Cosmic предлагает API REST и GraphQL.
  • Быстрая и безопасная во всем мире система управления контентом и набор инструментов API.
  • Веб-перехватчики. Обратный вызов в любом месте, где вам нужно, чтобы получить желаемую функциональность, готовую к работе с Cosmic API.
  • Включена интеграция Imgix, которая позволяет выполнять мощную обработку изображений для динамических приложений, оптимизированных для кросс-платформенного взаимодействия.

Космическая интеграция

Первый шаг — создание бесплатного космического аккаунта. Выбираем опцию Начать с нуля.

Большой! Теперь давайте организуем наш контент в группы, которые используют одну и ту же модель контента, используя типы объектов. Например, у вас есть разделы с похожими свойствами, такими как название раздела, заголовок, введение и изображение, и вы хотите повторно использовать этот модуль для создания контента для разных разделов.

Создайте тип объекта раздела и добавьте свойства раздела, чтобы определить «метаполя» в «модели контента».

Теперь вы можете создать модель типа объекта для разделов и заполнить контент таким образом.

Аналогичным образом вы можете определить модули и создать тип объекта в соответствии с текущей моделью данных, дизайном схемы.

  • Синглтон за уникальную модель,
  • Несколько многоразовых моделей.

Время получить значения для приложения Next.js

Установите модуль Cosmic в свое приложение Next.js.

Затем перейдите на Cosmic Dashboard Your Bucket > Settings > API Access и найдите слаг Bucket и ключ чтения API.

Потрясающий! Добавьте этот сегмент Bucket и ключ чтения API в свое приложение Next.js .env

Чтобы использовать интерфейс шаблона, вам необходимо клонировать его в GitHub. Откройте терминал, вставьте или введите этот код, чтобы установить все зависимости, и запустите его.

Функция getDataFromBucket делает запрос к bucket, который мы создали ранее в Cosmic Dashboard, и получаем созданный нами контент из Cosmic по типу params.

Давайте отобразим наш контент, интегрируем его с нашим пользовательским интерфейсом и отобразим некоторые элементы на домашней странице. Для этого вам нужно добавить это в index.js.

Функция chooseByType фильтрует данные по типу объекта slug, который мы создали в Cosmic Dashboard.

Поздравляю, вы почти у цели!

Создание страницы пункта меню

В Next.js вы можете создать динамический маршрут. Для создания отдельной страницы пункта меню и динамического маршрута рассмотрим следующую страницу pages/menu/[slug].js:

getServerSideProps функция используется для получения данных от Cosmic при каждом вызове этого маршрута. В pages/api/revalidate.js мы используем функцию unstable_revalidate для повторной проверки страницы по запросу при вызове unstable_revalidate(), и если произошла ошибка, Next.js продолжит показывать последнюю успешно сгенерированную страницу.

После развертывания кодовой базы на Vercel вы можете включить повторную проверку обновлений контента, перейдя на Cosmic Dashboard и выбрав Настройки сегмента › Веб-перехватчики. Событие, которое должно запускаться при редактировании содержимого, — object.edited.published. Конечная точка URL-адреса веб-перехватчика будет выглядеть как ${YOUR_VERCEL_DEPLOYMENT_URL}/api/revalidate.

Это также упрощает обновление вашего сайта при создании или обновлении контента из безголовой CMS.

Пришло время протестировать его, отредактировать свой контент в Cosmic Dashboard и увидеть мгновенное обновление статического контента!

Заключение

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