BLOG — DEVELOPMENT

Zelf een Next.js website maken: van setup tot live

Next.js is het populairste React-framework voor productie-websites. In deze gids nemen we je stap voor stap mee — van het eerste commando tot een live website.

Bekijk de stappen →06-21544459

Waarom Next.js?

React is geweldig voor interactieve interfaces, maar voor een volledige website mis je een paar dingen: routing, server-side rendering, en optimalisatie. Next.js voegt dat allemaal toe, zonder dat je zelf een build-pipeline hoeft op te tuigen.

Vergeleken met alternatieven als Nuxt (Vue) of Astro, biedt Next.js de grootste community, de meeste integraties, en de beste developer experience voor React-teams. Het wordt onderhouden door Vercel en gebruikt door bedrijven als Nike, TikTok en Notion.

Next.js vs. alternatieven

Feature	Next.js	Nuxt	Astro
Taal	React/TypeScript	Vue/TypeScript	Elke framework
SSR/SSG	Beide	Beide	SSG (SSR opt-in)
Community	Zeer groot	Groot	Groeiend
Leercurve	Gemiddeld	Gemiddeld	Laag

Project opzetten

Het starten van een nieuw Next.js project is één commando:

npx create-next-app@latest mijn-website --typescript --tailwind --app --src-dir

Dit geeft je een werkend project met TypeScript, Tailwind CSS, de App Router, en een nette src/ mapstructuur. De belangrijkste bestanden:

src/
  app/
    layout.tsx    → Root layout (HTML, fonts, metadata)
    page.tsx      → Homepage
    globals.css   → Tailwind imports + custom styles
  public/           → Statische bestanden (images, favicon)

Start de development server met npm run dev en open http://localhost:3000. Je hebt een werkende website.

Pagina's en routing

Next.js gebruikt file-based routing. Elke map in app/ met een page.tsx wordt automatisch een route:

app/
  page.tsx          → /
  about/
    page.tsx      → /about
  blog/
    [slug]/
      page.tsx    → /blog/mijn-artikel (dynamisch)

Dynamische routes gebruik je voor content die uit een database of API komt. De [slug] map vangt elke waarde op — /blog/eerste-post, /blog/tweede-post, enzovoort.

Layouts delen UI tussen pagina's. Een layout.tsx in de root geldt voor alle pagina's. Een layout in app/blog/ geldt alleen voor blogpagina's. Perfect voor een navigatie of sidebar.

Styling en design

Tailwind CSS is de populairste keuze bij Next.js projecten, en om goede reden: het is snel, schaalbaar, en werkt naadloos samen met React-componenten.

Een ander voordeel: Tailwind's utility classes werken goed met server components, omdat je geen runtime CSS-in-JS nodig hebt. Dit is belangrijk voor performance.

export default function Hero() {
  return (
    <section className="py-20 bg-gray-50">
      <div className="max-w-4xl mx-auto px-6">
        <h1 className="text-5xl font-bold text-gray-900">
          Welkom op mijn website
        </h1>
        <p className="mt-4 text-xl text-gray-600">
          Gebouwd met Next.js en Tailwind CSS.
        </p>
      </div>
    </section>
  )
}

Voor iconen gebruiken wij lucide-react — lichtgewicht, tree-shakeable SVG-iconen. Voor animaties is framer-motion de standaard.

Deployment

De snelste manier om live te gaan is Vercel — het platform van de makers van Next.js. Push je code naar GitHub, koppel het aan Vercel, en elke push deployt automatisch.

Wil je meer controle? Je kunt Next.js ook draaien op een eigen server met next start, of als Docker-container. Voor statische sites werkt next export naar elke hosting (Netlify, Cloudflare Pages, etc.).

Deployment via Vercel in 3 stappen

Push je project naar GitHub

Maak een account op vercel.com en importeer je repo

Vercel detecteert Next.js automatisch — klik op Deploy

Vercel biedt gratis hosting voor hobbyprojecten. Voor productie betaal je vanaf $20/maand, inclusief analytics, edge functions en custom domeinen.

Meer lezen

SEO in Next.js

Maak je Next.js site vindbaar in Google.

Lees artikel

Veelgestelde vragen

Is Next.js gratis?

Ja, Next.js is volledig open-source en gratis te gebruiken. Je betaalt alleen voor hosting. Vercel heeft een gratis tier, maar je kunt ook zelf hosten.

Heb ik een backend nodig?

Niet per se. Next.js heeft ingebouwde API Routes en Server Actions waarmee je serverlogica kunt schrijven zonder aparte backend. Voor complexe applicaties kun je het koppelen aan een headless CMS, database, of externe API.

Kan ik Next.js gebruiken voor een webshop?

Absoluut. Combineer Next.js met Shopify (headless), Stripe, of Mollie voor betalingen. Je krijgt een razendsnelle winkel met volledige controle over het design. Wij bouwen dit soort oplossingen regelmatig.

Liever een Next.js website laten bouwen?

Zelf bouwen niet jouw ding? Wij maken professionele Next.js websites voor bedrijven die snel, schaalbaar en goed vindbaar willen zijn.

Bekijk onze webdevelopment-diensten

06-21544459

Feature

Next.js

Nuxt

Astro

Taal

React/TypeScript

Vue/TypeScript

Elke framework

SSR/SSG

Beide

SSG (SSR opt-in)

Community

Zeer groot

Groot

Groeiend

Leercurve

Gemiddeld

Laag

src/ app/ layout.tsx → Root layout (HTML, fonts, metadata) page.tsx → Homepage globals.css → Tailwind imports + custom styles public/ → Statische bestanden (images, favicon)

export default function Hero() { return ( <section className="py-20 bg-gray-50"> <div className="max-w-4xl mx-auto px-6"> <h1 className="text-5xl font-bold text-gray-900"> Welkom op mijn website </h1> <p className="mt-4 text-xl text-gray-600"> Gebouwd met Next.js en Tailwind CSS. </p> </div> </section> ) }