ESLint in Next.js-projecten versnellen met Flat Config en GitLab CI

Dit artikel richt zich op GitLab en laat zien hoe je ESLint snel en voorspelbaar maakt in een Next.js + TypeScript-project met het moderne flat-configformaat.

We gaan:

• Globale uitsluitingen gebruiken om omvangrijke of gegenereerde mappen over te slaan.
• Een eenvoudige GitLab CI-taak behouden die npm run lint uitvoert.

Waarom Flat Config?

Het flat-configsysteem is het configuratieformaat van de volgende generatie van ESLint. Het vervangt .eslintrc en is ontworpen om sneller, overzichtelijker en voorspelbaarder te zijn.

Het:

• Werkt rechtstreeks met ES-modules.
• Maakt globale uitsluitingen en gerichte bestandspatronen veel eenvoudiger.
• Integreert soepel met Next.js (next lint ondersteunt het standaard).

Globale uitsluitingen (ignores op het hoogste niveau)

Definieer een ignores-blok op het hoogste niveau zodat ESLint omvangrijke of gegenereerde mappen nooit meeneemt:

// eslint.config.mjs (flat config)

/** @type {import("eslint").Linter.Config[]} */
export default [
  js.configs.recommended,

  {
    // ESLint already ignores ["**/node_modules/", ".git/"] by default, reference: https://eslint.org/docs/latest/use/configure/configuration-files#globally-ignoring-files-with-ignores
    // so you do NOT need to list them here.
    // The folders below are project-specific outputs we also want to ignore globally.
    ignores: ['.next/**', 'out/**', 'dist/**', 'build/**', 'coverage/**'],
  },
  { ... }, // ... other configuration object, inherit global ignores
]

Wat deze mappen zijn (en waarom je ze negeert)

• "node_modules/" → afhankelijkheden (standaard genegeerd door ESLint).
• ".git/" → metagegevens voor versiebeheer (standaard genegeerd door ESLint).
• ".next/" → bouwuitvoer van Next.js (server/client), gegenereerd.
• "out/" → uitvoer van statische export, gegenereerd.
• "dist/", "build/" → gecompileerde of gebundelde uitvoer, gegenereerd.
• "coverage/" → testdekkingsrapporten, gegenereerd.

Door deze uit te sluiten, hoeft ESLint geen irrelevante bestanden te doorlopen, waardoor lintcontroles sneller worden uitgevoerd.

Scripts in package.json

Houd scripts eenvoudig en geschikt voor CI:

{
  "scripts": {
    "lint": "next lint"
  }
}

next lint integreert ESLint automatisch met verstandige Next.js-standaardinstellingen en respecteert je flat config.

GitLab CI: eenvoudig en snel

Hier is een minimale GitLab CI-configuratie die afhankelijkheden installeert en ESLint uitvoert:

# .gitlab-ci.yml

stages:
  - lint

lint:
  stage: lint
  image: node:20-alpine
  script:
    - npm ci
    - npm run lint

Opmerkingen

• npm ci zorgt voor reproduceerbare installaties (op basis van je lockbestand).
• De linttaak blijft lichtgewicht en vertrouwt voor de snelheid volledig op je flat-configbestand van ESLint. Dat is alles: een overzichtelijke, snelle en onderhoudbare ESLint-configuratie voor je Next.js-project op GitLab CI.