Migrate Next.js to Vite (#1397)

Vite is much simpler to use than Next.js and we don't need any of the
features Next has that Vite doesn't have.

Benefits of moving to Vite are:
- Much better performance in dev and prod environments
- Much better build times
- Actual support for static exports, no vendor lock-in of having to use
Vercel
- Support for runtime environment variables/loading config from `.env`
files
- No annoying backwards-incompatible changes on major releases of Next
- Better i18n support without having to define getServerSideProps on
every page
- Better bundle optimization
- No opt-out Vercel telemetry 

Also replaces yarn by pnpm and upgrades mantine to 8.3

Author: evroon

.github/workflows/frontend.yml

@@ -19,17 +19,20 @@ jobs:
     steps:
       - uses: actions/checkout@v5
 
-      - name: Setup yarn
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Setup pnpm
         uses: actions/setup-node@v6
         with:
           node-version: '22'
-          cache: 'yarn'
-          cache-dependency-path: frontend/yarn.lock
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
 
       - name: Install npm modules
-        run: yarn
+        run: pnpm i
         working-directory: frontend
 
       - name: Run prettier, lint, jest checks
-        run: yarn test
+        run: pnpm test
         working-directory: frontend

.gitignore

@@ -6,6 +6,7 @@ uv.lock
 .mypy_cache
 .dmypy.json
 .pytest_cache
+.yarn
 
 *.env
 !ci.env

README.md

@@ -50,7 +50,7 @@
 <h1></h1>
 
 Tournament system meant to be easy to use. Bracket is written in async Python (with
-[FastAPI](https://fastapi.tiangolo.com)) and [Next.js](https://nextjs.org/) as frontend using the
+[FastAPI](https://fastapi.tiangolo.com)) and [Vite](https://vite.dev/) as frontend using the
 [Mantine](https://mantine.dev/) library.
 
 It has the following features:
@@ -104,17 +104,17 @@ Read the [configuration docs](https://docs.bracketapp.nl/docs/running-bracket/co
 Bracket's backend is configured using `.env` files (`prod.env` for production, `dev.env` for development etc.).
 But you can also configure Bracket using environment variables directly, for example by specifying them in the `docker-compose.yml`.
 
-The frontend doesn't can be configured by environment variables as well, as well as `.env` files using Next.js' way of loading environment variables.
+The frontend doesn't can be configured by environment variables as well, as well as `.env` files using Vite's way of loading environment variables.
 
 # Running Bracket in production
 Read the [deployment docs](https://docs.bracketapp.nl/docs/deployment) for how to deploy Bracket and run it in production.
 
-Bracket can be run in Docker or by itself (using `uv` and `yarn`).
+Bracket can be run in Docker or by itself (using `uv` and `pnpm`).
 
 # Development setup
 Read the [development docs](https://docs.bracketapp.nl/docs/community/development) for how to run Bracket for development.
 
-Prerequisites are `yarn`, `postgresql` and `uv` to run the frontend, database and backend.
+Prerequisites are `pnpm`, `postgresql` and `uv` to run the frontend, database and backend.
 
 # Translations
 Based on your browser settings, your language should be automatically detected and loaded. For now,

docker-compose.yml

@@ -26,8 +26,8 @@ services:
   bracket-frontend:
     container_name: bracket-frontend
     environment:
-      NEXT_PUBLIC_API_BASE_URL: http://localhost:8400
-      NEXT_PUBLIC_HCAPTCHA_SITE_KEY: 10000000-ffff-ffff-ffff-000000000001
+      VITE_API_BASE_URL: http://localhost:8400
+      VITE_HCAPTCHA_SITE_KEY: 10000000-ffff-ffff-ffff-000000000001
     image: ghcr.io/evroon/bracket-frontend
     ports:
       - 3000:3000

docs/content/community/development.mdx

@@ -56,7 +56,7 @@ two sections.
 
 ```bash
 cd frontend
-yarn run dev
+pnpm run dev
 ```
 
 ### Backend

docs/content/deployment/docker.mdx

@@ -26,8 +26,8 @@ services:
             - "3000:3000"
         environment:
             NODE_ENV: "production"
-            NEXT_PUBLIC_API_BASE_URL: "http://your-site.com:8400"
-            NEXT_PUBLIC_HCAPTCHA_SITE_KEY: "10000000-ffff-ffff-ffff-000000000001"
+            VITE_API_BASE_URL: "http://your-site.com:8400"
+            VITE_HCAPTCHA_SITE_KEY: "10000000-ffff-ffff-ffff-000000000001"
         restart: unless-stopped
 
     bracket-backend:
@@ -63,9 +63,9 @@ Replace the lines that are highlighted in the code block from the previous step.
 
 Replace the following values for `bracket-frontend`:
 
-- `NEXT_PUBLIC_API_BASE_URL`: The address of your backend. The frontend will send
+- `VITE_API_BASE_URL`: The address of your backend. The frontend will send
   requests to this address.
-- `NEXT_PUBLIC_HCAPTCHA_SITE_KEY`: Either leave empty to disable it or
+- `VITE_HCAPTCHA_SITE_KEY`: Either leave empty to disable it or
   [signup for hCaptcha](https://dashboard.hcaptcha.com/signup), create a site and
   put the site key here
 

docs/content/deployment/index.mdx

@@ -31,12 +31,12 @@ See [the config docs](/docs/running-bracket/configuration.mdx) for more informat
 
 The following configuration variables need to be adjusted for the frontend to run it in production:
 
-- `NEXT_PUBLIC_API_BASE_URL`: The base URL of the backend API to which the frontend sends requests.
+- `VITE_API_BASE_URL`: The base URL of the backend API to which the frontend sends requests.
   For example: `https://api.bracket.com`
 
 Optional:
 
-- `NEXT_PUBLIC_HCAPTCHA_SITE_KEY`: The HCaptcha key used for captcha challenges when creating new
+- `VITE_HCAPTCHA_SITE_KEY`: The HCaptcha key used for captcha challenges when creating new
   accounts. You get the secret when you create a new site in HCaptcha. If left blank, HCaptcha will
   be disabled for your site.
 

docs/content/deployment/nomad.mdx

@@ -89,15 +89,15 @@ job "bracket-frontend" {
       driver = "docker"
 
       env {
-        NEXT_PUBLIC_API_BASE_URL = "https://my.bracketdomain.com"
-        NEXT_PUBLIC_HCAPTCHA_SITE_KEY = "xxxxx"
+        VITE_API_BASE_URL = "https://my.bracketdomain.com"
+        VITE_HCAPTCHA_SITE_KEY = "xxxxx"
         NODE_ENV = "production"
       }
 
       config {
         image   = "ghcr.io/evroon/bracket-frontend"
         ports   = ["nextjs"]
-        args = ["yarn", "start", "-p", "${NOMAD_PORT_nextjs}"]
+        args = ["pnpm", "start", "-p", "${NOMAD_PORT_nextjs}"]
       }
 
       resources {

docs/content/deployment/systemd.mdx

@@ -51,7 +51,7 @@ After=network.target
 Type=simple
 User=bracket
 WorkingDirectory=/var/lib/bracket/frontend
-ExecStart=/usr/local/bin/yarn start
+ExecStart=/usr/local/bin/pnpm start
 Environment=NODE_ENV=production
 TimeoutSec=15
 Restart=always

docs/content/index.mdx

@@ -5,7 +5,7 @@ title: Introduction
 
 [Bracket](https://github.com/evroon/bracket) is a tournament system meant to be easy to use. Bracket
 is written in async Python (with [FastAPI](https://fastapi.tiangolo.com)) and
-[Next.js](https://nextjs.org/) as frontend using the [Mantine](https://mantine.dev/) library.
+[Vite](https://vite.dev/) as frontend using the [Mantine](https://mantine.dev/) library.
 
 ## Overview of features
 
@@ -36,7 +36,7 @@ tournament systems that exist usually only support Swiss, no other types of tour
 (round-robin, elimination etc.). That is quite a limitation when you want to host a tournament that
 starts with Swiss and determines a winner based on a knockoff (elimination) stage.
 
-**Finally**, I developed this project to learn more about Next.js and apply my Python (e.g. FastAPI)
+**Finally**, I developed this project to learn more about Vite and apply my Python (e.g. FastAPI)
 experience to a project with a real purpose.
 
 ## Quickstart