refactor(client): move from vite to next (#1)

* wip

* refactor: use `next` instead of `vite`

* fix(client): set auth in store before navigating to protected route

* fix: render conditionally parts of Header

* fix(client): add missing deps

* fix(client): do not prerender Login component

* fix: add missing `react-spinner` dep

* refactor(client): do not use LED component

* style: change Loader color

* chore: add `lottie-react`

* fix(client): add `socket.io-client` dep

* chore: disable next lint during build

* perf: optimize with `million`

.biome.jsonc

@@ -17,12 +17,16 @@
   },
   "overrides": [
     {
-      "include": ["client/src/main.tsx", "server/src/lib/verify.ts"],
+      "include": ["server/src/lib/verify.ts"],
       "linter": { "rules": { "style": { "noNonNullAssertion": "off" } } },
     },
     // TODO: improve types
     {
-      "include": ["client/src/lib/types.ts", "server/src/lib/verify.ts", "server/src/lib/run-snarkjs-verification.ts"],
+      "include": [
+        "client/src/lib/types.ts",
+        "server/src/lib/verify.ts",
+        "server/src/lib/run-snarkjs-verification.ts",
+      ],
       "linter": { "rules": { "suspicious": { "noExplicitAny": "off" } } },
     },
     // TODO: improve types
@@ -31,4 +35,9 @@
       "linter": { "rules": { "style": { "noUnusedTemplateLiteral": "off", "useTemplate": "off" } } },
     },
   ],
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true,
+  },
 }

.envrc

@@ -1,4 +1,4 @@
 use asdf
 
-export VITE_SCOPE=dog18
 export SCOPE=dog18
+export NEXT_PUBLIC_SCOPE="$SCOPE"

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
+.next
 tsconfig.tsbuildinfo

client/README.md

@@ -1,50 +1,36 @@
-# React + TypeScript + Vite
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Getting Started
 
-Currently, two official plugins are available:
+First, run the development server:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-## Expanding the ESLint configuration
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-- Configure the top-level `parserOptions` property like this:
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
+## Learn More
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+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!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

client/next-env.d.ts

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

client/next.config.mjs

@@ -0,0 +1,10 @@
+import million from 'million/compiler'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
+
+export default million.next(nextConfig, { telemetry: false, rsc: true })

client/package.json

@@ -1,34 +1,31 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.0.0",
-  "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
   },
   "dependencies": {
-    "@openpassport/sdk": "^0.1.7",
     "easy-peasy": "^6.0.5",
     "easyqrcodejs": "^4.6.1",
     "js-cookie": "^3.0.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.1",
+    "lottie-react": "^2.4.0",
+    "million": "^3.1.11",
+    "next": "14.2.8",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-spinners": "^0.14.1",
+    "socket.io-client": "^4.7.5",
     "swr": "^2.2.5"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.20",
-    "globals": "^15.9.0",
-    "postcss": "^8.4.45",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.3",
-    "vite": "^5.4.1",
-    "vite-tsconfig-paths": "^5.0.1"
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

client/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+}
+
+export default config

client/src/app/layout.tsx

@@ -0,0 +1,20 @@
+import './globals.css'
+import { Layout } from 'c/Layout'
+
+export { metadata } from 'l/config'
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang='en'>
+      <body>
+        <Layout>
+          {children}
+        </Layout>
+      </body>
+    </html>
+  )
+}

client/src/app/login/page.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { ExternalLink } from 'c/ExternalLink'
+import { Links } from 'l/constants'
+import type { Id } from 'l/types'
+import dynamic from 'next/dynamic'
+import { BeatLoader } from 'react-spinners'
+
+const OpenPassportQRCode = dynamic(
+  () => import('c/QrCode/OpenPassportQrCode').then(({ OpenPassportQRCode }) => OpenPassportQRCode),
+  {
+    loading: () => (
+      <div className='flex items-center justify-center h-[300px] w-[300px]'>
+        <BeatLoader loading={true} size={50} color='#e0a3c8' />
+      </div>
+    ),
+    ssr: false,
+  },
+)
+
+export default function Login() {
+  return (
+    <div className='flex flex-col justify-center items-center'>
+      {/* FIXME avoid type assertion */}
+      <OpenPassportQRCode userId={crypto.randomUUID() as Id} />
+      {
+        <div>
+          <p className='text-center'>Scan this 👆</p> With your OpenPassport mobile app:
+          <ExternalLink
+            className='underline ml-2'
+            href={Links.IOS_APP}
+          >
+            iOS
+          </ExternalLink>
+          <ExternalLink
+            className='underline ml-2'
+            href={Links.ANDROID_APP}
+          >
+            Android
+          </ExternalLink>
+        </div>
+      }
+    </div>
+  )
+}