update to nextjs 15

easy

easy

easy

easy

easy

easy

easy

easy

easy

easy

easy

easy

asd

test

easy

easy

Author: 0-don

.eslintrc.json

@@ -12,7 +12,7 @@ jobs:
     runs-on: self-hosted
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Create env file
         run: |

.github/workflows/docker.yml

@@ -5,7 +5,7 @@ WORKDIR /app
 COPY package.json ./
 COPY prisma ./prisma
 
-RUN npm install
+RUN npm install --force
 
 # 
 FROM node:20-alpine AS builder

Dockerfile

@@ -0,0 +1,38 @@
+import js from "@eslint/js";
+import nextPlugin from "@next/eslint-plugin-next";
+import tsParser from "@typescript-eslint/parser";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import globals from "globals";
+
+export default [
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      parser: tsParser,
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...globals.node,
+        React: "readonly",
+      },
+    },
+    plugins: {
+      "@next/next": nextPlugin,
+      "react-hooks": reactHooksPlugin,
+    },
+    rules: {
+      "react-hooks/exhaustive-deps": "off",
+      "no-unused-vars": [
+        "warn",
+        {
+          varsIgnorePattern: "^(NodeJS|other)$",
+          ignoreRestSiblings: true,
+          args: "none",
+          caughtErrors: "none",
+        },
+      ],
+      ...nextPlugin.configs.recommended.rules,
+    },
+  },
+];

eslint.config.js

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  poweredByHeader: false,
+};
+
+export default nextConfig;

next.config.mjs

@@ -1,9 +1,10 @@
 {
   "name": "next-elysia-prisma",
   "version": "1.0.0",
+  "type": "module",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "prisma migrate deploy && next start",
     "lint": "next lint",
@@ -12,26 +13,26 @@
   },
   "dependencies": {
     "@elysiajs/eden": "^1.1.3",
-    "@prisma/client": "^5.20.0",
-    "@tanstack/react-query": "^5.59.6",
-    "elysia": "^1.1.19",
-    "jose": "^5.9.3",
-    "next": "14.2.15",
-    "react": "^18",
-    "react-dom": "^18"
+    "@prisma/client": "^5.22.0",
+    "@tanstack/react-query": "^5.61.0",
+    "elysia": "^1.1.25",
+    "jose": "^5.9.6",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.11",
-    "@types/node": "^22.7.5",
+    "@types/bun": "^1.1.13",
+    "@types/node": "^22.9.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.15",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "15.0.3",
     "postcss": "^8",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "prisma": "^5.20.0",
-    "tailwindcss": "^3.4.13",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prisma": "^5.22.0",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5"
   }
-}
+}

next.config.ts

@@ -13,10 +13,11 @@ export default async function AuthLayout(props: AuthLayoutProps) {
   const queryClient = getQueryClient();
 
   // Fetch current user data set cookies are required else they will be empty
-  const { data: me, error: meError } = await rpc.api.user.me.get(setCookies());
+  const { error: meError } = await rpc.api.user.me.get(await setCookies());
 
   // serverUrl is a custom function because nextjs doesnt provide a way to read current url in server components
-  if (!meError && !serverUrl()?.includes("logout")) redirect("/dashboard");
+  if (!meError && !(await serverUrl())?.includes("logout"))
+    redirect("/dashboard");
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>

package.json

@@ -1,7 +1,7 @@
 "use client";
 
 import { AuthHook } from "@/components/hooks/auth-hook";
-import { authUser } from "@/lib/typebox/auth";
+import { authenticationSchema, authSchemas } from "@/lib/typebox/auth";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { FormEvent, useState } from "react";
@@ -22,7 +22,7 @@ export default function LoginPage(props: LoginPageProps) {
         username,
         password,
       })
-      .then((user) => (user ? router.push("/dashboard") : setStatus(user)))
+      .then(() => router.push("/dashboard"))
       .catch((error) => setStatus(JSON.stringify(error)));
   };
 
@@ -34,23 +34,38 @@ export default function LoginPage(props: LoginPageProps) {
           id="username"
           type="text"
           value={username}
-          minLength={authUser.properties.username.minLength}
+          minLength={authenticationSchema.properties.username.minLength}
+          maxLength={authenticationSchema.properties.username.maxLength}
           onChange={(e) => setUsername(e.target.value)}
           required
+          autoComplete="username"
         />
       </div>
       <div className="flex flex-col border">
         <label htmlFor="password">Password</label>
         <input
           id="password"
           type="password"
+          minLength={authenticationSchema.properties.password.minLength}
+          maxLength={authenticationSchema.properties.password.maxLength}
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           required
+          autoComplete="current-password"
         />
       </div>
       <div className="flex justify-between">
-        <button className="bg-red-600" type="submit">
+        <button
+          className="bg-red-600 disabled:bg-gray-600"
+          type="submit"
+          disabled={
+            loginMutation.isPending ||
+            !authSchemas.authUser.safeParse({
+              username,
+              password,
+            }).success
+          }
+        >
           Login
         </button>
 

src/app/(auth)/layout.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import { AuthHook } from "@/components/hooks/auth-hook";
+import { authenticationSchema, authSchemas } from "@/lib/typebox/auth";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { FormEvent, useState } from "react";
 
-interface RegisterPageProps {}
-
-export default function RegisterPage(props: RegisterPageProps) {
+export default function RegisterPage() {
   const router = useRouter();
   const { registerMutation } = AuthHook();
   const [status, setStatus] = useState("");
@@ -21,7 +20,7 @@ export default function RegisterPage(props: RegisterPageProps) {
         username,
         password,
       })
-      .then((user) => (user ? router.push("/dashboard") : setStatus(user)))
+      .then(() => router.push("/dashboard"))
       .catch((error) => setStatus(JSON.stringify(error)));
   };
 
@@ -34,7 +33,10 @@ export default function RegisterPage(props: RegisterPageProps) {
           type="text"
           value={username}
           onChange={(e) => setUsername(e.target.value)}
+          minLength={authenticationSchema.properties.username.minLength}
+          maxLength={authenticationSchema.properties.username.maxLength}
           required
+          autoComplete="username"
         />
       </div>
       <div className="flex flex-col border">
@@ -43,12 +45,25 @@ export default function RegisterPage(props: RegisterPageProps) {
           id="password"
           type="password"
           value={password}
+          minLength={authenticationSchema.properties.password.minLength}
+          maxLength={authenticationSchema.properties.password.maxLength}
           onChange={(e) => setPassword(e.target.value)}
           required
+          autoComplete="current-password"
         />
       </div>
       <div className="flex justify-between">
-        <button className="bg-red-600" type="submit">
+        <button
+          className="bg-red-600 disabled:bg-gray-600"
+          type="submit"
+          disabled={
+            registerMutation.isPending ||
+            !authSchemas.authUser.safeParse({
+              username,
+              password,
+            }).success
+          }
+        >
           Register
         </button>