Warum ich Next.js mit KI-gestützten Tools anstelle von WordPress für den Wiederaufbau meiner Website gewählt habe

Ich wollte meine Website an einem Wochenende neu gestalten und habe drei mögliche Tools in Betracht gezogen: Drupal, WordPress und Next.js. Da meine bestehende Website auf WordPress aufgebaut war, schien dies die beste Wahl zu sein. Mit WordPress hätte ich keine Inhalte migrieren müssen, mein Server war bereits eingerichtet und alles, was ich tun musste, war, ein neues Theme anzuwenden.

Ich habe mich jedoch für Next.js mit KI-gestützten Tools entschieden, um meine Website neu zu gestalten. Hier ist der Grund.

Der Redesign-Prozess

Ein Website-Redesign ist mehr als nur die Veröffentlichung einer neuen Version. Der Prozess hängt von der Komplexität des Projekts und den Zielen ab. Einige Redesigns sind einfache Aktualisierungen, während andere den vollständigen Wiederaufbau der Website erfordern, einschließlich Layout, Design und Funktionen.

Zu den wichtigsten Teilen eines Redesigns können gehören:

• Erstellung eines neuen Designs oder Verbesserung des bestehenden Designs
• Änderung des Inhaltslayouts, um es leichter lesbar und nutzbar zu machen
• Verbesserung der SEO durch schnellere und leichter auffindbare Seiten in Suchmaschinen
• Hinzufügen neuer Funktionen basierend auf den Bedürfnissen der Benutzer
• Einrichtung von Weiterleitungen, damit alte URLs weiterhin funktionieren und die Suchrankings nicht beeinträchtigen
• Verbesserung der Zugänglichkeit und Geschwindigkeit der Website für eine bessere Benutzererfahrung
• Verschieben von Inhalten oder Umstrukturieren von Daten bei einem Plattformwechsel

Mein Redesign-Projekt musste all diese Aspekte berücksichtigen.

Design-Herausforderungen

Ich wusste, dass mir Designfähigkeiten fehlten. Noch wichtiger ist, dass mir der Designprozess keinen Spaß macht. Ich suchte nach WordPress-Themes, die meiner Vision entsprachen, konnte aber keine finden. Das bedeutete, dass ich ein benutzerdefiniertes Theme oder Page-Builder-Vorlagen erstellen müsste, wenn ich bei WordPress geblieben wäre. Das gleiche Problem galt für Drupal, da nichts meinen Bedürfnissen entsprach.

Da ich kein Designer bin, hatte ich zwei Möglichkeiten:

• Verwendung eines bestehenden Themes
• Hilfe holen

Ich entschied mich, KI-gestützte Tools zu verwenden, um meine Ideen zum Leben zu erwecken. Mit nur wenigen beschreibenden Prompts erstellte die KI alle UI-Komponenten, die ich benötigte, von Navigationsmenüs bis hin zu Inhaltslayouts und responsiven Designs.

Vom Backend (Admin-Bereich) her unterstützen Drupal und WordPress KI-gestützte Tools zur Generierung benutzerdefinierter Layouts noch nicht vollständig oder funktionieren nicht optimal. Die verfügbaren Optionen erfordern immer noch das Einloggen auf der Website und das wiederholte Durchklicken mehrerer Schritte. Die Drupal-Community macht jedoch erhebliche Fortschritte in diesem Bereich, und ich plane, bald darüber zu schreiben.

Warum ich Next.js gewählt habe

Ich habe WordPress und Drupal ausgeschlossen, da sie zu viel manuelle Arbeit erforderten. Trotz meiner Drupal-Erfahrung hätte die Einrichtung einer Website mit Modulen und Themes mehr Zeit gekostet, als ich hatte. Da ich nur ein Wochenende Zeit hatte, um das Projekt abzuschließen, benötigte ich eine einfache Lösung ohne unnötige Komplexität.

Stattdessen wandte ich mich Next.js mit modernen Entwicklungstools zu. Cursor und Windsurf, beides IDEs, vereinfachen das UI-Design, indem sie strukturierten, produktionsbereiten Code aus einfachen Prompts generieren. Sie können beschreiben, was Sie wollen, in einfacher Sprache, wie z. B. „Erstelle ein responsives Navigationsmenü mit einem Logo und Links“, und erhalten sofort einsatzbereiten Code. Ich verwende diese Tools seit einiger Zeit für persönliche Projekte und bei der Arbeit.

Einer der Schlüssel zur effizienten KI-gestützten Entwicklung ist das Erstellen guter Prompts. Für den Migrationsprozess gab ich die URLs meiner bestehenden WordPress-Seiten an und beschrieb die gewünschte Next.js-Inhaltsstruktur. Mit diesen detaillierten Prompts generierte Cursor Skripte, um den Inhalt von meiner alten Website zu scrapen und in das neue Format zu transformieren. Der gleiche Ansatz half bei der Erstellung optimierter URLs und Weiterleitungsregeln zur Aufrechterhaltung der SEO-Rankings, während gleichzeitig die richtige Metadaten- und semantische HTML-Struktur auf der gesamten Website sichergestellt wurde.

Traditionell würden Sie jede Codezeile manuell schreiben. Diese IDEs generieren ganze Komponenten und Seiten durch einfache Prompts, folgen Best Practices und wahren die Codequalität. Der generierte Code kann sofort auf Ihrem Server bereitgestellt werden.

Um den Prozess zu optimieren, habe ich verwendet:

• ChatGPT, Gemini und Claude zum Brainstorming und Erstellen effektiver Prompts
• Cursor und Windsurf für Code-Generierung und Struktur
• Tailwind CSS für schnelles Styling und responsives Design

Tailwind ermöglichte schnelles Styling mit konsistenten, optimierten Ergebnissen.

Als Bonus spart mir das Hosting auf der kostenlosen Stufe von Vercel monatlich 5 US-Dollar an Hosting-Kosten und eliminiert Stunden, die jeden Monat für WordPress-Updates und Serverwartung aufgewendet werden.

Die Macht der KI

KI ermöglicht es uns, Dinge zu erreichen, die wir zuvor nicht konnten, sei es aufgrund mangelnder Expertise oder mangelnden Interesses.

Ein weiterer wichtiger Faktor bei meiner Entscheidung war die Geschwindigkeit.

Meine alte WordPress-Website erreichte nur 65 Punkte bei PageSpeed Insights für Mobilgeräte, wie ein letzter Leistungstest belegt:

Im Gegensatz dazu:

• Next.js ist unglaublich schnell und erreicht auf beiden Geräten (mobil und Desktop) 100 Punkte bei PageSpeed
• Dies wurde mit nur wenigen gut formulierten Prompts und in nur wenigen Minuten erreicht

KI nutzen und gleichzeitig die Kontrolle behalten

KI revolutioniert die Softwareentwicklung, indem sie die Produktivität dramatisch steigert. Sie ermöglicht es Entwicklern, Aufgaben zu erledigen, die zuvor ganze Teams erforderten oder aufgrund von Zeitbeschränkungen, mangelnder Expertise oder begrenztem Interesse an bestimmten Aspekten der Entwicklung unerreichbar schienen.

Es ist jedoch entscheidend zu verstehen, dass KI ein leistungsstarker Assistent ist, kein Ersatz für grundlegendes Wissen und kritisches Denken. Hier sind einige wichtige Erkenntnisse, die ich gewonnen habe:

• Das Erlernen der Grundlagen ist wichtiger denn je. Sie müssen verstehen, was die KI tut und warum.
• Positionieren Sie sich als Fahrer, mit der KI als Ihrem Assistenten, der sich um repetitive und manuelle Aufgaben kümmert.
• Konzentrieren Sie Ihre Energie auf die herausfordernden Aspekte: Verständnis der Benutzerbedürfnisse, Systemdesign, Architektur entscheidungen und Problemlösung.
• Starke Kommunikationsfähigkeiten wie aktives Zuhören sind im KI-Zeitalter noch wichtiger geworden.

Der Schlüssel liegt darin, KI zu nutzen und gleichzeitig die Kontrolle über Ihren Entwicklungsprozess zu behalten. Das bedeutet, generierten Code gründlich zu überprüfen, seine Auswirkungen zu verstehen und sicherzustellen, dass er mit den Projektanforderungen und Best Practices übereinstimmt.

In meinem Fall ermöglichte mir die KI, meine Ideen mit ein paar gut formulierten Prompts in die Realität umzusetzen. Sie half mir, schnell zu iterieren, zu experimentieren und zu verfeinern, bis ich ein Ergebnis hatte, das mir gefiel, und das alles zu deutlich geringeren Zeitkosten.

Obwohl ich Drupal und WordPress liebe und sie großartige Werkzeuge für viele Anwendungsfälle sind, die ich weiterhin dort einsetzen werde, wo sie sinnvoll sind, erwies sich die KI-gestützte Entwicklung mit Next.js für dieses spezielle Projekt als die perfekte Lösung.

Technologie-Stack

Hier ist der vollständige Stack, den ich zum Erstellen dieser Website verwendet habe: