feat: migrate from Next.js 14 to Next.js 16

BREAKING CHANGE: Major version upgrade with significant changes

## Core Updates
- Upgrade Next.js from 14.2.26 to 16.0.3
- Upgrade React from 18.2.0 to 19.x
- Upgrade TypeScript from 5.1.6 to 5.6.x
- Enable React Compiler for automatic memoization

## Authentication (NextAuth v4 → v5)
- Migrate to NextAuth 5.0.0-beta.30 (Auth.js)
- Create new auth.ts with handlers, auth, signIn, signOut exports
- Update API route to use new handlers pattern
- Update middleware to use auth() wrapper
- Update utils/auth.ts to use new auth() function
- Update type declarations for v5 compatibility

## Dependency Updates
- Update Storybook from 7.5.3 to 8.4.x for React 19 support
- Update embla-carousel-react from 7.1.0 to 8.5.x
- Update apexcharts from 3.x to 4.x
- Update eslint-config-next to 16.x
- Remove deprecated @mantine/next package
- Add babel-plugin-react-compiler

## Configuration Changes
- Update next.config.js with reactCompiler option
- Update tsconfig.json target to ES2017
- Add avatar property to User type

## Other Fixes
- Handle Clerk authentication gracefully when not configured
- Fix TypeScript errors related to Set iteration

Author: claude

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

@@ -1,7 +1,3 @@
-import NextAuth from 'next-auth';
+import { handlers } from '@/auth';
 
-import { authOptions } from '@/app/lib/authOptions';
-
-const handler = NextAuth(authOptions);
-
-export { handler as GET, handler as POST };
+export const { GET, POST } = handlers;

app/auth/clerk/layout.tsx

@@ -3,6 +3,8 @@
 import { ReactNode } from 'react';
 
 import { ClerkProvider } from '@clerk/nextjs';
+import { Alert, Container, Stack, Text, Title } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons-react';
 
 import { MainLayout } from '@/layouts/Main';
 import { Providers } from '@/providers/session';
@@ -14,6 +16,50 @@ type AuthProps = {
 };
 
 function AuthLayout({ children }: AuthProps) {
+  // Check if Clerk is configured
+  const clerkPublishableKey = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+
+  if (!clerkPublishableKey) {
+    return (
+      <MainLayout>
+        <Providers>
+          <Container size="sm" py="xl">
+            <Stack>
+              <Alert
+                icon={<IconAlertCircle size={16} />}
+                title="Clerk Not Configured"
+                color="yellow"
+              >
+                <Text size="sm">
+                  Clerk authentication is not configured. Please set the{' '}
+                  <code>NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY</code> environment
+                  variable to enable Clerk features.
+                </Text>
+              </Alert>
+              <Title order={4}>To configure Clerk:</Title>
+              <Text size="sm">
+                1. Create an account at{' '}
+                <a
+                  href="https://dashboard.clerk.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  dashboard.clerk.com
+                </a>
+              </Text>
+              <Text size="sm">
+                2. Get your publishable key from the API Keys section
+              </Text>
+              <Text size="sm">
+                3. Add it to your <code>.env.local</code> file
+              </Text>
+            </Stack>
+          </Container>
+        </Providers>
+      </MainLayout>
+    );
+  }
+
   return (
     <MainLayout>
       <Providers>

app/lib/authOptions.ts renamed to auth.ts

@@ -1,7 +1,7 @@
 import NextAuth from 'next-auth';
-import { NextAuthOptions } from 'next-auth';
-import { JWT } from 'next-auth/jwt';
-import CredentialsProvider from 'next-auth/providers/credentials';
+import Credentials from 'next-auth/providers/credentials';
+
+import type { JWT } from 'next-auth/jwt';
 
 // Helper function to refresh the token
 async function refreshAccessToken(token: JWT) {
@@ -76,7 +76,7 @@ async function refreshAccessToken(token: JWT) {
     const newToken = refreshedTokens.token || refreshedTokens.accessToken;
 
     // Update permissions from the new token if needed
-    let permissions = [];
+    let permissions: string[] = [];
     if (newToken) {
       try {
         const payload = JSON.parse(
@@ -107,9 +107,9 @@ async function refreshAccessToken(token: JWT) {
   }
 }
 
-export const authOptions: NextAuthOptions = {
+export const { handlers, signIn, signOut, auth } = NextAuth({
   providers: [
-    CredentialsProvider({
+    Credentials({
       name: 'Credentials',
       credentials: {
         email: { label: 'Email', type: 'email' },
@@ -154,7 +154,7 @@ export const authOptions: NextAuthOptions = {
           // You can extract the payload portion without validating the signature
           // (NextAuth will handle token validation)
           const token = response.token;
-          let permissions = [];
+          let permissions: string[] = [];
 
           if (token) {
             try {
@@ -211,7 +211,7 @@ export const authOptions: NextAuthOptions = {
       }
 
       // Return the previous token if the access token has not expired yet
-      if (token.expiration && new Date(token.expiration) > new Date()) {
+      if (token.expiration && new Date(token.expiration as string) > new Date()) {
         console.log('Token not expired, returning existing token');
         return token;
       }
@@ -235,24 +235,18 @@ export const authOptions: NextAuthOptions = {
         session.user.id = token.id as string;
 
         // Add custom fields to session
-        // @ts-ignore - Adding custom properties
-        session.accessToken = token.accessToken;
-        // @ts-ignore
-        session.roles = token.roles;
-        // @ts-ignore
-        session.permissions = token.permissions;
-        // @ts-ignore
-        session.expiration = token.expiration;
+        session.accessToken = token.accessToken as string;
+        session.roles = token.roles as string[];
+        session.permissions = token.permissions as string[];
+        session.expiration = token.expiration as string;
 
         // Add refresh token error to session if it exists
         if (token.error) {
-          // @ts-ignore
-          session.error = token.error;
+          session.error = token.error as string;
         }
       }
 
       return session;
     },
   },
-  secret: process.env.NEXTAUTH_SECRET!,
-};
+});

middleware.ts

@@ -1,15 +1,11 @@
-import { clerkMiddleware } from '@clerk/nextjs/server';
 import { NextResponse } from 'next/server';
-import { getToken } from 'next-auth/jwt';
 
+import { auth } from '@/auth';
 import { PATH_DASHBOARD } from '@/routes';
 
-import type { NextRequest } from 'next/server';
-
-export default clerkMiddleware();
-
-export async function middleware(request: NextRequest) {
-  const { pathname } = request.nextUrl;
+export default auth((req) => {
+  const { pathname } = req.nextUrl;
+  const isAuthenticated = !!req.auth;
 
   // Check if the path starts with these prefixes
   const isPublicPath =
@@ -25,27 +21,20 @@ export async function middleware(request: NextRequest) {
       pathname,
     );
 
-  const token = await getToken({
-    req: request,
-    secret: process.env.NEXTAUTH_SECRET,
-  });
-
-  const isAuthenticated = !!token;
-
   // Redirect authenticated users away from auth pages
   if (isAuthenticated && pathname.startsWith('/auth')) {
-    return NextResponse.redirect(new URL(PATH_DASHBOARD.default, request.url));
+    return NextResponse.redirect(new URL(PATH_DASHBOARD.default, req.url));
   }
 
   // Redirect unauthenticated users to login page for protected routes
   if (!isAuthenticated && !isPublicPath) {
-    const redirectUrl = new URL('/auth/signin', request.url);
-    redirectUrl.searchParams.set('callbackUrl', encodeURI(request.url));
+    const redirectUrl = new URL('/auth/signin', req.url);
+    redirectUrl.searchParams.set('callbackUrl', encodeURI(req.url));
     return NextResponse.redirect(redirectUrl);
   }
 
   return NextResponse.next();
-}
+});
 
 // See "Matching Paths" below to learn more
 export const config = {

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   trailingSlash: false,
+
+  // Enable React Compiler (stable in Next.js 16)
+  reactCompiler: true,
 };
 
 module.exports = nextConfig;