Update to Next.js 14

app/api/auth/[...nextauth]/route.ts

@@ -1,41 +1,5 @@
-import NextAuth, { NextAuthOptions } from 'next-auth'
-import KeycloakProvider from 'next-auth/providers/keycloak'
-import { API_URL } from '@lib/strapi'
-
-export const authOptions: NextAuthOptions = {
-  debug: false,
-  providers: [
-    KeycloakProvider({
-      clientId: process.env.KEYCLOAK_CLIENT_ID ?? 'strapi',
-      clientSecret: process.env.KEYCLOAK_CLIENT_SECRET ?? 'strapi',
-      issuer: process.env.KEYCLOAK_ISSUER,
-      httpOptions: {
-        timeout: 10000,
-      },
-    }),
-  ],
-  session: {
-    strategy: 'jwt',
-  },
-  callbacks: {
-    async session({ session, token }) {
-      session.user.token = token.jwt
-      return session
-    },
-    async jwt({ token, user, account }) {
-      if (user) {
-        const response = await fetch(
-          `${API_URL}/auth/keycloak/callback?access_token=${account?.access_token}`
-        )
-        if (response.ok) {
-          const data = await response.json()
-          token.jwt = data.jwt
-        }
-      }
-      return token
-    },
-  },
-}
+import NextAuth from 'next-auth'
+import { authOptions } from '@lib/nextauth'
 
 const handler = NextAuth(authOptions)
 

app/medlem/[privatePage]/page.tsx

@@ -1,7 +1,7 @@
 import { getServerSession } from 'next-auth'
 import { fetchPrivatePage } from '@lib/strapi/privatepage'
 import Page from '@components/Page'
-import { authOptions } from '../../api/auth/[...nextauth]/route'
+import { authOptions } from '@lib/nextauth'
 import Unauthorized from '@components/Unauthorized'
 
 const PrivatePage = async ({ params }: { params: { privatePage: string } }) => {

lib/nextauth.ts

@@ -0,0 +1,37 @@
+import { NextAuthOptions } from 'next-auth'
+import KeycloakProvider from 'next-auth/providers/keycloak'
+import { API_URL } from '@lib/strapi'
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    KeycloakProvider({
+      clientId: process.env.KEYCLOAK_CLIENT_ID ?? 'strapi',
+      clientSecret: process.env.KEYCLOAK_CLIENT_SECRET ?? 'strapi',
+      issuer: process.env.KEYCLOAK_ISSUER,
+      httpOptions: {
+        timeout: 10000,
+      },
+    }),
+  ],
+  session: {
+    strategy: 'jwt',
+  },
+  callbacks: {
+    async session({ session, token }) {
+      session.user.token = token.jwt
+      return session
+    },
+    async jwt({ token, user, account }) {
+      if (user) {
+        const response = await fetch(
+          `${API_URL}/auth/keycloak/callback?access_token=${account?.access_token}`
+        )
+        if (response.ok) {
+          const data = await response.json()
+          token.jwt = data.jwt
+        }
+      }
+      return token
+    },
+  },
+}

next.config.js

@@ -2,10 +2,12 @@
 module.exports = {
   reactStrictMode: true,
   images: {
-    domains: ['tf.fi', 'cms.tf.fi', 'localhost', 'test.tf.fi'],
+    remotePatterns: [
+      { protocol: 'https', hostname: 'tf.fi' },
+      { protocol: 'https', hostname: 'cms.tf.fi' },
+      { protocol: 'https', hostname: 'test.tf.fi' },
+      { protocol: 'http', hostname: 'localhost' },
+    ],
   },
   output: 'standalone',
-  experimental: {
-    serverActions: true,
-  },
 }

package.json

@@ -23,7 +23,7 @@
     "framer-motion": "^10.13.0",
     "googleapis": "^137.1.0",
     "marked": "^9.0.3",
-    "next": "^13.4.6",
+    "next": "^14.2.3",
     "next-auth": "^4.23.1",
     "qs": "^6.11.0",
     "react": "^18.2.0",