refac: migrate to nextjs

.github/workflows/frontend-bundle-size-check.yml

@@ -0,0 +1,32 @@
+name: Bundle Analysis
+
+on:
+  pull_request:
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+
+    - name: Install dependencies
+      run: cd app && npm ci
+
+    - name: Run bundle analysis
+      run: cd app && npm run analyze-ci
+
+    - name: Check bundle size
+      run: cd app && npm run check-bundle-size
+
+    - name: Upload bundle analysis
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: bundle-analysis
+        path: app/bundle-analysis.txt

app/.env.example

@@ -0,0 +1,2 @@
+# API URL for the backend server
+NEXT_PUBLIC_API_URL=http://localhost:8080

app/.eslintrc

@@ -0,0 +1,37 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react", "react-hooks", "@next/next"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_" }
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": ["@mui/*/*/*"]
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "next": {
+      "rootDir": "./"
+    }
+  },
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  }
+}

app/.gitignore

@@ -7,9 +7,11 @@
 
 # testing
 /coverage
+bundle-analysis.txt
 
 # production
 /build
+/.next
 
 # misc
 .DS_Store

app/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

app/next.config.mjs

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  distDir: "build",
+  env: {
+    API_URL: process.env.API_URL,
+  },
+  images: {
+    remotePatterns: [{ hostname: "avatars.githubusercontent.com" }],
+  },
+};
+
+export default nextConfig;