В этом руководстве мы узнаем, как создать проект Next.js и интегрировать его с GraphCMS.

Введение

Миссия GraphCMS состоит в том, чтобы устранить традиционные болевые точки управления контентом, используя возможности GraphQL, и вывести идею Headless CMS на новый уровень.

GraphCMS предоставляет множество фич из коробки. Вот некоторые из них:

Он также предоставляет множество редакционных и операционных функций. Вот некоторые из них:

  1. Редактирование богатого контента
  2. Глобальные маркетинговые кампании
  3. SEO дружественный
  4. WYSIWYG
  5. Встроенная локализация

Демо-версия приложения, которое мы будем создавать, доступна здесь, она размещена на Vercel, а исходный код доступен на Github.

Начало работы с Next.js

Давайте настроим новый проект Next.js. Для этого нам понадобится следующая команда:

npx create-next-app yarn create next-app

Приведенная выше команда сгенерирует для нас следующие файлы:

Теперь мы можем зайти в созданный для нас каталог Next.js и запустить сервер разработки с помощью следующей команды:

cd nextjs-graphcms && yarn dev

Приведенная выше команда запустит сервер разработки на http://localhost:3000/:

Начало работы с GraphCMS

Во-первых, нам нужно бесплатно создать аккаунт на GraphCMS. Если у вас уже есть учетная запись, вы можете просто войти.

Затем, после входа в систему, мы можем выбрать один из доступных шаблонов проектов. Мы начнем с шаблона Blog Starter.

Далее нам нужно добавить имя нашему Проекту и нажать на кнопку «Создать проект»:

Далее мы можем выбрать план «Личный» и нажать на кнопку «Продолжить»:

Мы можем узнать конечную точку URL нашего проекта из настроек нашего проекта:

Теперь, если мы посетим конечную точку URL и начнем запрашивать данные с помощью GraphQL, мы не получим никаких данных:

Это связано с тем, что мы не обновили разрешения API для получения как черновиков, так и опубликованных данных из GraphCMS:

Теперь, если мы получим GraphQL из нашей конечной точки URL, мы получим правильные данные:

Давайте сохраним конечную точку URL в файле .env в нашем приложении:

GRAPHQL_URL_ENDPOINT =https://api-eu-central-1.graphcms.com/v2/something/master

Установка клиента GraphQL

Мы будем использовать graphql-request, который представляет собой минимальный клиент GraphQL, поддерживающий Node и браузеры для сценариев или простых приложений.

Мы можем установить этот пакет с помощью следующей команды:

Теперь давайте перезапустим наш сервер Next.js, используя yarn dev. Мы можем использовать graphq-request для получения данных из нашей конечной точки URL. Для этого нам нужно изменить наш файл pages/index.js:

Теперь, если мы посетим http://localhost:3000/, мы сможем увидеть следующий экран:

Добавление стилей с помощью TailwindCSS

Мы будем добавлять TailwindCSS с помощью CDN. Однако это не рекомендуемый способ установки TailwindCSS. Мы используем это только для того, чтобы уменьшить размер этого урока. Более подробную информацию о том, как установить TailwindCSS, можно найти в их официальной документации.

Нам нужно создать новый файл _app.js внутри нашего каталога pages и добавить следующий код:

Теперь, если мы перезапустим наш сервер, мы сможем увидеть, что TailwindCSS загружается.

Далее нам нужно изменить наш файл pages/index.js следующим кодом:

Теперь, если мы посетим http://localhost:3000/, мы сможем увидеть следующее:

Мы успешно получили данные из GraphCMS и отобразили их в браузере.

Создание отдельных страниц для каждого поста в блоге

Мы также можем показывать блоги на отдельных маршрутах. Для этого нам нужно изменить наш файл pages/index.js:

Нам также потребуется создать новый файл pages/post/[slug].js со следующим содержимым:

Дополнительную информацию о том, как работает компонент Link, можно найти в официальной Документации Next.js.

Более подробную информацию о том, как добавлять страницы в Next.js, можно найти в официальной Документации Next.js.

Вывод

В этом уроке мы узнали, как интегрировать GraphCMS с Next.js и создать блог-сайт. Демо-версия приложения, которое мы создали в рамках этого руководства, доступна здесь, она размещена на Vercel, а исходный код доступен на Github.

Первоначально опубликовано на https://nirmalyaghosh.com.