nl-design-system · eelcobosklopper · Jul 23, 2026 · Jul 23, 2026 · Jul 23, 2026 · Jul 24, 2026
@@ -10,6 +10,7 @@ build/
 coverage/
 dist/
 tmp/
+.next/
 
 # Ignore archives
 *.7z

@@ -10,7 +10,7 @@ import tseslint from 'typescript-eslint';
 
 export default defineConfig([
   // use the built-in globalIgnores utility to globally ignore files in the project
-  globalIgnores(['**/dist/', '**/build/', '**/coverage/', 'packages/web-components-stencil/loader']),
+  globalIgnores(['**/dist/', '**/build/', '**/coverage/', 'packages/web-components-stencil/loader', '**/.next/']),
   {
     // Use the Perfectionist recommended/natural configuration for all possible JavaScript, TypeScript and JSX files
     name: 'perfectionist/recommended/natural',
@@ -63,9 +63,17 @@ export default defineConfig([
     // Use the @eslint/json recommended configuration to lint JSON files
     name: 'eslint/json/recommended',
     files: ['**/*.json'],
+    ignores: ['**/tsconfig*.json'],
     language: 'json/json',
     ...json.configs.recommended,
   },
+  {
+    // tsconfig files are JSONC, so allow comments
+    name: 'eslint/json/recommended/jsonc',
+    files: ['**/tsconfig*.json'],
+    language: 'json/jsonc',
+    ...json.configs.recommended,
+  },
   {
     name: 'eslint-plugin-react',
     files: ['**/*.{js,cjs,mjs,jsx,ts,tsx}'],

diff --git a/packages/nextjs/app/globals.css b/packages/nextjs/app/globals.css
@@ -0,0 +1,4 @@
+html,
+body {
+  min-block-size: 100%;
+}
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -0,0 +1,20 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import './theme.css';
+
+export const metadata: Metadata = {
+  description: 'A Next.js example project using components from the NL Design System',
+  title: 'NL Design System',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="ma-theme">
-    <html lang="en" className="ma-theme">
+    <html lang="en" dir="ltr" id="top" className="ma-theme">
-    <html lang="en" className="ma-theme">
+    <html lang="en" dir="ltr" id="top" className="ma-theme">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -0,0 +1,21 @@
+import { Button } from '@/components/Button/Button';
+import { Heading } from '@/components/Heading/Heading';
+import { Link } from '@/components/Link/Link';
+import { Paragraph } from '@/components/Paragraph/Paragraph';
+import { SkipLink } from '@/components/SkipLink/SkipLink';
+
+const Home = () => {
+  return (
+    <div>
+      <SkipLink href="#main">Naar de hoofdinhoud</SkipLink>
+      <Heading level={1}>Voorbeeldpagina</Heading>
+      <Paragraph>Lets get started!</Paragraph>
+      <Button purpose="primary">Click me</Button>
+      <Paragraph>
+        <Link href="https://nldesignsystem.nl">NL Design System</Link>
+      </Paragraph>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/packages/nextjs/app/theme.css b/packages/nextjs/app/theme.css
diff --git a/packages/nextjs/components/Button/Button.tsx b/packages/nextjs/components/Button/Button.tsx
@@ -0,0 +1,2 @@
+export { Button } from '@nl-design-system-candidate/button-react';
+import '@nl-design-system-candidate/button-css/button.css';
diff --git a/packages/nextjs/components/Heading/Heading.tsx b/packages/nextjs/components/Heading/Heading.tsx
@@ -0,0 +1,2 @@
+export { Heading } from '@nl-design-system-candidate/heading-react';
+import '@nl-design-system-candidate/heading-css/heading.css';
diff --git a/packages/nextjs/components/Link/Link.tsx b/packages/nextjs/components/Link/Link.tsx
@@ -0,0 +1,2 @@
+export { Link } from '@nl-design-system-candidate/link-react';
+import '@nl-design-system-candidate/link-css/link.css';
diff --git a/packages/nextjs/components/Paragraph/Paragraph.tsx b/packages/nextjs/components/Paragraph/Paragraph.tsx
@@ -0,0 +1,2 @@
+export { Paragraph } from '@nl-design-system-candidate/paragraph-react';
+import '@nl-design-system-candidate/paragraph-css/paragraph.css';
diff --git a/packages/nextjs/components/SkipLink/SkipLink.tsx b/packages/nextjs/components/SkipLink/SkipLink.tsx
@@ -0,0 +1,2 @@
+export { SkipLink } from '@nl-design-system-candidate/skip-link-react';
+import '@nl-design-system-candidate/skip-link-css/skip-link.css';
diff --git a/packages/nextjs/next-env.d.ts b/packages/nextjs/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import './.next/dev/types/routes.d.ts';
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/packages/nextjs/next.config.ts b/packages/nextjs/next.config.ts
@@ -0,0 +1,8 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactCompiler: true,
+};
+
+export default nextConfig;
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@example/nextjs",
+  "author": "Community for NL Design System",
+  "description": "A Next.js example project using components from the NL Design System",
+  "license": "EUPL-1.2",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/example.git",
+    "directory": "packages/nextjs"
+  },
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint:css": "stylelint --allow-empty-input '**/*.{css,scss}'",
+    "lint:js": "eslint",
+    "lint:prettier": "prettier --write .",
+    "lint": "pnpm run --sequential '/^lint:.+$/'",
+    "prepare": "husky",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@nl-design-system-candidate/button-css": "1.1.0",
+    "@nl-design-system-candidate/button-react": "1.1.0",
+    "@nl-design-system-candidate/code-block-css": "1.2.0",
+    "@nl-design-system-candidate/code-block-react": "1.4.0",
+    "@nl-design-system-candidate/code-css": "3.0.0",
+    "@nl-design-system-candidate/code-react": "2.0.0",
+    "@nl-design-system-candidate/color-sample-css": "1.0.5",
+    "@nl-design-system-candidate/color-sample-react": "1.2.2",
+    "@nl-design-system-candidate/data-badge-css": "1.0.5",
+    "@nl-design-system-candidate/data-badge-react": "1.1.7",
+    "@nl-design-system-candidate/heading-css": "1.1.3",
+    "@nl-design-system-candidate/heading-react": "1.1.7",
+    "@nl-design-system-candidate/link-css": "2.0.3",
+    "@nl-design-system-candidate/link-react": "1.1.8",
+    "@nl-design-system-candidate/mark-css": "1.0.5",
+    "@nl-design-system-candidate/mark-react": "1.1.7",
+    "@nl-design-system-candidate/number-badge-css": "1.1.5",
+    "@nl-design-system-candidate/number-badge-react": "1.3.2",
+    "@nl-design-system-candidate/paragraph-css": "2.1.3",
+    "@nl-design-system-candidate/paragraph-react": "2.2.2",
+    "@nl-design-system-candidate/skip-link-css": "1.0.5",
+    "@nl-design-system-candidate/skip-link-react": "1.1.7",
+    "next": "16.2.10",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.29.7",
+    "@nl-design-system/eslint-config": "2.4.0",
+    "@nl-design-system/tsconfig": "1.0.5",
+    "@types/node": "20.19.43",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "babel-plugin-react-compiler": "1.0.0",
+    "typescript": "5.9.3"
+  }
+}
diff --git a/packages/nextjs/tsconfig.json b/packages/nextjs/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "@nl-design-system/tsconfig",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true, // depricated and will stop functioning in v7. Added to overwrite usage in @nl-design-system/tsconfig
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false, // was true, don't think this is needed.
+    "noEmit": true, // gives room for other compiler tools
+    "module": "esnext", // overwrite NodeNext because this is a Frontend project
+    "moduleResolution": "bundler", // overwrite NodeNext because this is a Frontend project
+    "isolatedModules": true,
+    "incremental": true, // store tsbuildinfo files to improve subsequent build speed
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts", "**/*.mts"],
+  "exclude": ["node_modules"]
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ build/ @@
     coverage/
     dist/
     tmp/
+    .next/
     # Ignore archives
     *.7z
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { Button } from '@nl-design-system-candidate/button-react';
eelcobosklopper Jul 27, 2026 Copy link Copy Markdown Author Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Mijn IDE (VScode) doet geen autocomplete omdat Typescript deze exports niet kan indexeren. Als ik de Button als een const exporteer dan pakt hij hem wel op maar Sonar vindt dit weer niet leuk. Hebben jullie hier een oplossing voor? Robbert Jul 30, 2026 Copy link Copy Markdown Member Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Zou je een issue willen aanmaken bij de candidate repo voor matige developer experience met TypeScript autocomplete? Als jij een oplossing hebt hoor ik het graag, ik denk dat dit van jou uit zou kunnen komen. eelcobosklopper Jul 30, 2026 • edited Loading Copy link Copy Markdown Author Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Het is niet een candidate repo issue maar hoe het component hier wordt ge-ïmporteerd en exporteerd. Ik loop tegen hetzelfde aan in de documentatie repo voor bijvoorbeeld `packages/website/src/components/button/button.tsx` waar de button van Utrecht gebruikt wordt. Het is fijn om dit soort import/export component files te hebben zodat je als developer 1 centrale plek hebt voor je Button implementie. Dan is switchen tussen een community button of een candidate button minder gedoe. Ik heb alleen nog geen betere manier gevonden dan dit te doen: `import { Button as ButtonReact } from '@nl-design-system-candidate/button-react'; import '@nl-design-system-candidate/button-css/button.css'; export const Button = ButtonReact;` Maar ik kan niet geloven dat anderen hier geen last van hebben dus ik ben heel benieuwd hoe zij dit hebben opgelost 😅 Ik gebruik VScode, misschien ligt het daar aan?
		import '@nl-design-system-candidate/button-css/button.css';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { Heading } from '@nl-design-system-candidate/heading-react';
		import '@nl-design-system-candidate/heading-css/heading.css';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { Link } from '@nl-design-system-candidate/link-react';
		import '@nl-design-system-candidate/link-css/link.css';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { Paragraph } from '@nl-design-system-candidate/paragraph-react';
		import '@nl-design-system-candidate/paragraph-css/paragraph.css';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { SkipLink } from '@nl-design-system-candidate/skip-link-react';
		import '@nl-design-system-candidate/skip-link-css/skip-link.css';