Implement next.js (Alongside existing frontend)

.env

@@ -17,7 +17,7 @@ PROJECT_NAME="Full Stack FastAPI Project"
 STACK_NAME=full-stack-fastapi-project
 
 # Backend
-BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5173,https://localhost,https://localhost:5173,http://localhost.tiangolo.com"
+BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5173,https://localhost,https://localhost:5173,http://localhost.tiangolo.com,http://localhost:3000"
 SECRET_KEY=changethis
 FIRST_SUPERUSER=admin@example.com
 FIRST_SUPERUSER_PASSWORD=changethis
@@ -43,3 +43,6 @@ SENTRY_DSN=
 # Configure these with your own Docker registry images
 DOCKER_IMAGE_BACKEND=backend
 DOCKER_IMAGE_FRONTEND=frontend
+DOCKER_IMAGE_FRONTEND_NEXTJS=frontend-nextjs
+NEXTAUTH_SECRET=123
+NEXT_PUBLIC_API_URL=http://localhost:8000

.github/labeler.yml

@@ -5,6 +5,7 @@ docs:
         - '**/*.md'
       - all-globs-to-all-files:
         - '!frontend/**'
+        - '!frontend-nextjs/**'
         - '!backend/**'
         - '!.github/**'
         - '!scripts/**'
@@ -22,4 +23,5 @@ internal:
       - all-globs-to-all-files:
         - '!./**/*.md'
         - '!frontend/**'
+        - '!frontend-nextjs/**'        
         - '!backend/**'

.github/workflows/generate-client.yml

@@ -31,9 +31,12 @@ jobs:
       with:
         version: "0.4.15"
         enable-cache: true
-    - name: Install dependencies
+    - name: Install frontend dependencies
       run: npm ci
       working-directory: frontend
+    - name: Install frontend-nextjs dependencies
+      run: npm ci
+      working-directory: frontend-nextjs      
     - run: uv sync
       working-directory: backend
     - run: uv run bash scripts/generate-client.sh
@@ -47,6 +50,7 @@ jobs:
         git config --local user.email "github-actions@github.com"
         git config --local user.name "github-actions"
         git add frontend/src/client
+        git add frontend-nextjs/src/client
     # Same repo PRs
     - name: Push changes
       if: ( github.event_name != 'pull_request' || github.secret_source == 'Actions' )

.gitignore

@@ -3,4 +3,4 @@ node_modules/
 /test-results/
 /playwright-report/
 /blob-report/
-/playwright/.cache/
+/playwright/.cache/

backend/app/core/config.py

@@ -7,7 +7,6 @@
     BeforeValidator,
     EmailStr,
     HttpUrl,
-    PostgresDsn,
     computed_field,
     model_validator,
 )
@@ -59,7 +58,7 @@ def all_cors_origins(self) -> list[str]:
 
     @computed_field  # type: ignore[prop-decorator]
     @property
-    def SQLALCHEMY_DATABASE_URI(self) -> PostgresDsn:
+    def SQLALCHEMY_DATABASE_URI(self) -> MultiHostUrl:
         return MultiHostUrl.build(
             scheme="postgresql+psycopg",
             username=self.POSTGRES_USER,

backend/app/tests/scripts/test_backend_pre_start.py

@@ -24,10 +24,10 @@ def test_init_successful_connection() -> None:
         except Exception:
             connection_successful = False
 
-        assert (
-            connection_successful
-        ), "The database connection should be successful and not raise an exception."
+        assert connection_successful, (
+            "The database connection should be successful and not raise an exception."
+        )
 
-        assert session_mock.exec.called_once_with(
-            select(1)
-        ), "The session should execute a select statement once."
+        assert session_mock.exec.called_once_with(select(1)), (
+            "The session should execute a select statement once."
+        )

backend/app/tests/scripts/test_test_pre_start.py

@@ -24,10 +24,10 @@ def test_init_successful_connection() -> None:
         except Exception:
             connection_successful = False
 
-        assert (
-            connection_successful
-        ), "The database connection should be successful and not raise an exception."
+        assert connection_successful, (
+            "The database connection should be successful and not raise an exception."
+        )
 
-        assert session_mock.exec.called_once_with(
-            select(1)
-        ), "The session should execute a select statement once."
+        assert session_mock.exec.called_once_with(select(1)), (
+            "The session should execute a select statement once."
+        )

docker-compose.override.yml

@@ -102,6 +102,18 @@ services:
         - VITE_API_URL=http://localhost:8000
         - NODE_ENV=development
 
+  frontend-nextjs:
+    profiles: [ "nextjs" ]
+    restart: "no"
+    ports:
+      - "3000:80"
+    build:
+      context: ./frontend-nextjs
+      args:
+        - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL?Variable not set}
+        - NEXTAUTH_SECRET=${NEXTAUTH_SECRET?Variable not set}
+        - NODE_ENV=development
+
   playwright:
     build:
       context: ./frontend

docker-compose.yml

@@ -4,7 +4,7 @@ services:
     image: postgres:17
     restart: always
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
+      test: [ "CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}" ]
       interval: 10s
       retries: 5
       start_period: 30s
@@ -109,7 +109,7 @@ services:
       - SENTRY_DSN=${SENTRY_DSN}
 
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:8000/api/v1/utils/health-check/"]
+      test: [ "CMD", "curl", "-f", "http://localhost:8000/api/v1/utils/health-check/" ]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -162,6 +162,37 @@ services:
 
       # Enable redirection for HTTP and HTTPS
       - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.middlewares=https-redirect
+
+  frontend-nextjs:
+    profiles: [ "nextjs" ]
+    image: '${DOCKER_IMAGE_FRONTEND_NEXTJS?Variable not set}:${TAG-latest}'
+    restart: always
+    networks:
+      - traefik-public
+      - default
+    build:
+      context: ./frontend-nextjs
+      args:
+        - NEXT_PUBLIC_API_URL=https://api.${DOMAIN?Variable not set}
+        - NEXTAUTH_SECRET=${NEXTAUTH_SECRET?Variable not set}
+        - NODE_ENV=production
+    labels:
+      - traefik.enable=true
+      - traefik.docker.network=traefik-public
+      - traefik.constraint-label=traefik-public
+
+      - traefik.http.services.${STACK_NAME?Variable not set}-frontend-nextjs.loadbalancer.server.port=80
+
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-nextjs-http.rule=Host(`dashboard.${DOMAIN?Variable not set}`)
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-nextjs-http.entrypoints=http
+
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-nextjs-https.rule=Host(`dashboard.${DOMAIN?Variable not set}`)
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-nextjs-https.entrypoints=https
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-nextjs-https.tls=true
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-nextjs-https.tls.certresolver=le
+
+      # Enable redirection for HTTP and HTTPS
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-nextjs-http.middlewares=https-redirect
 volumes:
   app-db-data:
 

frontend-nextjs/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts