В этом руководстве мы узнаем, как создать проект Next.js и интегрировать его с GraphCMS.
Введение
Миссия GraphCMS состоит в том, чтобы устранить традиционные болевые точки управления контентом, используя возможности GraphQL, и вывести идею Headless CMS на новый уровень.
GraphCMS предоставляет множество фич из коробки. Вот некоторые из них:
Он также предоставляет множество редакционных и операционных функций. Вот некоторые из них:
- Редактирование богатого контента
- Глобальные маркетинговые кампании
- SEO дружественный
- WYSIWYG
- Встроенная локализация
Демо-версия приложения, которое мы будем создавать, доступна здесь, она размещена на 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.