chore: add basePath to next.config.js for github pages deployment and…

… use es modules

next.config.js

@@ -1,12 +1,15 @@
-/**
- * @type {import('next').NextConfig}
- */
+/** @type {import('next').NextConfig} */
+
+const isProd = process.env.NODE_ENV === 'production';
+export const basePath = isProd ? '/klimadashboard-ka' : '';
+
 const nextConfig = {
     output: 'export',
-
+    basePath,
+
     images: {
         unoptimized: true
     }
 }
 
-module.exports = nextConfig
+export default nextConfig;

package.json

@@ -2,6 +2,7 @@
   "name": "klimadashboard-ka",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "cross-env NODE_ENV=production next build",

postcss.config.json

@@ -0,0 +1,6 @@
+{
+  "plugins": {
+    "tailwindcss": {},
+    "autoprefixer": {}
+  }
+}

src/app/data.ts

@@ -2,36 +2,22 @@
 
 import useSWR from "swr";
 import {FeinstaubDataEntry, GreenHouseGasEntry, SensorDataEntryJSON} from "@/app/api/models";
+import {basePath} from "../../next.config";
 
-const fetcher = (
-    input: URL | RequestInfo,
-    init?: RequestInit | undefined,
-) => fetch(input, init).then((res) => res.json());
+const fetcher = (input: URL | RequestInfo, init?: RequestInit | undefined) => fetch(input, init).then((res) => res.json());
 
-export function useData1(): {
-    data: { data: SensorDataEntryJSON[] },
-    isLoading: boolean,
-    isError: boolean,
-} {
-    const {data, error, isLoading} = useSWR(`/api/test-data`, fetcher);
+export function useData1(): { data: { data: SensorDataEntryJSON[] }; isLoading: boolean; isError: boolean } {
+    const {data, error, isLoading} = useSWR(`${basePath}/api/test-data`, fetcher);
     return {data, isLoading, isError: error};
 }
 
-export function useData3(): {
-    data: { data: FeinstaubDataEntry[] },
-    isLoading: boolean,
-    isError: boolean,
-} {
-    const {data, error, isLoading} = useSWR(`/api/test-data3`, fetcher);
+export function useData3(): { data: { data: FeinstaubDataEntry[] }; isLoading: boolean; isError: boolean } {
+    const {data, error, isLoading} = useSWR(`${basePath}/api/test-data3`, fetcher);
     return {data, isLoading, isError: error};
 }
 
-export function useData4(): {
-    data: { data: GreenHouseGasEntry[] },
-    isLoading: boolean,
-    isError: boolean,
-} {
-    const {data, error, isLoading} = useSWR(`/api/test-data4`, fetcher);
+export function useData4(): { data: { data: GreenHouseGasEntry[] }; isLoading: boolean; isError: boolean } {
+    const {data, error, isLoading} = useSWR(`${basePath}/api/test-data4`, fetcher);
     return {data, isLoading, isError: error};
 }
 

tailwind.config.ts

@@ -1,20 +1,20 @@
-import type { Config } from "tailwindcss";
+import type {Config} from "tailwindcss";
 
 const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            backgroundImage: {
+                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+                "gradient-conic":
+                    "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+            },
+        },
     },
-  },
-  plugins: [],
+    plugins: [],
 };
 export default config;