Desenvolvimento de Blog com Zuca Studio em Next.js

Criar um blog moderno e performático vai além de escolher um template pronto. Com o Next.js e um editor como o Zuca Studio, você une a flexibilidade de um framework React com a praticidade de um CMS visual. Neste artigo, exploramos como estruturar seu blog do zero, integrar o editor e publicar conteúdo de forma eficiente.

Por que usar Next.js com um editor headless?

O Next.js oferece renderização estática (SSG) e híbrida (ISR), ideal para blogs que exigem velocidade e SEO. Já um editor headless como o Zuca Studio separa a criação de conteúdo da apresentação, permitindo que redatores publiquem sem tocar no código.

Essa combinação resulta em um blog escalável, fácil de manter e com excelente experiência para o usuário final.

Configurando o projeto Next.js

Comece criando uma nova aplicação Next.js com TypeScript e Tailwind CSS. O comando abaixo inicializa o projeto com as configurações recomendadas.

bashterminal

npx create-next-app@latest meu-blog --typescript --tailwind --eslint
cd meu-blog
npm run dev

Com o servidor rodando em http://localhost:3000, você já tem a base pronta. Agora vamos integrar o editor.

Integrando o Zuca Studio ao seu blog

O Zuca Studio é um editor de conteúdo visual que permite criar posts com blocos, imagens e formatação rica. Ele pode ser usado como um CMS headless, fornecendo uma API para o Next.js consumir os dados.

Para integrar, você precisará de uma chave de API e do endpoint do seu projeto no Zuca Studio. Em seguida, crie funções para buscar os posts durante a build ou em tempo real.

typescriptlib/api.ts

// lib/api.ts
export async function getPosts() {
  const res = await fetch('https://api.zucastudio.com/v1/posts', {
    headers: {
      Authorization: `Bearer ${process.env.ZUCA_API_KEY}`,
    },
  });
  return res.json();
}

export async function getPost(slug: string) {
  const res = await fetch(`https://api.zucastudio.com/v1/posts/${slug}`, {
    headers: {
      Authorization: `Bearer ${process.env.ZUCA_API_KEY}`,
    },
  });
  return res.json();
}

Dica

Armazene a chave de API em variáveis de ambiente (.env.local) para manter suas credenciais seguras.

Criando as páginas do blog

No Next.js, você pode usar o App Router para definir rotas dinâmicas. Crie uma página para listar todos os posts e outra para exibir um post individual.

Página de listagem
Crie o arquivo app/blog/page.tsx que busca todos os posts e os renderiza em uma lista com links.
Página de post
Crie app/blog/[slug]/page.tsx para exibir o conteúdo completo do post, usando generateStaticParams para SSG.
Componente de renderização
Desenvolva um componente que interpreta os blocos do Zuca Studio (parágrafos, imagens, títulos) e os converte em JSX.

tsxapp/blog/[slug]/page.tsx

// app/blog/[slug]/page.tsx
import { getPost, getPosts } from '@/lib/api';

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post: any) => ({ slug: post.slug }));
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

O método generateStaticParams permite que o Next.js gere estaticamente todas as páginas de posts durante a build, resultando em carregamento instantâneo.

Renderizando blocos do editor

O Zuca Studio geralmente fornece o conteúdo em formato JSON estruturado (ex.: blocos com tipo e dados). Você pode criar um componente que mapeia cada tipo de bloco para um componente React.

tsxcomponents/BlockRenderer.tsx

// components/BlockRenderer.tsx
export function BlockRenderer({ blocks }: { blocks: any[] }) {
  return (
    <>
      {blocks.map((block, i) => {
        switch (block.type) {
          case 'paragraph':
            return <p key={i}>{block.text}</p>;
          case 'heading':
            return <h2 key={i}>{block.text}</h2>;
          case 'image':
            return <img key={i} src={block.url} alt={block.alt} />;
          default:
            return null;
        }
      })}
    </>
  );
}

Atenção

Sempre sanitize o HTML gerado pelo editor para evitar ataques XSS, especialmente se o conteúdo vier de fontes externas.

Vantagens e desafios

Vantagens

Fica muito bonito
Fácil de editar
Rap10 para colocar widgets maneiros no conteúdo
Eu gosto

Desafios

Pode dar trabalho
Tem que montar a biblioteca de componentes
Pode exigir experiência

Boas práticas para um blog profissional

Coloque bullet points
Depois mais
Depois mais
E mais
Até acabar

Conclusão

Integrar o Zuca Studio a um projeto Next.js é uma forma poderosa de criar um blog moderno, com conteúdo gerenciável e performance excepcional. Com os passos apresentados, você pode começar hoje mesmo a construir seu blog personalizado.

Pronto para começar?

Crie seu blog com Next.js e Zuca Studio agora mesmo.

Comece já

Assuntos

Next.js
Zuca Studio
Blog
Headless CMS
Editor