.eslintrc.json

@@ -1,3 +1,10 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "react/no-unescaped-entities": "off",
+    "@next/next/no-page-custom-font": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "prefer-const": "off"
+  }
 }

.github/workflows/nextjs.yml

@@ -0,0 +1,96 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+  
+  # Automatically run on Pull Request
+  pull_request:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Run Tests
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test

jest.config.js

@@ -0,0 +1,20 @@
+/** @type {import('jest').Config} */
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+const customJestConfig = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  },
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

next.config.mjs

@@ -1,4 +1,28 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;
+const nextConfig = {
+    /**
+     * Enable static exports for the App Router.
+     *
+     * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
+     */
+    output: "export",
+  
+    /**
+     * Set base path. This is the slug of your GitHub repository.
+     *
+     * @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
+     */
+    basePath: "/nextjs-github-pages",
+  
+    /**
+     * Disable server-based image optimization. Next.js does not support
+     * dynamic features with static exports.
+     *
+     * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
+     */
+    images: {
+      unoptimized: true,
+    },
+  };
+  
+  export default nextConfig;

package.json

@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "next": "14.2.11",
@@ -15,13 +17,20 @@
     "reactjs-popup": "^2.0.6"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
+    "ts-jest": "^29.2.5",
     "typescript": "^5"
   }
 }

src/app/globals.css

@@ -28,8 +28,8 @@ body {
 
 .container {
   display: flex;
-  justify-content: space-between; /* Optional: sorgt für Abstand */
-  width: 100%; /* Optional: gibt dem Container eine Breite */
+  justify-content: space-between;
+  width: 100%;
 }
 
 .header {
@@ -38,10 +38,9 @@ body {
 }
 
 .header_box {
-  flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
-  margin: 10px 10px; /* Optional: fügt einen horizontalen Abstand hinzu */
-  padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
-  /* font-size: 16px; // Optional: definiert die Schriftgröße */
+  flex: 1;
+  margin: 10px 10px;
+  padding: 10px;
   border-radius: 20px;
   border: 20px solid #202020;
   background-color: #202020;
@@ -72,7 +71,6 @@ body {
 .button_green {
   border: 2px solid #4795475c;
   background-color: #247d245c;
-  /* border-radius: 20px; */
   border-radius: 20px;
   margin: 10px;
   padding: 10px;
@@ -81,7 +79,6 @@ body {
 .button_red {
   border: 2px solid #9547475c;
   background-color: #7d24245c;
-  /* border-radius: 20px 10px; */
   border-radius: 20px;
   margin: 10px;
   padding: 10px;
@@ -90,7 +87,6 @@ body {
 .button_green:hover {
   border: 2px solid #4795475c;
   background-color: #4795475c;
-  /* border-radius: 20px; */
   border-radius: 20px;
   margin: 10px;
   padding: 10px;
@@ -99,7 +95,6 @@ body {
 .button_red:hover {
   border: 2px solid #9547475c;
   background-color: #9547475c;
-  /* border-radius: 20px 10px; */
   border-radius: 20px;
   margin: 10px;
   padding: 10px;
@@ -117,10 +112,9 @@ body {
 }
 
 .body_box {
-  flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
-  padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
+  flex: 1;
+  padding: 10px;
   width: 100%;
-  /* font-size: 16px; // Optional: definiert die Schriftgröße */
   border-radius: 20px;
   border: 2px solid #8d8d8d;
   background-color: #474747;
@@ -137,10 +131,9 @@ body {
 }
 
 .output_box {
-  flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
-  padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
+  flex: 1;
+  padding: 10px;
   width: 100%;
-  /* font-size: 16px; // Optional: definiert die Schriftgröße */
   border-radius: 20px;
   border: 2px solid #8d8d8d;
   background-color: #4dc3435c;