Создание динамических веб-сайтов с помощью Next.js и Sanity CMS
Введение
В этой статье мы рассмотрим, как интегрировать Next.js, популярную платформу React, с Sanity CMS для создания динамичных и насыщенных контентом веб-сайтов. Мы воспользуемся мощью Next.js для рендеринга на стороне сервера (SSR) и объединим его с гибкими возможностями управления контентом Sanity CMS.
Предварительные условия
Прежде чем мы начнем, убедитесь, что у вас выполнены следующие предварительные условия:
- Node.js и npm установлены на вашем компьютере.
- Базовое понимание Next.js и React.
- Учетная запись Sanity CMS и настроенный проект.
Оглавление
В этой статье я расскажу о семи шагах к достижению нашей цели на эту сессию с соответствующими фрагментами кода.
Шаг 1: Настройка проекта Next.js
Шаг 2: Установка клиента Sanity
Шаг 3: Создание схемы работоспособности
Шаг 4. Получение данных из Sanity CMS
Шаг 5: Подключение к Sanity CMS
Шаг 6: Отображение динамического содержимого
Шаг 7: Стилизация компонента
Заключение
Разговоры дешевы, давайте углубимся в кодирование.
Шаг 1. Настройка проекта Next.js
Давайте начнем с создания нового проекта Next.js. Откройте терминал и выполните следующие команды:
npx create-next-app my-sanity-app cd my-sanity-app
Это создаст новый проект Next.js с именем my-sanity-app, а вторая строка кода перенаправит вас во вновь созданный проект my-sanity. -app каталог.
Шаг 2. Установка клиента Sanity
Далее нам нужно установить пакет клиента Sanity для взаимодействия с нашим проектом Sanity CMS. Запустите следующую команду в своем терминале
npm install @sanity/client
Шаг 3. Создание схемы Sanity
Чтобы определить структуру вашего контента, вам необходимо создать схему в Sanity CMS. Войдите в панель управления Sanity CMS и перейдите к своему проекту.
Создайте новый файл с именем schema.js в корне вашего проекта и определите свою схему, используя язык схем Sanity. Например:
// schema.js export default { name: 'post', type: 'document', title: 'Post', fields: [ { name: 'title', type: 'string', title: 'Title', }, { name: 'content', type: 'text', title: 'Content', }, ], };
Эта схема определяет тип почтового документа с полями заголовка и содержимого.
Шаг 4. Получение данных из Sanity CMS.
В проекте Next.js создайте новый файл с именем pages/index.js. Импортируйте клиент Sanity и получите данные из Sanity CMS, используя следующий код:
// pages/index.js import client from '../lib/sanity'; export default function Home({ posts }) { return ( <div> <h1>Latest Posts</h1> <ul> {posts.map((post) => ( <li key={post._id}> <h2>{post.title}</h2> <p>{post.content}</p> </li> ))} </ul> </div> ); } export async function getServerSideProps() { const query = `*[_type == "post"]`; const posts = await client.fetch(query); return { props: { posts, }, }; }
Этот код извлекает все документы post из Sanity CMS и передает их как реквизиты компоненту Home.
Шаг 5. Подключение к Sanity CMS.
В проекте Next.js создайте новый файл с именем lib/sanity.js. Добавьте следующий код, чтобы установить соединение с Sanity CMS:
// lib/sanity.js import sanityClient from '@sanity/client'; const client = sanityClient({ projectId: 'your-project-id', dataset: 'your-dataset', useCdn: true, // Enable this for production }); export default client;
Замените 'your-project-id' и 'your-dataset' вашим фактическим идентификатором проекта Sanity и именем набора данных.
Шаг 6. Отображение динамического содержимого.
Теперь, когда мы получили данные из Sanity CMS, давайте обновим компонент Home для отображения динамического содержимого.
// pages/index.js import client from '../lib/sanity'; export default function Home({ posts }) { return ( <div> <h1>Latest Posts</h1> <ul> {posts.map((post) => ( <li key={post._id}> <h2>{post.title}</h2> <p>{post.content}</p> </li> ))} </ul> </div> ); } export async function getServerSideProps() { const query = `*[_type == "post"]`; const posts = await client.fetch(query); return { props: { posts, }, }; }
Массив posts, полученный в качестве свойств, затем сопоставляется для отображения заголовка и содержимого каждого сообщения.
Шаг 7. Стилизация компонента:
Чтобы посты выглядели визуально привлекательно, вы можете применить некоторые стили CSS. Создайте новый файл с именем styles/Home.module.css и добавьте следующие стили:
/* styles/Home.module.css */ .container { max-width: 600px; margin: 0 auto; padding: 20px; } h1 { font-size: 24px; margin-bottom: 20px; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 20px; } h2 { font-size: 20px; margin-bottom: 10px; } p { font-size: 16px; }
Заключение
Поздравляем! Вы успешно интегрировали Next.js с Sanity CMS для создания динамического веб-сайта. Вы узнали, как получать данные из Sanity CMS с помощью клиента Sanity, отображать содержимое на страницах Next.js и стилизовать компоненты для лучшего взаимодействия с пользователем.
Не стесняйтесь исследовать дополнительные функции Sanity CMS, такие как управление изображениями, редактирование форматированного текста и взаимосвязи контента, чтобы еще больше улучшить свой веб-сайт.
Если вы также хотите, чтобы я написал на какую-либо из этих тем, прокомментируйте это. Так что я могу взяться за дело.
Не забудьте настроить схему и запросы в соответствии с вашими конкретными требованиями и продолжайте создавать потрясающие веб-интерфейсы с помощью Next.js и Sanity CMS!
Ссылки
Документация Next.js: https://nextjs.org/docs
Документация Sanity CMS: https://www.sanity.io/docs
На этом статья об интеграции Next.js с Sanity CMS заканчивается.
Спасибо, что уделили нам эти знания. Нажмите кнопку "Нравится" и оставьте комментарий, если это поможет.