Erstellen Sie in 5 Minuten einen Blog mit Next.js, Vercel und einem CMS

Projekt Setup und Konfiguration

Im folgenden Beispiel wird eine Next.js App verwendet, um WordPress oder Webflow zu nutzen und SSG-Inhalte auf allen Seiten zu erstellen (kostenlos). Die Middleware ist optional, aber es wird dringend empfohlen, den Blog über DNS zu trennen.

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

Der Blog-Komponente

Erstellen Sie eine Blog-Komponente, um die Meta-Tags zu rendern, die als Props in `getStaticProps` zurückkehren. Innerhalb der BlogPage-Komponente verwenden wir html-react-parser, um den Inhalt der Blog-Seite zu rendern. Schauen Sie sich das kurze Beispiel unten an:

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
    }
}

Analyse durch node-html-parser

Die getBlogPage Methode verwendet node-html-parser, um alle Links, Stylesheets, Scripts und Meta-Tags in ein JS-Array von Objekten mit den folgenden keys zu extrahieren. Die Idee ist, den Inhalt, den man im Blog nicht benötigt, zu entfernen und ihn mit dem neuen HTML zu parsen. Wenn Ihr Inhalt her Javascript benötigt, um gerendert zu werden, können Sie sich dazu entscheiden, Puppeteer zu verwenden, um den HTML-Inhalt zu erhalten. Sie können das vollständige Beispiel auf Github einsehen.

Middleware-Setup

Mit Next.js-Middleware können Rewrites verwendet werden, um ein Projekt zu verwenden und benutzerdefinierte Header und Footer für die Blog-Seite zu erstellen.

Der config Export ist wichtig, um die Abbildung der restlichen Assets zu kontrollieren, um sicherzustellen, dass SSG korrekt gerendert werden kann. Am besten ist es, die genauen Pfade hinzuzufügen, damit Next.js die Routen während der Kompilierung erstellen kann. Wenn Sie Assets zwischen dem Repository teilen, können Sie den 'public' Ordner aus den Routen ausschließen.

Übersicht

Mit den oben genannten Informationen sollten Sie in der Lage sein, Ihre nächste Blog-Seite vollständig kostenlos mit Vercel und WordPress zu erstellen. Für ein vollständiges Beispiel des Codes schauen Sie sich das Webprojekt an, um ein Beispiel zu sehen. Die aktuelle Implementierung wird genutzt, um unseren Blog auf {{blogURL}} zu betreiben. Hinweis: Ich würde mehr Code direkt posten, wenn WordPress Elementor den Inhalt nicht nach jedem anderen gespeicherten Beitrag automatisch formatieren würde.

Verwandte Beiträge