O que é ButterCMS
O ButterCMS é um CMS headless baseado em nuvem que permite que você crie rapidamente aplicativos e sites baseados em CMS. Possui um painel fácil de usar para criar e gerenciar conteúdo. Ele vem com um mecanismo de blog API-first pré-construído que é otimizado para SEO pronto para uso, o que permite que você crie e integre rapidamente um sistema de blog funcional para sites ou aplicativos. Ele se integra perfeitamente a aplicativos novos e existentes e é um dos melhores CMSs headless disponíveis no mercado.
Pré-requisitos do tutorial
Abaixo estão os principais requisitos para seguir junto com este tutorial:
- Conhecimento básico de Próximo.js
- Um editor de código como Sublime ou Visual Studio Code
- Font Icons Impressionante
- A ManteigaCMS conta de teste.
Configurando o ambiente de desenvolvimento
Antes de começar, abra um terminal e navegue até onde deseja criar/armazenar e execute este comando abaixo para executar create-next-app para inicializar o projeto.
$ npx create-next-app my-blog
Em seguida, um prompt será exibido, solicitando que você confirme algumas dependências adicionais. Depois disso, o comando acima criará automaticamente uma estrutura de pastas para o nosso projeto.
A próxima etapa é configurar o ButterCMS em nosso projeto Next.js com o ButterCMS SDK usando o seguinte comando:
$ npm install butter --save
# OR
$ yarn add buttercms
Depois disso, crie uma conta no Butter. Clique aqui link para criar sua conta. Então, para conectar o ButterCMS ao seu aplicativo, você precisará salvar a chave READ API Token como uma variável de ambiente. Crie um arquivo .env na raiz do diretório do seu projeto e adicione seu token da API ButterCMS como uma variável de ambiente:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Você pode obter o seu API DE LEITURA Token do seu painel de configurações.
Configurando o ButterCMS
Depois de criar uma conta ButterCMS, faça login no seu painel no ManteigaCMS local na rede Internet. Um dos recursos mais impressionantes do ButterCMS é que ele vem com um mecanismo de blog pré-construído que se integra facilmente aos seus sites ou aplicativos usando uma API bem estruturada. O Blog Engine possui uma configuração de conteúdo intuitiva projetada para criar postagens de blog, portanto, nenhuma configuração é necessária de sua parte; é uma abordagem plug-and-play. Para configurar um blog, entre no seu painel e clique em Postagens do blog na barra lateral esquerda:
Quando a nova página abrir, clique no botão Nova postagem botão no canto superior direito do painel e adicione as informações da postagem do blog na página que se abre.
O mecanismo de blog ButterCMS vem com um WYSIWYG editor que permite criar facilmente conteúdo para o seu blog. Possui vários recursos que permitem inserir arquivos de mídia como vídeos e imagens, fornece um editor de texto fácil de usar e inclui uma seção para configurar todos os metadados do seu blog.
Na página Edição do blog, insira o título da postagem do blog, adicione conteúdo usando o editor de texto e inclua uma imagem de capa, informações do autor, tags relevantes e dados importantes de SEO.
Na imagem acima, o motor do blog inclui uma seção que permite adicionar categorias e tags, o resumo do blog e uma seção para o SEO do blog. Você pode seguir as etapas acima para adicionar mais postagens de blog. Depois de inserir todos os detalhes do seu blog, clique no botão Publique botão no canto superior direito do seu painel para publicar sua postagem.
Integrando e renderizando dados da API ButterCMS
Não esqueça que para conectar seu ButterCMS ao seu aplicativo, você deve salvar seu API de leitura key como uma variável de ambiente. Depois de terminar de preparar seu conteúdo no ButterCMS, abra seu editor de código e crie uma pasta de componentes no src pasta do seu próximo projeto, então crie um Rodapé componente e traçado componente.
Abra o componente Footer.js e adicione o seguinte código:
const Footer = () => { return ( <> <hr/> <div className="footer-container"> <p> (c) {new Date().getFullYear()} David Adeneye </p> <div className="social_icons"> <a href="https://twitter.com/davidadeneye" aria-label="Twitter" target="_blank" > <i className="fa-brands fa-twitter"></i> </a> <a href="https://github.com/daacode" aria-label="GitHub" target="_blank" > <i className="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/david-adeneye-490027188/" aria-label="LinkedIn" target="_blank" > <i className="fa-brands fa-linkedin"></i> </a> </div> </div> </> ) } export default Footer;
Confira nosso guia prático e prático para aprender Git, com práticas recomendadas, padrões aceitos pelo setor e folha de dicas incluída. Pare de pesquisar comandos Git no Google e realmente aprender -lo!
O código acima adicionará a seção de rodapé da página, que será exibida em todas as páginas do blog.
Neste artigo, usaremos os ícones Font Awesome. Para usar o Font Awesome, você pode instalá-lo em seu projeto ou usar seu CDN. Você pode adicionar o link CDN ao seu _document.js
arquivo como este:
import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return ( <Html lang="en"> <Head> <meta charSet="utf-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossOrigin="anonymous" referrerPolicy="no-referrer" /> </Head> <body> <Main /> <NextScript /> </body> </Html> )
}
Em seguida, crie o componente Layout e adicione o componente Rodapé à sua página agrupando o conteúdo da página dentro dele. Como resultado, o componente Layout aceitará filhos como acessórios, permitindo que você acesse o conteúdo de suas páginas Next.js.
Abra o Layout.js component e adicione o seguinte código abaixo:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Agora você pode integrar o componente Layout em suas páginas agrupando o conteúdo da página nele.
Abra _app.js
arquivo para adicionar o seguinte código:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Em seguida, abra o seu index.js arquivo e adicione o seguinte código:
import React, { useEffect, useState } from "react"; import Link from "next/link"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Blog({ posts }) { console.log(posts); return ( <> <div className="nav-container"> <div className="logo"> <Link href="/"> David Adeneye </Link> </div> <Link href="#" className="blog-menu"> My Blog </Link> <a href="" className="cta-btn">Subscribe</a> </div> <div className="blogpost-container"> {posts.data.map((post, index) => ( <div className="blogpost-box" key={index}> <div className="blogpost-img"> <img src={post.featured_image} alt="Blog" width={300} height={300}/> </div> <div className="blogpost-text"> <span className="blogpost-tag">{post.tags[0].name}</span> <a href={`/posts/${post.slug}`} className="blogpost-title">{post.title}</a> <p>{post.summary}</p> </div> <div className="blogpost-footer"> <div> <img src={post.author.profile_image} alt="avatar" /> <p className="blogpost-name">{ post.author.first_name + " " + post.author.last_name }</p> </div> <Link href={`/posts/${post.slug}`} className="blogpost-link"> Read More </Link> </div> </div> ))} </div> </> );
} export async function getStaticProps() { const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() return { props: { posts, }, } }
O código acima busca os dados da postagem da API ButterCMS e os exibe na página.
Em seguida, precisamos criar uma página de blog individual para a qual cada postagem do blog é vinculada usando rotas dinâmicas. Next.js permite gerar páginas com caminhos que dependem de dados externos. Para criar rotas dinâmicas para as postagens do blog, crie uma pasta chamada posts no interior da src / pages pasta. Dentro da pasta atual, crie um novo arquivo chamado [id].js e adicione o seguinte código:
import React, { useEffect, useState } from "react"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Post({ post }) { console.log(post.data.title) return( <> <div className="blog-container"> <span className="blog-goBack"><a href="/pt/blog">Go back</a></span> <div className="blog-wrap"> <header> <p className="blog-date">Published {post.data.created}</p> <h1>{post.data.title}</h1> <div className="blog-tag"> <div></div> </div> </header> <img src={post.data.featured_image} alt="cover" /> <div className="blog-content" dangerouslySetInnerHTML={{__html: post.data.body }}></div> </div> </div> </> )
} // This function gets called at build time
export async function getStaticPaths() { // Call an external API endpoint to get posts const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.data.map((post) => ({ params: { id: post.slug }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } // This also gets called at build time
export async function getStaticProps({ params }) { // params contains the post `id`. // If the route is like /posts/1, then params.id is 1 const res = await fetch(`https://api.buttercms.com/v2/posts/${params.id}?auth_token=${read_token}`) const post = await res.json() // Pass post data to the page via props return { props: { post } } }
No código acima, cada página será gerada com base no ID dos parâmetros: post.slug.
Nota: Não se esqueça de copiar o arquivo style/global.css do Repositório Github e adicione-o ao seu próprio arquivo de projeto se estiver acompanhando o tutorial.
Em seguida, execute o comando abaixo para iniciar seu aplicativo no modo dev:
A página do seu blog ficará assim:
E cada página de postagem do blog ficará assim:
Você pode obter a base de código para este tutorial aqui em Github.
Conclusão
Neste artigo, mostramos como montar facilmente um site de blog ou integrar um mecanismo de blog em seu site usando o Next.js e o mecanismo de blog ButterCMS. O ButterCMS é um ótimo CMS headless para criar blogs; isso vai lhe poupar a dor de cabeça e o tempo de criar um blog manualmente. Você pode configurar facilmente um blog com qualquer linguagem de programação ou pilha de estrutura de sua escolha com o ButterCMS.
Para saber mais sobre ButterCMS, você pode verificar o ButterCMS documentação.
- Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
- PlatoData.Network Gerativa Vertical Ai. Capacite-se. Acesse aqui.
- PlatoAiStream. Inteligência Web3. Conhecimento Amplificado. Acesse aqui.
- PlatãoESG. Automotivo / EVs, Carbono Tecnologia Limpa, Energia, Ambiente, Solar, Gestão de resíduos. Acesse aqui.
- BlockOffsets. Modernizando a Propriedade de Compensação Ambiental. Acesse aqui.
- Fonte: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :tem
- :é
- :onde
- ][p
- $UP
- 1
- 12
- 20
- 7
- 8
- a
- Sobre
- acima
- ACEITAR
- Acesso
- Conta
- adicionar
- Adicional
- Depois de
- Todos os Produtos
- Permitindo
- permite
- juntamente
- tb
- an
- e
- Anônimo
- qualquer
- api
- app
- Aplicação
- aplicações
- abordagem
- Aplicativos
- SOMOS
- artigo
- AS
- At
- autor
- automaticamente
- disponível
- avatar
- aguardam
- baseado
- bater
- BE
- abaixo
- MELHOR
- Blog
- Posts do Blog
- Blogs
- ostenta
- corpo
- Bootstrap
- fronteira
- construir
- Prédio
- botão
- by
- chamada
- chamado
- CAN
- Pode obter
- Categorias
- verificar
- Crianças
- escolha
- clique
- CloudFlare
- cms
- código
- Codebase
- vem
- componente
- componentes
- conclusão
- Confirmar
- Contato
- cônsul
- contém
- conteúdo
- conteúdo
- Canto
- cobrir
- crio
- Criar
- APF
- Atual
- painel de instrumentos
- dados,
- David
- Padrão
- projetado
- detalhes
- Dev
- Desenvolvimento
- Ecrã
- exibido
- monitores
- don
- feito
- dinâmico
- cada
- facilmente
- fácil de usar
- editor
- ou
- permitir
- permite
- final
- Ponto final
- Motor
- Entrar
- Meio Ambiente
- executar
- existente
- exportar
- externo
- falso
- Funcionalidades
- Envie o
- Arquivos
- Foco
- seguir
- seguinte
- Escolha
- Quadro
- da
- função
- funcional
- gerar
- gerado
- ter
- Git
- GitHub
- Go
- ótimo
- guia
- mãos em
- Ter
- cabeça
- SUA PARTICIPAÇÃO FAZ A DIFERENÇA
- pairar
- Como funciona o dobrador de carta de canal
- Como Negociar
- HTML
- HTTPS
- ícones
- ID
- if
- imagem
- imagens
- importante
- impressionante
- in
- incluir
- incluído
- inclui
- índice
- Individual
- INFORMAÇÕES
- dentro
- instalar
- integrar
- Integra-se
- para dentro
- intuitivo
- IT
- ESTÁ
- Chave
- Conhecimento
- língua
- lançamento
- traçado
- APRENDER
- aprendizagem
- esquerda
- LG
- como
- LINK
- Links
- ll
- log
- logotipo
- olhar
- parece
- a Principal
- Fazendo
- gestão
- manualmente
- significa
- Mídia
- metadados
- minutos
- Moda
- mais
- a maioria
- devo
- my
- Nomeado
- Navegar
- você merece...
- Novo
- Próximo
- Próximo.js
- não
- of
- on
- ONE
- só
- aberto
- abre
- or
- Outros
- A Nossa
- Fora
- próprio
- página
- páginas
- passar
- platão
- Inteligência de Dados Platão
- PlatãoData
- Publique
- POSTAGENS
- Prática
- preparação
- processo
- Programação
- projeto
- fornece
- publicar
- publicado
- rapidamente
- rapidamente
- RE
- Reagir
- Leia
- relevante
- representação
- requeridos
- Requisitos
- resultar
- retorno
- Anel
- raiz
- Rota
- rotas
- Execute
- s
- Salvar
- Sdk
- sem problemas
- Seção
- seo
- conjunto
- instalação
- vários
- Shadow
- folha
- rede de apoio social
- local
- So
- alguns
- palmo
- pilha
- Abuso de pilha
- padrões
- começado
- Passo
- Passos
- Dê um basta
- estrutura
- estudo
- tal
- RESUMO
- .
- terminal
- que
- A
- Eles
- então
- Lá.
- Este
- isto
- Através da
- tempo
- Título
- para
- token
- transição
- julgamento
- tutorial
- usar
- utilização
- via
- VÍDEOS
- caminhou
- queremos
- we
- Site
- sites
- qual
- precisarão
- de
- dentro
- XML
- Vocês
- investimentos
- zefirnet