Gerenciamento de conteúdo em Next.js com Sanity CMS

Next.js é uma estrutura React que visa estender os recursos do React com recursos integrados como roteamento, suporte a TypeScript e renderização estática e de servidor híbrida para sites e aplicativos.

Embora o conteúdo de um aplicativo Next.js possa ser codificado, lido de um arquivo JSON ou consumido de um banco de dados, o fornecimento de conteúdo de um sistema de gerenciamento de conteúdo (CMS) como o Sanity CMS pode fornecer uma autoria mais flexível para os desenvolvedores.

Nesta postagem, daremos uma olhada em como o uso de Next.js e Sanity CMS, um CMS headless, pode fornecer melhor gerenciamento de conteúdo em um aplicativo da web ou site com tecnologia Jamstack.

O que é Sanity CMS?

Sanity CMS é um CMS sem cabeça, que é uma autoria de conteúdo sistema backend desacoplado da camada de apresentação ou cliente. Ele expõe o conteúdo armazenado como dados em uma API para consumo em diferentes plataformas, como sites, aplicativos móveis e a Internet das Coisas, e é uma grande divergência do CMS tradicional, como o WordPress.

O Sanity CMS tem uma abordagem estruturada para a criação de conteúdo, fornecendo um número conciso de recursos para gerenciar imagens por meio de seu pipeline de imagens , texto por meio de Texto portátil e design. Ele também oferece o Sanity Studio , um editor totalmente funcional, personalizável e extensível criado com React.

Benefícios de um CMS sem cabeça

O CMS sem cabeça incorpora devidamente a abordagem dissociada da arquitetura Jamstack com benefícios como os seguintes:

Segurança

Como o sistema de back-end é separado da camada de apresentação, há uma área menor exposta a ameaças de segurança.

Reutilização de dados

O conteúdo sem cabeçalho é exposto como dados em uma API e, portanto, é independente de plataforma.

Conteúdo estruturado

Modelagem de conteúdo é o cerne do CMS sem cabeça e exige que as descrições do conteúdo sejam um cidadão de primeira classe, o que significa eles podem ser estruturados para as necessidades específicas de qualquer aplicativo.

Edição mais fácil

A separação entre conteúdo e código torna mais fácil para os editores de conteúdo se concentrarem na edição de conteúdo e os desenvolvedores se concentrarem no código.

Experiência do desenvolvedor

No ecossistema CMS sem cabeça, conhecido como cabeça, é onde o conteúdo é consumido na cabeça. É irrelevante para o corpo, onde o conteúdo é criado e armazenado, e pode ser selecionado a critério do desenvolvedor.

Tempos de compilação aprimorados

Sabe-se que os sites Jamstack sofrem com longos tempos de construção quando contêm uma quantidade consideravelmente grande de conteúdo. Embora existam soluções como Regeneração estática incremental (ISR) , compilações incrementais e Renderização persistente distribuída (DPR) , que separa o conteúdo do cabeçote resolve o problema de longo tempo de construção dentro do CMS sem cabeçalho.

Gerenciando conteúdo com Sanity CMS

Para ilustrar o uso de Next.js com Sanity CMS no Jamstack arquitetura, construiremos uma página de destino simples para entender o processo básico de gerenciamento de conteúdo do Sanity, incluindo trabalhar com sua interface de linha de comando (CLI) e manipular seus esquemas, dentro do Next.js.

Siga este commit que inclui estilo e conteúdo da página de destino padrão que é codificado. Nosso produto final será semelhante à imagem abaixo:

O método para a nossa loucura será:

1. Crie e publique conteúdo no Sanity Studio
2. Busque o conteúdo headless como dados em nosso aplicativo Next.js para conteúdo dinâmico

Crie e execute um aplicativo Next.js

Primeiro, crie um aplicativo Next.js com seu conteúdo codificado.

Comece criando um aplicativo Next.js com create-next-app e execute este comando:

 yarn create next-app client

Em seguida, execute o aplicativo Next.js com o seguinte comando:

cliente de cd

yarn dev

Visite o aplicativo Next.js em http://localhost: 3000 .

Agora que criamos com sucesso um aplicativo Next.js com conteúdo codificado, é hora de criar e executar um projeto no Sanity Studio.

Crie e execute um projeto Sanity Studio

Antes de prosseguir para a próxima etapa, certifique-se de ter uma conta Sanity ou crie uma se não tiver.

Em seguida, instale o Sanity CLI globalmente com o seguinte comando:

 yarn add @ sanity/cli--global

Isso instalará as ferramentas necessárias para trabalhar com o Sanity por meio da CLI.

Após a instalação do Sanity CLI, crie um novo projeto Sanity com o seguinte:

 sanidade inicial

Quando este comando é executado, uma sessão interativa de perguntas e respostas aparece para a criação de um projeto do Sanity Studio. Podemos inserir as seguintes respostas às perguntas correspondentes para este projeto:

• Para Selecione o projeto a ser usado input Criar novo projeto
• Para Seu nome de projeto: input cms
• Para Usar a configuração do conjunto de dados padrão? input Sim
• Para Selecionar modelo de projeto input Limpar projeto sem esquemas predefinidos

Embora tenhamos criado um projeto do Sanity Studio com o Sanity CLI, também podemos usar um dos iniciadores .

Para executar o projeto Sanity, inicie o Sanity Studio na porta 3333 com o seguinte comando:

 cd cms
Sanity start-p 3333

Em seguida, visite o aplicativo Next.js em http://localhost: 3333 e assine em Sanity.io, se solicitado.

Atualmente, temos um esquema vazio e deve ser atualizado.

Editando os esquemas Sanity.io

Esquemas estão no centro da modelagem de conteúdo estruturado em Sanity.io e se referem aos tipos de campo que um documento é composto por, como documento , imagem , objeto ou reference . Esses tipos projetam o conteúdo em Sanity.io com propriedades de metadados como nome , tipo e descrição .

Podemos acompanhar este commit para adicionar os esquemas necessários.

A página de destino precisa de dois esquemas, então criaremos esquemas homepage.js e siteheader.js no diretório schemas no raiz do projeto Sanity.io.

Atualize schemas/homepage.js com o seguinte:

//sanidade/esquemas/homepage.js
export default { nome:'homepage', título:'Página inicial', tipo:'documento', Campos: [ { titulo', título:'Título da página inicial', tipo:'string', descrição:"Qual é o título do herói da página inicial?", }, { nome:'subtítulo', título:'Subtítulo da página inicial', tipo:'string', descrição:"Qual é o subtítulo do herói da página inicial?", }, { nome:'imagem', título:'Imagem da página inicial', tipo:'imagem', }, { nome:'cta', descrição:"Qual é o URL do CTA da página inicial?", título:'CTA', tipo:'slug', opções: { maxLength: 200, }, validação: (regra)=> [Rule.required (). error ('O campo não pode estar vazio')], }, ],
};

Agora criamos um esquema de documento com os campos título , subtítulo , imagem e chamada-para ação ( CTA ). O campo CTA também inclui uma função de validação que garante que o campo não pode ficar vazio .

Podemos ver o padrão de repetição de nome , título e tipo para descrever o conteúdo. O tipo determina que tipo de campo será gerado no editor do Sanity Studio, conforme mostrado abaixo:

Além disso, atualize schemas/siteheader.js :

//schemas/siteheader.js
export default { nome:'cabeçalho do site', título:'Cabeçalho do site', tipo:'documento', Campos: [ { titulo', título:'Título do cabeçalho do site', tipo:'string', }, { nome:'repoURL', título:'Repo URL', tipo:'slug', }, ],
};

A seguir, importe e adicione os esquemas homepage e siteheader à lista de esquemas em schema.js :

//schemas/schema.js
importe createSchema de'part: @ sanity/base/schema-creator';
importar schemaTypes de'all: part: @ sanity/base/schema-type'; //Importar ambos os esquemas
importar página inicial de'./homepage';
importe o cabeçalho do site de'./siteheader'; exportar createSchema padrão ({ //Nós nomeamos nosso esquema nome:'padrão', tipos: schemaTypes.concat ([ /* Anexar à lista de esquemas */ pagina inicial, cabeçalho do site, ]),
});

O projeto Sanity.io deve ser atualizado para refletir os esquemas, nos quais o conteúdo pode ser criado e publicado para os esquemas homepage e siteheader .

Agora que criamos e publicamos conteúdo no Sanity Studio, é hora de consumir os dados em Next.js.

Buscar dados do Sanity CMS em Next.js

É aqui que preenchemos a lacuna entre o conteúdo sem cabeçalho e a camada de apresentação, também conhecida como cabeça e corpo, respectivamente .

Ao buscar o conteúdo criado exposto como dados em uma API de Sanity.io, podemos usá-lo para preencher dinamicamente as seções relevantes na página de destino. Podemos acompanhar este commit .

Ao conectar o aplicativo Next.js por meio do pacote @ sanity/client , podemos buscar os dados publicados em Sanity.io. Vamos instalar @ sanity/client em nosso aplicativo Next.js com o seguinte comando:

 yarn add @ sanity/client

Com este pacote, podemos fazer interface com Sanity.io de Next.js. Mas, primeiro, devemos alimentá-lo com um objeto de propriedades de configuração.

Dentro do projeto Next.js, crie uma nova pasta lib com um novo arquivo sanity.js :

///lib/sanity.js
importar sanityClient de'@ sanity/client'; //Veja a imagem acima sobre como obter seu projectId e adicionar um novo token de API
//Eu adicionei uma chamada"página de destino"
const client=sanityClient ({ projectId:'your-project-id', conjunto de dados:'produção', token:'api-token',//ou deixe em branco para ser um usuário anônimo useCdn: false,//`false` se quiser garantir dados novos ignoreBrowserTokenWarning: true,
}); cliente padrão de exportação;

Esses valores de configuração devem ser armazenados e acessados ​​como variáveis ​​ambientais :

Busque dados Sanity.io em Next.js com GROQ

Agora devemos buscar dados com @ sanity/client por meio de getStaticProps com Graph-Relational Object Queries (GROQ) , Sanity’s linguagem de consulta de código aberto. Podemos acompanhar este commit .

Para continuar, há duas atualizações que devemos fazer em pages/index.js .

Primeiro, importe o objeto client retornado por sanityClient em lib/sanity.js :

 importar cliente de'../lib/sanity';

A seguir, anexe o código abaixo a pages/index.js :

//Crie uma consulta chamada siteHeaderQuery
const siteHeaderQuery=`* \ [_ type=="siteheader"\] [0] { título, repoURL { atual }
} `; //Crie uma consulta chamada homepageQuery
const homepageQuery=`* \ [_ type=="homepage"\] [0] { título, subtítulo, "ctaUrl": cta { atual }, imagem { ... ativo-> }
} `; exportar função assíncrona getStaticProps () { const homepageData=espera client.fetch (homepageQuery); const siteHeaderData=await client.fetch (siteHeaderQuery); dados const={homepageData, siteHeaderData}; Retorna { adereços: { dados, }, revalidar: 1, };
}

Os dados retornados de getStaticProps estarão disponíveis como um prop no componente Home :

 exportar função padrão Home ({data}) { const {siteHeaderData, homepageData}=dados; //Verifique a saída do console do seu navegador console.log ({siteHeaderData, homepageData}); //resto do componente
}

Se tudo correr bem, devemos estar prontos para atualizar dinamicamente o conteúdo da página de destino no componente Home .

A imagem da página de destino foi inicialmente fornecida como um ativo estático do público pasta :

Mas agora ele foi atualizado para buscar dados de Sanity.io:

Avançando com Sanity.io e Next.js

Os tópicos e ideias compartilhados neste artigo são fundamentais para o gerenciamento de conteúdo estruturado com Sanity.io e como ele se integra com Next.js. O repositório completo foi dividido em commits separados ao longo desta postagem, mas você pode revisar o repositório de demonstração final completo no GitHub .

Sanity.io também oferece mais recursos e funcionalidades do que o mostrado nesta postagem, e a documentação oficial é um bom lugar para começar a aprender mais.

A postagem Gerenciamento de conteúdo em Next.js com Sanity CMS apareceu primeiro no LogRocket Blog .