Sanity.io современная headless CMS, которая позволяет разработчикам гибко управлять контентом для веб-приложений. Она создана для того, чтобы сделать вашу разработку проще, быстрее и масштабируемее.
Что такое Sanity.io?
Sanity.io — это облачная платформа для управления контентом, которая использует подход headless CMS. Это значит, что Sanity предоставляет мощный API для работы с данными, а интерфейс управления контентом можно настроить под ваши нужды.
Ключевая особенность Sanity — это Studio, редактор контента, написанный на React. Вы можете кастомизировать его под свои требования, добавляя кастомные схемы и плагины.
Преимущества использования Sanity
- Гибкость и масштабируемость: Вы можете создавать любые типы контента и использовать их в приложениях, сайтах или мобильных платформах.
- Быстрое развертывание: Sanity Studio — это готовый редактор, который можно развернуть за считанные минуты.
- Реальное время: Поддержка обновления данных в реальном времени. Это значит, что изменения контента сразу отображаются на сайте или в приложении.
- Удобство для разработчиков: Использование мощных инструментов, таких как GROQ (запросы данных), удобные SDK и RESTful API.
- Бесплатный тариф: Для небольших проектов достаточно бесплатного плана, который предоставляет все основные функции.
Как начать с 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 ускоряет разработку
- Минимальная настройка: Sanity предлагает готовые инструменты для быстрого старта.
- Удобное управление контентом: Клиенты или редакторы могут работать с понятным интерфейсом Studio, не обращаясь к разработчикам.
- Гибкость интеграции: Вы можете использовать Sanity как основу для любого стека: React, Vue, Angular и т.д.
Заключение
Sanity.io — это мощный инструмент для разработчиков, который позволяет быстро создавать гибкие проекты с React и TypeScript. Используя headless CMS, вы получаете полный контроль над данными, упрощаете управление контентом и экономите время на разработке. Попробуйте интегрировать Sanity в свой следующий проект и убедитесь в его преимуществах сами.