Next.js 15 Update (#26)

* Update Next.js and React versions in all packages
* Replace onRedirect function with next/link in BillingSessionStatus, since it's no longer cached by default
* Remove unused revalidatePath import in billing return page, since it's no longer cached by default
* Add Turbopack module aliases to improve development server speed
* Converted new Dynamic APIs to be Promise-based
* Adjust mobile layout
* Use ENABLE_REACT_COMPILER to enable the React Compiler in Next.js 15
* Report Errors using the new onRequestError hook

packages/ui/src/makerkit/image-upload-input.tsx

@@ -34,7 +34,7 @@ export const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
     },
     forwardedRef,
   ) {
-    const localRef = useRef<HTMLInputElement>();
+    const localRef = useRef<HTMLInputElement>(null);
 
     const [state, setState] = useState({
       image,

packages/ui/src/makerkit/page.tsx

@@ -30,21 +30,24 @@ function PageWithSidebar(props: PageProps) {
 
   return (
     <div
-      className={cn('flex bg-gray-50/95 dark:bg-background/85', props.className)}
+      className={cn(
+        'flex bg-gray-50/95 dark:bg-background/85',
+        props.className,
+      )}
     >
       {Navigation}
 
       <div
         className={
           props.contentContainerClassName ??
-          'mx-auto flex h-screen w-full flex-col overflow-y-auto px-4 lg:px-0 bg-inherit'
+          'mx-auto flex h-screen w-full flex-col overflow-y-auto bg-inherit'
         }
       >
         {MobileNavigation}
 
         <div
           className={
-            'flex flex-1 flex-col overflow-y-auto bg-background lg:m-1.5 lg:ml-0 lg:rounded-lg lg:border'
+            'flex flex-1 flex-col overflow-y-auto bg-background px-4 lg:m-1.5 lg:ml-0 lg:rounded-lg lg:border lg:px-0'
           }
         >
           {Children}
@@ -62,7 +65,7 @@ export function PageMobileNavigation(
   return (
     <div
       className={cn(
-        'flex w-full items-center border-b py-2 lg:hidden',
+        'flex w-full items-center border-b px-4 py-2 lg:hidden lg:px-0',
         props.className,
       )}
     >
@@ -115,7 +118,9 @@ export function PageBody(
 }
 
 export function PageNavigation(props: React.PropsWithChildren) {
-  return <div className={'hidden flex-1 lg:flex bg-inherit'}>{props.children}</div>;
+  return (
+    <div className={'hidden flex-1 bg-inherit lg:flex'}>{props.children}</div>
+  );
 }
 
 export function PageDescription(props: React.PropsWithChildren) {

packages/ui/src/makerkit/profile-avatar.tsx

@@ -17,7 +17,7 @@ type ProfileAvatarProps = (SessionProps | TextProps) & {
 export function ProfileAvatar(props: ProfileAvatarProps) {
   const avatarClassName = cn(
     props.className,
-    'mx-auto w-9 h-9 group-focus:ring-2',
+    'mx-auto h-9 w-9 group-focus:ring-2',
   );
 
   if ('text' in props) {

packages/ui/src/makerkit/stepper.tsx

@@ -42,7 +42,7 @@ export function Stepper(props: {
       const isDotsVariant = variant === 'dots';
 
       const labelClassName = cn({
-        ['text-xs px-1.5 py-2']: !isNumberVariant,
+        ['px-1.5 py-2 text-xs']: !isNumberVariant,
         ['hidden']: isDotsVariant,
       });
 
@@ -182,15 +182,15 @@ function StepDivider({
   selected: boolean;
   complete: boolean;
 }>) {
-  const spanClassName = cn('font-medium text-sm min-w-max', {
-    ['text-muted-foreground hidden sm:flex']: !selected,
+  const spanClassName = cn('min-w-max text-sm font-medium', {
+    ['hidden text-muted-foreground sm:flex']: !selected,
     ['text-secondary-foreground']: selected || complete,
     ['font-medium']: selected,
   });
 
   const className = cn(
-    'flex flex-1 last:flex-[0_0_0] items-center h-9 justify-center' +
-      ' items-center w-full group px-3 flex space-x-3',
+    'flex h-9 flex-1 items-center justify-center last:flex-[0_0_0]' +
+      ' group flex w-full items-center space-x-3 px-3',
   );
 
   return (