Sanity.io: Простое руководство для старта и ускорения разработки с React и TypeScript

Енот держит коробку

Sanity.io современная headless CMS, которая позволяет разработчикам гибко управлять контентом для веб-приложений. Она создана для того, чтобы сделать вашу разработку проще, быстрее и масштабируемее.

Что такое Sanity.io?

Sanity.io — это облачная платформа для управления контентом, которая использует подход headless CMS. Это значит, что Sanity предоставляет мощный API для работы с данными, а интерфейс управления контентом можно настроить под ваши нужды.

Ключевая особенность Sanity — это Studio, редактор контента, написанный на React. Вы можете кастомизировать его под свои требования, добавляя кастомные схемы и плагины.

Преимущества использования Sanity

  1. Гибкость и масштабируемость: Вы можете создавать любые типы контента и использовать их в приложениях, сайтах или мобильных платформах.
  2. Быстрое развертывание: Sanity Studio — это готовый редактор, который можно развернуть за считанные минуты.
  3. Реальное время: Поддержка обновления данных в реальном времени. Это значит, что изменения контента сразу отображаются на сайте или в приложении.
  4. Удобство для разработчиков: Использование мощных инструментов, таких как GROQ (запросы данных), удобные SDK и RESTful API.
  5. Бесплатный тариф: Для небольших проектов достаточно бесплатного плана, который предоставляет все основные функции.

Как начать с Sanity

1. Установка CLI: Для начала работы установите Sanity CLI через

    npm install -g @sanity/cli

    2. Создание нового проекта: Создайте новый проект командой

      sanity init

      Выберите шаблон и настройте проект.

      3. Развертывание Studio: После настройки студии запустите её локально:

      sanity start

      также можете развернуть Studio в облаке командой:

      sanity deploy

      4. Подключение API: Получите ключи API в панели управления Sanity, чтобы интегрировать CMS с вашим фронтендом.

      Быстрый старт проекта с React и TypeScript

      1. Установите зависимости

      В корне вашего проекта React установите следующие зависимости:

      npm install @sanity/client @sanity/image-url

      2. Настройте Sanity клиент

      Создайте файл sanityClient.ts для настройки клиента:

      import sanityClient from '@sanity/client';
      import imageUrlBuilder from '@sanity/image-url';
      
      const client = sanityClient({
        projectId: 'your_project_id', // ID проекта из Sanity
        dataset: 'production',       // Название dataset (обычно production)
        apiVersion: '2023-01-01',    // Версия API
        useCdn: true,                // Использовать CDN для кэширования
      });
      
      const builder = imageUrlBuilder(client);
      
      export const urlFor = (source: any) => builder.image(source);
      export default client;

      3. Получение данных из Sanity

      В компоненте React вы можете использовать клиент для получения данных:

      import React, { useEffect, useState } from 'react';
      import client, { urlFor } from './sanityClient';
      
      type Post = {
        title: string;
        body: string;
        mainImage: any;
      };
      
      const App: React.FC = () => {
        const [posts, setPosts] = useState<Post[]>([]);
      
        useEffect(() => {
          client
            .fetch(`*[_type == "post"]{ title, body, mainImage }`)
            .then((data) => setPosts(data))
            .catch(console.error);
        }, []);
      
        return (
          <div>
            <h1>Список постов</h1>
            {posts.map((post, index) => (
              <div key={index}>
                <h2>{post.title}</h2>
                <p>{post.body}</p>
                {post.mainImage && <img src={urlFor(post.mainImage).url()} alt={post.title} />}
              </div>
            ))}
          </div>
        );
      };
      
      export default App;

      4. Запустите проект

      Теперь запустите приложение:

      Как Sanity ускоряет разработку

      1. Минимальная настройка: Sanity предлагает готовые инструменты для быстрого старта.
      2. Удобное управление контентом: Клиенты или редакторы могут работать с понятным интерфейсом Studio, не обращаясь к разработчикам.
      3. Гибкость интеграции: Вы можете использовать Sanity как основу для любого стека: React, Vue, Angular и т.д.

      Заключение

      Sanity.io — это мощный инструмент для разработчиков, который позволяет быстро создавать гибкие проекты с React и TypeScript. Используя headless CMS, вы получаете полный контроль над данными, упрощаете управление контентом и экономите время на разработке. Попробуйте интегрировать Sanity в свой следующий проект и убедитесь в его преимуществах сами.

      Tasty Coffee

      Консультация

      Оставьте заявку на консультацию

      Отправляя заявку, вы соглашаетесь с политикой конфиденциальности

      О проекте

      Расскажите о проекте, чтобы я мог подготовить предварительное предложение

      Отправляя заявку, вы соглашаетесь с политикой конфиденциальности

      Заявка на тариф

      Оставьте заявку на выбранный тариф и я свижусь с вами в ближайшее время

      Отправляя заявку, вы соглашаетесь с политикой конфиденциальности