O que é um CMS?

Um sistema de gerenciamento de conteúdo (CMS) é um software que ajuda os usuários a criar, gerenciar e modificar conteúdo em uma aplicação sem a necessidade de conhecimento técnico. Esse blog é feito utilizando a feature da Sanity.io.

Hoje eu vou te ensinar a como configurar de forma rápida e fácil o Sanity para aplicações React com o framework Nextjs.

Setup do projeto.

Para iniciar você devera rodar os seguintes comandos no seu terminal dentro do projeto Nextjs:

npm i @portabletext/react @sanity/image-url next-sanity

Após a instalação você deve criar uma conta no Sanity.io e, iniciar o seu projeto Sanity com o seguinte comando:

npm create sanity@latest -- --template clean --create-project "<nome do projeto Sanity>" --dataset production

Para as perguntas responda o seguinte:

• Would you like to add configuration folder to this Nextjs project : n
• Project output path: sanity
• Do you want to use Typescript: (Você decide)

Schemas

O último comando deve ter inserido uma pasta chamada Sanity dentro do seu projeto, essa pasta contém tudo que você vai precisar para começar o seu projeto.

Os Schemas são as partes mais importantes, pois eles definem como o seu CMS vai se portar.

Nesse projeto atualmente só existe um Schema que seria o dos posts, ele é o que gera toda a estrutura necessária para criar um post.

Crie esse arquivo e adicione o seguinte Schema:

export default {
name: 'post',
type: 'document',
title: 'Post',
fields: [
{
name: 'title',
type: 'string',
title: 'Title',
},
{
name: 'overview',
type: 'string',
title: 'Overview',
},
{
name: 'slug',
type: 'slug',
title: 'Slug',
options: {
source: 'title',
}
},
{
name: 'content',
type: 'array',
title: 'Content',
of: [
{
type: 'block',
},
{
type: 'image',
fields: [
{
name: 'alt',
type: 'text',
title: 'Alternative text',
}
]
}
]
}
]
}

Caso queira personalizar o seu Schema para portar o seu projeto da melhor forma, consulte a documentação Schema Docs.

Criando o primeiro Post:

Após criar o seu schema vá ao arquivo index.ts dentro da mesma pasta e adicione o seu dentro da array schemaTypes:

Sempre que criar um schema novo devera adicioná-lo dentro desse array.

Para verificar se tudo ocorreu como o esperado acesse o CMD (terminal) e navegue para dentro da pasta sanity, e digite npm run dev isso vai iniciar o seu CMS local. Faça login e crie o seu primeiro post!

Após criar o seu post entre na aba vision e insira a seguinte query *[_type == "post"] :

Listando os Posts no projeto:

Se funcionar tudo está indo como o esperado.

Volte para o código e crie um arquivo para iniciar o client do Sanity:

Para conseguir o id do projeto acesse o Sanity.io faça login e entre no seu projeto, lá você encontrará o seu projectId.

Agora vá ao local que ira fazer fetch dos seus posts e crie sua query:

Essa chamada deve te retornar ao mínimo uma array de objetos com pelo menos esses atributos:

Com isso você deve conseguir listar os posts com um simples map:

Acessar um post:

Dentro do map crie uma tag de Link com o seguinte href (o atributo prefetch já vem como padrão true, foi inserido somente para visualização):

Dentro do diretório crie a sua página com a seguinte estrutura:

O [slug] significa que essa parte da URL será dinâmica.

Dentro desse arquivo novo devemos fazer a query do post em específico do qual estamos a procura:

Para pegar somente um post utilize a seguinte query `*[_type == "post" && slug.current == "${slug}"][0]`

Lembrando que o slug vem do parâmetro via URL, passado na tag link, quando listamos todos os posts.

Para renderizarmos o texto utilizamos o Portable text que foi importado da lib que baixamos lá no início do projeto. Porém, existe um problema com a renderização das imagens adicionadas durante o conteúdo e para resolvermos precisaremos de uma função auxiliar:

Essa função será utilizada em um objeto do qual tratara esse problema das imagens:

Além disso, também é necessário adicionar o host da CDN da sanity nas configurações do nextjs. Dentro do arquivo next.config.js adicione:

const nextConfig = {
images: {
domains: ['cdn.sanity.io'],
}
}

Após isso podemos utilizar o componente importado da lib para nos auxiliar na inserção do html diretamente na página, import { PortableText } from"@portabletext/react";

Com esse setup está tudo pronto para o seu blog funcionar perfeitamente, desejo muita sorte nessa caminhada dos estudos. Qualquer dúvida ou problema estou disponível para contato em @luccaparadeda pelo e-mail luccaparadedaprofessional@gmail.com

Referencias:
https://www.sanity.io/docs

https://www.youtube.com/watch?v=MqmzrQ1MNG8

https://kinsta.com/knowledgebase/content-management-system/