fixup! Feat: Example NextJS app with app router #DS-1393

examples/spirit-next-app-router/next.config.mjs

@@ -1,4 +1,20 @@
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const pathDir = dirname(fileURLToPath(import.meta.url));
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  transpilePackages: ['@lmc-eu/spirit-web-react'],
+  reactStrictMode: true,
+  sassOptions: {
+    fiber: false,
+    includePaths: [
+      path.join(pathDir, 'node_modules'),
+      path.join(pathDir, 'node_modules/@lmc-eu/spirit-design-tokens/scss'),
+      path.join(pathDir, 'src/styles'),
+    ],
+  },
+};
 
 export default nextConfig;

examples/spirit-next-app-router/package.json

@@ -9,7 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "14.2.5",
+    "@lmc-eu/spirit-design-tokens": "2.0.3",
+    "@lmc-eu/spirit-web": "2.3.0",
+    "@lmc-eu/spirit-web-react": "^2.3.0",
+    "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18"
   },

examples/spirit-next-app-router/src/app/globals.scss

@@ -0,0 +1 @@
+@import '@lmc-eu/spirit-web/scss';

examples/spirit-next-app-router/src/app/page.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import { Heading, Divider } from '@lmc-eu/spirit-web-react/src';
+import './globals.scss';
 
 const Home = () => {
   return (
-    <>
-      <Heading elementType="h2" size="large">
-        App-router-demo
-      </Heading>
-      <Divider />
-    </>
+    <Heading elementType="h2" size="large">
+      Spirit App Router
+    </Heading>
   );
 };