Blog.

Wie ich meinen Blog mit Next.js und GraphQL erstellte

Post Header Image
Picture of the author
Leon Frommberger
Posted

Ich habe schon oft mit dem Gedanken gespielt einen eigenen Dev-Blog zu starten, aber keine der "fertigen" Lösungen hat mich wirklich zufrieden gestellt. Wordpress, Joomla, TYPO3 sind alles großartige Projekte, aber ich wollte etwas haben, dass ich bis ins letzte Detail so anpassen kann, wie ich es möchte.

Der Stack

Ich habe mich in der letzten Zeit viel mit Next.js beschäftigt und kleine Projekte gestartet, daher war mir im Grunde schon klar, dass ich den Blog darauf aufbauen werde. Next.js ist ein großartiges React-Framework und ich lehne mich jetzt weit aus dem Fenster, aber ich halte es für eines der Besten. Es bietet SSR (Server-Side Rendering) und SSG (Static Side Generation), was gerade in Punkto SEO einen großen Vorteil bietet und die Seite einfach viel schneller macht.

Für das Hosting des Blogs habe ich mich für Vercel entschieden. Vercel ist das Unternehmen, dass hinter der Entwicklung von Next.js steckt. Außerdem habe ich dort schon andere Apps laufen und bin dort echt zufrieden. Ich habe noch nicht einen Cent dort gelassen und hatte noch nie Probleme.

Für das Styling nutze ich Tailwind CSS. Joshua Comeau hat einen großartigen Beitrag geschrieben, warum das ganze keine gute Idee ist, ich halte das Framework jedoch für großartig, gerade wenn es um das schnelle entwickeln von Web-Apps geht. Ich nutze es für viele Projekte und bei Elementen, die mir nicht so gut gefallen, nutze ich die Möglichkeit, gezielt Elemente zu überschreiben.

Die große Frage, die noch offen ist: Welches CMS steckt hinter den Inhalten? Ich arbeite momentan viel mit GraphQL als REST Alternative, daher viel meine Wahl auf GraphCMS. Es bietet eine großartige API und ein fertiges Toolkit, um meine Inhalte zu verwalten.

Damit hätten wir den Tech-Stack geklärt, nun geht es um die Umsetzung.

Die Umsetzung

Ich werde euch nicht im Detail erklären, womit ich so manche Nächte verbracht habe, aber ich werde ich an den groben Unterbau des Blogs heranführen.

Ich begann mit einer leeren Next.js-Installation, in der Tailwind CSS bereits integriert ist.

npx create-next-app -e with-tailwindcss my-great-blog

Für das abgreifen der API nutze ich graphql-request und für das Rendern der Blog-Posts, die rich-text-react-renderer Component, welche direkt von GraphCMS bereitgestellt wird. Das schöne an dieser Component ist die Möglichkeit, alle Elemente so zu verändern wie man möchte.

<RichText
    content={content}
    renderers={{
        h2: ({ children }) => (
            <h2 className="text-3xl mb-3">{children}</h2>
        ),
    }}
/>

Der Rest war dann nur noch Fleißarbeit: Die API-Abfragen mussten geschrieben und ein passendes Design "entwickelt" werden.

Das Design

Bei dem Design hab ich mich sehr von einer Next.js Demo inspirieren lassen, welche ich aber noch um einge Punkte erweitern werde. Es wird ein Dark-Mode folgen und bei den Code-Snippets muss ich mir noch Gedanken über einen Syntax-Highlighter machen, aber alles zu seiner Zeit.

Im Moment bin ich erstmal froh, dass der Blog so funktioniert wie ich es möchte und ich gerade meinen ersten Beitrag schrieben kann.

To-Dos

Somit kommen wir noch zu den Punkten, die ich gerne noch bearbeiten möchte.

Wie schon erwähnt brauchen meine Code-Blocks noch ein Syntax-Highlighting. Da dieser Blog größtenteils daraus bestehen wird, muss hier eine möglichst schöne und praktikable Lösung daher. Ein offener Punkt, den ich erstmal vernachlässigt habe, sind Kategorien. Irgendwie muss ich meine Posts vernünftig gruppieren, gerade damit man später einfacher findet, was man sucht. Da kommen wir noch zu einem weiteren To-Do: Eine Suche. Am liebsten wäre mir hier eine Volltext-Suche, aber da werden mir viele zustimmen, dass das gar nicht so einfach ist. 😅

Und jetzt?

Insgesamt bin ich sehr zufrieden mit dem Ergebnis. Klar gibt es noch einiges zu tun, aber alleine das ich hier gerade meinen ersten Beitrag schreiben kann, macht mich sehr glücklich.


More Stories

Post Preview Image

Umschaltbarer Dark Mode mit Next.js und Tailwind CSS

In diesem Beitrag zeige ich euch, wie ihr mittels Next.js und Tailwind CSS einen Dark Mode in eurer Web-App implementiert, der sich nach belieben ein- und ausschalten lässt.
Picture of the author
Leon Frommberger