Toen ik begon met Front-End development, gebruikte ik alleen HTML, CSS en JavaScript. Omdat de Back-End-ontwikkelaars in mijn team het destijds moesten verbinden met het CMS, bouwde ik het in PHP-bestanden.
Ik gebruikte dus geen framework zoals Angular of React. Het was gewoon HTML, CSS en een beetje jQuery. Er was ook nog geen CSS-pre-processor die me kon helpen. Nouja, ze bestonden wel, maar dat wist ik nog niet.
Websites bouwen anno 2021
Tegenwoordig hebben we veel tools tot onze beschikking. Frameworks als React en Vue.js geven ons een fantastische toolbox om veel sneller websites te bouwen. Ik gebruik geen PHP meer, omdat ik hiervoor mijn computer moet configureren met Apache en MySQL (of een andere database).
Naar mijn mening hebben we het nu zoveel beter als het gaat om het bouwen van websites. We kunnen data uit allerlei API’s halen en deze uitstekend laten zien op onze website.
Waarom Next.js een slimme keuze is
Ik weet het, er zijn op dit moment zoveel keuzes die je moet maken. Wat ga je gebruiken als platform om je website te bouwen? Welk Framework of static site generator ga je gebruiken?
Er zijn zoveel tools beschikbaar!
Ikzelf zal altijd kiezen voor JavaScript. Het is mijn nummer één taal om te gebruiken in webontwikkeling - zowel Front-End als Back-End.
Daarom is Next.js een goede keuze voor het bouwen van websites. Misschien vraag je je af: “Waarom?”. Ik zal het je vertellen.
- Next.js is bovenop React gebouwd.
- Het heeft een geweldige toolbox met plug-ins.
- Je kunt gegevens aan de serverzijde laden.
- Data pullen wanneer een gebruiker dat wil, is bij Ajax geen probleem.
- React is een van de eenvoudigste bibliotheken om mee te werken als je net JavaScript hebt geleerd.
- Je kunt content laden van Markdown, MDX, JSON, API’s, YAML, GraphQL en nog veel meer data sources en CMS-platforms.
- Het heeft ingebouwde TypeScript-ondersteuning.
- Geweldige ingebouwde beeldoptimalisatie.
- Je site presteert goed en is SEO-vriendelijk.
- Een grote hoeveelheid documentatie en een ‘Getting Started tuturial’
Als je nog niet overtuigd bent, kijk dan eens naar enkele andere static site generators. Er is veel beschikbaar.
Wanneer je voor Next.js zou moeten kiezen
Het is goed om na te denken over wat je wilt bouwen voordat je begint met programmeren. Dit maakt het ontwikkelproces overzichtelijker. Wat het proces ook makkelijker maakt, is het goed weten welke kennis je nodig hebt voordat je je website bouwt met Next.
- Je moet bekend zijn met JavaScript! Als je JavaScript niet kent, is Next geen handige keuze. Leer eerst JavaScript voordat je in een JavaScript-framework of -bibliotheek duikt.
- Het zou leuk zijn als je React ook kent. Next is hierop gebaseerd.
- Er is geen vooraf gedefinieerde manier om jouw styling te schrijven. Je kunt elke pre-processor of elk CSS-framework gebruiken dat je maar wilt.
- Je moet kunnen werken met HTML en CSS. Als je hier niet bekend mee bent, begin dan niet met JavaScript. Het gaat dan sowieso lastig zijn om iets te bouwen met Next.
Hoe bouw je een website met Next.js?
1. Installatie
Als het goed is heb je Node.js en Git al geïnstalleerd. Als je Node nog niet hebt, kan je het beste de installer downloaden.
2. Een project aanmaken
Het aanmaken van een project is niets meer of minder dan het runnen van dit commando in je terminal:
[npx create-next-app]
Vervolgens krijg je de vraag hoe je project heet. Typ de naam van het project, en alle benodigde bestanden worden automatisch gegenereerd.
Ga in je terminal naar de directory van je project. Het script laat je de map zien wanneer alle afhankelijkheden zijn geïnstalleerd.
Als je deze map opent via je favoriete editor, zou het er ongeveer zo uit moeten zien:
3. Voeg inhoud en stijl toe
Als je de map [pages] controleert, ziet je twee JavaScript-bestanden en één map.
[Index.js] is je startpagina. De [_app.js] is de wrapper voor alle paginacomponenten. Hier kan je allerlei soorten globale styling toevoegen.
Run [npm run dev] en open je browser op [localhost: 3000]. Nu zie je je nieuwe Next.js-website.
Als je content wilt ophalen uit Markdown-bestanden, een API of een CMS, raad ik aan om alle starter projects van Next te bekijken.
Nu run je je site lokaal, wat natuurlijk al heel leuk is. Uiteindelijk wil je natuurlijk de wijde wereld in!
4. Maak een GitHub-project
Voordat we het kunnen deployen, moet je een project aanmaken en je code daar veilig hosten.
We willen het gratis hosten op Netlify. Voor Netlify moet je een config file toevoegen om je site in een mum van tijd te laten werken.
Maak een [netlify.toml]-bestand en kopieer onderstaande code erin.
Met deze code vertel je Netlify wat je build-commando is en in welke map het nodig is om die build-versie te bedienen.
[build]
command = “npm run build”
publish = “out”
5. Deploy gratis op Netlify
Log in op Netlify en maak een nieuw project aan op basis van je GitHub-account.
Selecteer de repo waar je website zich bevindt en klik op volgende. De volgende stap zou voor je moeten worden geconfigureerd vanwege het bestand [netlify.toml].
Als alles volgens plan verloopt, zou je moeten zien dat er een deployment bezig is.
Wanneer dit bouw- en deployproces is voltooid, kan je jouw site bezoeken door op ‘voorbeeld van implementatie’ te klikken. Nu is je website tot leven gewekt en kan je het delen met de wereld.
Natuurlijk raad ik aan om aardig wat tijd te besteden aan het toevoegen van inhoud en styling, zodat het een lust voor het oog van je bezoekers is. Ik wens je veel succes! En als we kunnen helpen bij bovenstaande stappen, of bij een ander issue, horen we dat natuurlijk graag.
Heb je vragen over dit onderwerp of zou je Raymon willen inhuren voor een vergelijkbare opdracht?
Lees ook onze andere berichten
Heb je een Front-End Developer nodig?