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

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

docs/content/running-bracket/configuration.mdx

@@ -44,28 +44,28 @@ AUTO_RUN_MIGRATIONS=true
 
 ## Frontend
 
-- `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.
-- `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`
-- `ANALYTICS_DATA_DOMAIN`: The `data-domain` attribute passed to the script for Plausible
+- `VITE_ANALYTICS_DATA_DOMAIN`: The `data-domain` attribute passed to the script for Plausible
   analytics
-- `ANALYTICS_DATA_WEBSITE_ID`: The `data-website-id` attribute passed to the script for Umami
+- `VITE_ANALYTICS_DATA_WEBSITE_ID`: The `data-website-id` attribute passed to the script for Umami
   analytics
-- `ANALYTICS_SCRIPT_SRC`: The URL to the script for analytics purposes.
+- `VITE_ANALYTICS_SCRIPT_SRC`: The URL to the script for analytics purposes.
 
 ### Frontend: Example configuration file
 
-You can store the config in `.env.local` (as described in the [Next docs][next-config-url]).
+You can store the config in `.env.local` (as described in the [Vite docs][vite-config-url]).
 
 This is an example of how the config file should look like:
 
 ```shell
-NEXT_PUBLIC_HCAPTCHA_SITE_KEY='10000000-ffff-ffff-ffff-000000000001'
-NEXT_PUBLIC_API_BASE_URL='https://api.bracket.com'
-ANALYTICS_SCRIPT_SRC='https://analytics.bracket.com/script.js'
-ANALYTICS_DATA_DOMAIN='bracket.com'
-ANALYTICS_DATA_WEBSITE_ID='bracket.com'
+VITE_HCAPTCHA_SITE_KEY='10000000-ffff-ffff-ffff-000000000001'
+VITE_API_BASE_URL='https://api.bracket.com'
+VITE_ANALYTICS_SCRIPT_SRC='https://analytics.bracket.com/script.js'
+VITE_ANALYTICS_DATA_DOMAIN='bracket.com'
+VITE_ANALYTICS_DATA_WEBSITE_ID='bracket.com'
 ```
 
-[next-config-url]: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#loading-environment-variables
+[vite-config-url]: https://vite.dev/guide/env-and-mode

docs/content/running-bracket/faq.mdx

@@ -10,7 +10,7 @@ title: FAQ
 This is likely because you are trying to access Bracket on a different address than
 `http://localhost:3000` in the browser. In that case, two things need to be changed:
 
-- Change `NEXT_PUBLIC_API_BASE_URL` to the address of the backend, e.g `https://api.example.org`.
+- Change `VITE_API_BASE_URL` to the address of the backend, e.g `https://api.example.org`.
 - You will also need to update `CORS_ORIGINS` to the address of the frontend, e.g.
   `https://app.example.org`.