Создание динамических веб-сайтов с помощью 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 заканчивается.

Спасибо, что уделили нам эти знания. Нажмите кнопку "Нравится" и оставьте комментарий, если это поможет.