Crie um blog em 5 minutos usando Next.js, Vercel e um CMS

Configuração e estrutura do projeto

O exemplo a seguir usará um aplicativo Next.js para aproveitar o WordPress ou o Webflow, a fim de criar conteúdo SSG em todas as páginas gratuitamente. O middleware é opcional, mas altamente recomendado para separar o blog por meio do 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 conteúdo 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 via node-html-parser

O método getBlogPage usa o node-html-parser para extrair todos os links, estilos, scripts e meta tags em um array de objetos JavaScript com as seguintes chaves. A ideia é remover o conteúdo que você não precisa do blog e analisá-lo com o novo HTML. Você pode optar por usar o puppeteer para obter o conteúdo HTML se seu conteúdo exigir JavaScript para ser renderizado. Você pode ver o exemplo completo no GitHub.

Configuração de Middleware

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

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

VisãoGeral

Com as informações acima, você pode criar sua próxima página de blog totalmente gratuita usando Vercel e 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}}. Obs: eu postaria mais do código diretamente se o Elementor do WordPress não formatasse automaticamente o conteúdo após cada postagem salva.

Postagens relacionadas