Criar um Blog em 5 Minutos usando Next.js, Vercel e um CMS

Configuração do Projeto

O exemplo seguinte usará um aplicativo Next.js para utilizar o WordPress ou o Webflow de forma a criar conteúdoSSG em todas as páginas de forma gratuita. O middleware é opcional, mas altamente recomendável para separar o blog via DNS.

# folders
middleware.ts
/pages
/blog
[[...slug]].tsx
/lib
get-blog.ts
/components
/blog
blog-page.tsx

O Componente do Blog

Crie um componente do blog para renderizar as meta tags que retornam como 'props' no getStaticProps. Dentro do componente 'BlogPage', usamos o html-react-parser para renderizar o corpo da página do blog. Dê uma olhada no exemplo abaixo:

import { getBlogPage } from '@app/lib/get-blog'
import { BlogPage } from '@app/components/blog/blog-page'
import type { GetStaticProps } from 'next'

export default function Blog(props:) {
    return <BlogPage {...props} />
}

export const getStaticProps: GetStaticProps = async (context) => {
    const { slug } = context.params ?? {}
    const websiteUrl = Array.isArray(slug) ? slug : []

    let props = {}

    try {
        props = await getBlogPage(websiteUrl.join('/'))
    } catch (e) {
        console.error(e)
    }

    return {
        props,
        revalidate: 3600 * 4, // every 4 hours
    }
}

Análise com node-html-parser

O método getBlogPage usa o 'node-html-parser' para extrair todos os links, estilos, scripts e meta tags numa matriz de objetos JavaScript com as seguintes chaves. A ideia é remover o conteúdo desnecessário do blog e analisá-lo com o novo HTML. Pode-se optar por usar o 'puppeteer' para obter o conteúdo HTML se seu conteúdo exigir JavaScript para renderização. Você pode ver o exemplo completo noGitHub.

Configuração do Middleware

Com os middlewares do Next.js, pode-se usar reescritas para usar um único projeto e modelar cabeçalhos personalizados e rodapés para a página do blog.

A exportação de 'config' é crítica para controlar o fluxo do restante dos ativos a renderizar corretamente no SSG. É melhor adicionar os caminhos exatos para que o Next.js possa construir as rotas durante a compilação. Se compartilhar ativos entre o repositório, pode deixar a pasta pública fora das rotas.

Visão Geral

Com as informações acima, pode-se criar a próxima página do blog totalmente grátis usando a Vercel e o WordPress. Para um exemplo completo do código, confira o projeto web para ver um exemplo. A implementação atual é usada para alimentar nosso blog em {{blogURL}}. Nota: eu postaria mais do código diretamente se o Elementor do WordPress não formatasse automaticamente o conteúdo após cada postagem salva.

Artigos relacionados