🏗️(front) replace Next.js with Vite and React Router

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [unreleased next]
+
+### Changed
+
+- 🏗️(front) replace Next.js with Vite and React Router
+
 ## [unreleased]
 
 ### Added

README.md

@@ -214,7 +214,7 @@ docs
 
 ### Stack
 
-Conversations is built on top of [Django Rest Framework](https://www.django-rest-framework.org/), [Next.js](https://nextjs.org/), [Vercel‘s AI SDK](https://ai-sdk.dev/) and [Pydantic AI](https://ai.pydantic.dev). We thank the contributors of all these projects for their awesome work!
+Conversations is built on top of [Django Rest Framework](https://www.django-rest-framework.org/), [Vite](https://vite.dev/), [React Router](https://reactrouter.com/), [Vercel‘s AI SDK](https://ai-sdk.dev/) and [Pydantic AI](https://ai.pydantic.dev). We thank the contributors of all these projects for their awesome work!
 
 
 ### Gov ❤️ open source

docs/env.md

@@ -148,13 +148,13 @@ Example:
 docker build -f src/frontend/Dockerfile --target frontend-production --build-arg API_ORIGIN=https://mybackend.example.com conversations-frontend:latest
 ``` 
 
-If you want to build the front-end application using the yarn build command, you can edit the file `src/frontend/apps/conversations/.env` with the `NODE_ENV=production` environment variable and modify it. Alternatively, you can use the listed environment variables with the prefix `NEXT_PUBLIC_`.
+If you want to build the front-end application using the yarn build command, you can edit the file `src/frontend/apps/conversations/.env` and modify it. Alternatively, you can use the listed environment variables with the prefix `VITE_`.
 
 Example:
 
 ```
 cd src/frontend/apps/conversations
-NODE_ENV=production NEXT_PUBLIC_API_ORIGIN=https://mybackend.example.com yarn build
+VITE_API_ORIGIN=https://mybackend.example.com yarn build
 ```
 
 | Option                                          | Description                                                                        | default                                                 |

docs/examples/conversations.values.yaml

@@ -94,7 +94,7 @@ backend:
 frontend:
   envVars:
     PORT: 8080
-    NEXT_PUBLIC_API_ORIGIN: https://conversations.127.0.0.1.nip.io
+    VITE_API_ORIGIN: https://conversations.127.0.0.1.nip.io
 
   replicas: 1
 

docs/system-requirements.md

@@ -8,7 +8,7 @@
 | **Team QA**               | 16 GB | 6    | 30 GB   | Runs integration tests    |
 | **Prod ≤ 100 live users** | 32 GB | 8 +  | 50 GB + | Scale linearly above this |
 
-Memory is the first bottleneck; CPU matters only when Celery or the Next.js build is saturated.
+Memory is the first bottleneck; CPU matters only when Celery or the Vite build is saturated.
 
 > **Note:** Memory consumption varies by operating system. Windows tends to be more memory-hungry than Linux, so consider adding 10-20% extra RAM when running on Windows compared to Linux-based systems.
 
@@ -21,7 +21,7 @@ Memory is the first bottleneck; CPU matters only when Celery or the Next.js buil
 | Redis            | **≤ 256 MB**                  | Empty instance ≈ 3 MB; budget 256 MB to allow small datasets ([stackoverflow.com][3])   |
 | MinIO            | **2 GB (dev) / 32 GB (prod)** | Pre-allocates 1–2 GiB; docs recommend 32 GB per host for ≤ 100 Ti storage ([min.io][4]) |
 | Django API       | **0.8 – 1.5 GB**              | Empirical in-house metrics                                                              |
-| Next.js frontend | **0.5 – 1 GB**                | Dev build chain                                                                         |
+| Vite frontend    | **0.5 – 1 GB**                | Dev build chain                                                                         |
 | Nginx            | **< 100 MB**                  | Static reverse-proxy footprint                                                          |
 
 [1]: https://www.postgresql.org/docs/9.1/runtime-config-resource.html "PostgreSQL: Documentation: 9.1: Resource Consumption"
@@ -42,12 +42,12 @@ Production deployments differ significantly from development environments. The t
 | Redis                     | **256 MB – 2 GB**           | Session storage and caching; scales with active user sessions                            |
 | Object Storage (optional) | **External or self-hosted** | Can use AWS S3, Azure Blob, Google Cloud Storage, or self-hosted MinIO                   |
 | Django API (+ Celery)     | **1 – 3 GB**                | Production workloads with background tasks and higher concurrency                        |
-| Static Files (Nginx)      | **< 200 MB**                | Serves Next.js build output and static assets; no development overhead                   |
+| Static Files (Nginx)      | **< 200 MB**                | Serves Vite build output and static assets; no development overhead                   |
 | Nginx (Load Balancer)     | **< 200 MB**                | Reverse proxy, SSL termination, static file serving                                      |
 
 ### Production Architecture Notes
 
-- **Frontend**: Uses pre-built Next.js static assets served by Nginx (no Node.js runtime needed)
+- **Frontend**: Uses pre-built Vite static assets served by Nginx (no Node.js runtime needed)
 - **Authentication**: Any OIDC-compatible provider can be used instead of self-hosted Keycloak
 - **Object Storage**: External services (S3, Azure Blob) or self-hosted solutions (MinIO) are both viable
 - **Database**: Consider PostgreSQL clustering or managed database services for high availability
@@ -83,7 +83,7 @@ Production deployments differ significantly from development environments. The t
 
 | Port      | Service                    |
 |-----------|----------------------------|
-| 3000      | Next.js                    |
+| 3000      | Vite                       |
 | 8071      | Django                     |
 | 8080      | Keycloak                   |
 | 8083      | Nginx proxy                |
@@ -98,7 +98,7 @@ Production deployments differ significantly from development environments. The t
 
 > **OS considerations:** Windows systems typically require 10-20% more RAM than Linux due to higher OS overhead. Docker Desktop on Windows also uses additional memory compared to native Linux Docker.
 
-**CPU** – budget one vCPU per busy container until Celery or Next.js builds saturate.
+**CPU** – budget one vCPU per busy container until Celery or Vite builds saturate.
 
 **Disk** – SSD; add 10 GB extra for the Docker layer cache.
 

src/backend/core/authentication/views.py

@@ -9,10 +9,9 @@
 from core.authentication.backends import OIDCRoleAccessDenied
 
 # Frontend path shown to users whose account is not allowed to access the app.
-# Keep the trailing slash: the frontend is a Next.js static export with
-# trailingSlash=true, so the canonical URL is /unauthorized/. Redirecting to the
-# bare path makes the frontend nginx issue a directory redirect that leaks its
-# internal listen port (e.g. :8080) and breaks behind the TLS ingress.
+# The frontend is a client-routed single-page app: nginx serves index.html for
+# this path and the router renders the access-denied page. The trailing slash is
+# kept so links minted before the SPA migration keep resolving to the same URL.
 ACCESS_DENIED_PATH = "/unauthorized/"
 
 

src/backend/core/tests/authentication/test_views.py

@@ -12,10 +12,8 @@
 def test_callback_redirects_denied_user_to_unauthorized_page(rf, monkeypatch):
     """A role-denied user is redirected to the frontend access-denied page.
 
-    The target must keep its trailing slash: the frontend is a Next.js static
-    export with trailingSlash=true, so /unauthorized/ is the canonical URL. A
-    bare /unauthorized would make the frontend nginx issue a directory redirect
-    that leaks its internal port and breaks behind the TLS ingress.
+    The target keeps its trailing slash so links minted before the frontend
+    became a single-page app keep resolving to the same URL.
     """
 
     def raise_denied(self, request):  # pylint: disable=unused-argument

src/frontend/Dockerfile

@@ -29,6 +29,11 @@
 
 WORKDIR /home/frontend/apps/conversations
 
+# The container runs as the host user (DOCKER_USER) while node_modules is
+# root-owned from the build above. Vite writes its dependency-optimization cache
+# to node_modules/.vite, so that directory has to stay writable whatever the uid.
+RUN rm -rf node_modules/.vite && chmod a+w node_modules
+
 EXPOSE 3000
 
 CMD [ "yarn", "dev"]
@@ -40,10 +45,10 @@
 WORKDIR /home/frontend/apps/conversations
 
 ARG API_ORIGIN
-ENV NEXT_PUBLIC_API_ORIGIN=${API_ORIGIN}
+ENV VITE_API_ORIGIN=${API_ORIGIN}
 
 ARG PRODUCT_NAME
-ENV NEXT_PUBLIC_PRODUCT_NAME=${PRODUCT_NAME}
+ENV VITE_PRODUCT_NAME=${PRODUCT_NAME}
 
 RUN yarn build
 
@@ -62,7 +67,7 @@
 USER ${DOCKER_USER}
 
 COPY --from=conversations-builder \
-    /home/frontend/apps/conversations/out \
+    /home/frontend/apps/conversations/dist \
     /usr/share/nginx/html
 
 COPY ./src/frontend/apps/conversations/conf/default.conf /etc/nginx/conf.d

src/frontend/apps/conversations/.env

@@ -1,2 +1,2 @@
-NEXT_PUBLIC_API_ORIGIN=
-NEXT_PUBLIC_PRODUCT_NAME=
+VITE_API_ORIGIN=
+VITE_PRODUCT_NAME=

src/frontend/apps/conversations/.env.development

@@ -1,2 +1,2 @@
-NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
-NEXT_PUBLIC_PRODUCT_NAME=
+VITE_API_ORIGIN=http://localhost:8071
+VITE_PRODUCT_NAME=

src/frontend/apps/conversations/.env.test

@@ -1 +1 @@
-NEXT_PUBLIC_API_ORIGIN=http://test.jest
+VITE_API_ORIGIN=http://test.jest

src/frontend/apps/conversations/.gitignore

@@ -9,9 +9,8 @@
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
+# vite
+/dist/
 
 # production
 /build

src/frontend/apps/conversations/.prettierignore

@@ -1,2 +1,2 @@
-next-env.d.ts
+dist
 service-worker.js

src/frontend/apps/conversations/README.md

@@ -1,36 +1,33 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is the Conversations front-end: a [React](https://react.dev/) single-page app built with [Vite](https://vite.dev/) and routed with [React Router](https://reactrouter.com/) in declarative mode.
 
 ## Getting Started
 
-First, run the development server:
+Run the development server:
 
 ```bash
-npm run dev
-# or
 yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+Routes are declared in `src/App.tsx`; their page components live in `src/pages/`.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## Commands
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```bash
+yarn dev      # development server (Vite)
+yarn build    # format/style/type checks, then a production build into dist/
+yarn start    # serve the production build
+yarn lint     # tsc --noEmit + eslint
+yarn test     # Vitest
+```
 
-## Deploy on Vercel
+## Environment variables
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Build-time variables must use the `VITE_` prefix and are read through
+`import.meta.env`. They are set in `.env`, `.env.development` and `.env.test`:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+| Variable            | Description                                                      |
+| ------------------- | ---------------------------------------------------------------- |
+| `VITE_API_ORIGIN`   | Backend origin; falls back to the current origin when left empty |
+| `VITE_PRODUCT_NAME` | Product name shown in the UI                                     |

src/frontend/apps/conversations/conf/default.conf

@@ -10,16 +10,10 @@ server {
 
   root /usr/share/nginx/html;
 
+  # Single-page app: every unknown path falls back to index.html so the
+  # client-side router can handle it. Unknown routes therefore return HTTP 200
+  # and the app renders its own 404 page.
   location / {
-      try_files $uri index.html $uri/ =404;
-  }
-
-  location ~ "^/chat/[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/?$" {
-      try_files $uri /chat/[id]/index.html;
-  }
-
-  error_page 404 /404.html;
-  location = /404.html {
-      internal;
+      try_files $uri $uri/ /index.html;
   }
 }

src/frontend/apps/conversations/eslint.config.mjs

@@ -1,6 +1,5 @@
-import { nextConfig } from 'eslint-config-conversations/next.mjs';
+import { viteConfig } from 'eslint-config-conversations/vite.mjs';
 
-export default nextConfig({
+export default viteConfig({
   tsconfigRootDir: import.meta.dirname,
-  nextRootDir: import.meta.dirname,
 });

src/frontend/apps/conversations/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>L'Assistant</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>