Crea un blog en 5 minutos usando Next.js, Vercel y un CMS

Configuración y proyecto

El siguiente ejemplo usará una aplicación Next.js para aprovechar WordPress o Webflow para construir contenido SSG en todas las páginas (gratis). El uso de middleware es opcional, pero se recomienda encarecidamente para separar el blog a través de DNS.

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

El componente del blog

Crea un componente de blog para renderizar las etiquetas meta que se devuelven como props en 'getStaticProps'. Dentro del componente 'BlogPage' utilizamos html-react-parser para renderizar el cuerpo de la página del blog. Mira el siguiente ejemplo corto:

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álisis a través de node-html-parser

Configuración de middleware

Con middlewares de Next.js podemos usar rewrites para utilizar un proyecto y plantillas para encabezados y pie de página personalizados para la página del blog.

La exportación de 'config' es crítica para controlar el flujo del resto de los activos para renderizar correctamente SSG. Es mejor agregar las rutas exactas para que Next.js pueda construir las rutas durante la compilación. Si compartes activos entre el repositorio, puedes dejar fuera la carpeta 'public' de las rutas.

Resumen

Con la información anterior deberías poder crear tu próxima página de blog completamente gratis utilizando Vercel y WordPress. Para un ejemplo completo del código, revisa el proyecto web para ver un ejemplo. La implementación actual se utiliza para alimentar nuestro blog en {{blogURL}}. Nota: publicaría más código directamente si WordPress Elementor no formateara automáticamente el contenido después de cada otro post guardado.

Articles associés