Waarom ik Next.js met AI-gestuurde tools koos boven WordPress om mijn website opnieuw op te bouwen

Ik wilde mijn website in één weekend opnieuw ontwerpen en overwoog drie mogelijke tools: Drupal, WordPress en Next.js. Aangezien mijn bestaande site was gebouwd op WordPress, leek dit de beste keuze. Met WordPress hoefde ik geen inhoud te migreren, mijn server was al ingesteld en alles wat ik hoefde te doen was een nieuw thema toepassen.

Echter, ik koos voor Next.js met AI-gestuurde tools om mijn website opnieuw te ontwerpen. Hier is waarom.

Het Redesign Proces

Een website-redesign is meer dan alleen het lanceren van een nieuwe versie. Het proces hangt af van hoe complex het project is en wat de doelen zijn. Sommige redesigns zijn eenvoudige updates, terwijl andere vereisen dat de hele site opnieuw wordt opgebouwd, inclusief de lay-out, het ontwerp en de functies.

Belangrijke onderdelen van een redesign kunnen zijn:

• Het creëren van een nieuw ontwerp of het verbeteren van het bestaande ontwerp
• Het wijzigen van de inhoudsindeling om het gemakkelijker te lezen en te gebruiken te maken
• Het verbeteren van SEO door de site sneller en gemakkelijker vindbaar te maken in zoekmachines
• Het toevoegen van nieuwe functies op basis van gebruikersbehoeften
• Het instellen van redirects zodat oude URL's nog steeds werken en de zoekresultaten niet schaden
• Het toegankelijker en sneller maken van de site voor een betere gebruikerservaring
• Het verplaatsen van inhoud of het herstructureren van gegevens bij het wisselen van platform

Mijn redesignproject zou al deze aspecten moeten aanpakken.

Ontwerpproblemen

Ik wist dat ik ontwerptalent miste. Belangrijker nog, ik geniet niet van het ontwerpproces. Ik zocht naar WordPress-thema's die bij mijn visie pasten, maar kon er geen vinden. Dit betekende dat ik een aangepast thema of page builder-sjablonen zou moeten maken als ik bij WordPress bleef. Hetzelfde probleem deed zich voor bij Drupal, omdat niets aan mijn behoeften voldeed.

Aangezien ik geen ontwerper ben, had ik twee keuzes:

• Gebruik een bestaand thema
• Hulp krijgen

Ik besloot AI-gestuurde tools te gebruiken om mijn ideeën tot leven te brengen. Met slechts een paar beschrijvende prompts creëerde de AI alle UI-componenten die ik nodig had, van navigatiemenu's tot inhoudsindelingen en responsieve ontwerpen.

Vanuit de backend (admin-gebied) ondersteunen Drupal en WordPress nog niet volledig AI-gestuurde tools voor het genereren van aangepaste lay-outs, of ze werken niet optimaal. De beschikbare opties vereisen nog steeds inloggen op de site en herhaaldelijk door meerdere stappen klikken. De Drupal-community boekt echter aanzienlijke vooruitgang op dit gebied, en ik ben van plan daar binnenkort over te schrijven.

Waarom ik Next.js koos

Ik heb WordPress en Drupal uitgesloten omdat ze te veel handmatig werk vereisten. Ondanks mijn Drupal-ervaring zou het opzetten van een site met modules en thema's meer tijd kosten dan ik had. Met slechts een weekend om het project te voltooien, had ik een eenvoudige oplossing nodig zonder onnodige complexiteit.

In plaats daarvan wendde ik me tot Next.js met moderne ontwikkeltools. Cursor en Windsurf, beide IDE's, vereenvoudigen UI-ontwerp door gestructureerde, productieklaar code te genereren uit eenvoudige prompts. Je kunt beschrijven wat je wilt in duidelijke taal, zoals "maak een responsief navigatiemenu met een logo en links", en direct inzetbare code ontvangen. Ik gebruik deze tools al geruime tijd voor persoonlijke projecten en werk.

Een van de sleutels tot efficiënte AI-gestuurde ontwikkeling is het maken van goede prompts. Voor het migratieproces gaf ik de URL's van mijn bestaande WordPress-pagina's op en beschreef ik de gewenste Next.js-inhoudsstructuur. Met deze gedetailleerde prompts genereerde Cursor scripts om de inhoud van mijn oude site te scrapen en te transformeren naar het nieuwe formaat. Dezelfde aanpak hielp bij het creëren van geoptimaliseerde URL's en redirectregels om SEO-rankings te behouden, terwijl de juiste metadata en semantische HTML-structuur op de hele site werd gewaarborgd.

Traditioneel zou je elke regel code handmatig schrijven. Deze IDE's genereren volledige componenten en pagina's via eenvoudige prompts, waarbij ze best practices volgen en de codekwaliteit handhaven. De gegenereerde code kan direct op je server worden geïmplementeerd.

Om het proces te stroomlijnen, gebruikte ik:

• ChatGPT, Gemini en Claude voor brainstormen en het maken van effectieve prompts
• Cursor en Windsurf voor codegeneratie en structuur
• Tailwind CSS voor snelle styling en responsief ontwerp

Tailwind maakte snelle styling mogelijk met consistente, geoptimaliseerde resultaten.

Als bonus bespaart hosting op de gratis tier van Vercel me maandelijks $5 aan hostingkosten en elimineert het uren die ik maandelijks kwijt ben aan WordPress-updates en serveronderhoud.

De Kracht van AI

AI stelt ons in staat dingen te bereiken die we voorheen niet konden, hetzij door gebrek aan expertise of door gebrek aan interesse.

Een andere belangrijke factor in mijn beslissing was snelheid.

Mijn oude WordPress-site scoorde slechts 65 op PageSpeed Insights voor mobiele apparaten, zoals blijkt uit een laatste prestatietest:

In tegenstelling hiermee:

• Next.js is ongelooflijk snel en scoort 100 op PageSpeed voor zowel mobiel als desktop
• Dit bereiken kostte slechts een paar goed opgestelde prompts en slechts een paar minuten

AI Omarmen met Behoud van Controle

AI revolutioneert softwareontwikkeling door de productiviteit drastisch te verhogen. Het stelt ontwikkelaars in staat taken uit te voeren die voorheen volledige teams vereisten of buiten bereik leken vanwege tijdgebrek, gebrek aan expertise of beperkte interesse in bepaalde aspecten van ontwikkeling.

Het is echter cruciaal om te begrijpen dat AI een krachtige assistent is, geen vervanging voor fundamentele kennis en kritisch denken. Hier zijn enkele belangrijke inzichten die ik heb opgedaan:

• Het leren van de fundamenten is belangrijker dan ooit. Je moet begrijpen wat de AI doet en waarom
• Positioneer jezelf als de bestuurder, met AI als je assistent die repetitieve en handmatige taken afhandelt
• Focus je energie op de uitdagende aspecten: het begrijpen van gebruikersbehoeften, systeemontwerp, architectuurbeslissingen en probleemoplossing
• Sterke communicatieve vaardigheden zoals actief luisteren zijn in het AI-tijdperk nog belangrijker geworden

De sleutel is om AI te omarmen en tegelijkertijd de controle over je ontwikkelproces te behouden. Dit betekent dat gegenereerde code grondig moet worden beoordeeld, de implicaties ervan moeten worden begrepen en ervoor moet worden gezorgd dat deze overeenkomt met de vereisten van je project en best practices.

In mijn geval stelde AI me in staat mijn ideeën werkelijkheid te laten worden met een paar goed opgestelde prompts. Het hielp me snel te itereren, te experimenteren en te verfijnen totdat ik een resultaat kreeg dat ik leuk vond, allemaal tegen een veel lagere tijdsinvestering.

Hoewel ik dol ben op Drupal en WordPress, en het geweldige tools zijn voor veel toepassingen die ik zal blijven gebruiken waar ze zinvol zijn, bleek AI-gestuurde ontwikkeling met Next.js de perfecte oplossing voor dit specifieke project.

Technologie Stack

Hier is de complete stack die ik heb gebruikt om deze website te bouwen: