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

apps/web/app/home/(user)/_components/home-account-selector.tsx

@@ -22,6 +22,7 @@ export function HomeAccountSelector(props: {
   }>;
 
   userId: string;
+  collisionPadding?: number;
 }) {
   const router = useRouter();
   const { collapsed } = useContext(SidebarContext);
@@ -29,6 +30,7 @@ export function HomeAccountSelector(props: {
   return (
     <AccountSelector
       collapsed={collapsed}
+      collisionPadding={props.collisionPadding ?? 20}
       accounts={props.accounts}
       features={features}
       userId={props.userId}

apps/web/app/home/(user)/_components/home-menu-navigation.tsx

@@ -50,18 +50,12 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
 
       <div className={'flex justify-end space-x-2.5'}>
         <If condition={featuresFlagConfig.enableTeamAccounts}>
-          <HomeAccountSelector
-            userId={user.id}
-            accounts={accounts}
-          />
+          <HomeAccountSelector userId={user.id} accounts={accounts} />
         </If>
 
         <UserNotifications userId={user.id} />
 
-        <ProfileAccountDropdownContainer
-          user={user}
-          account={workspace}
-        />
+        <ProfileAccountDropdownContainer user={user} account={workspace} />
       </div>
     </div>
   );

apps/web/app/home/(user)/_components/home-mobile-navigation.tsx

@@ -71,6 +71,7 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
             <HomeAccountSelector
               userId={props.workspace.user.id}
               accounts={props.workspace.accounts}
+              collisionPadding={0}
             />
           </DropdownMenuGroup>
 

apps/web/app/home/(user)/billing/_components/personal-account-checkout-form.tsx

@@ -99,7 +99,7 @@ export function PersonalAccountCheckoutForm(props: {
                     });
 
                   setCheckoutToken(checkoutToken);
-                } catch (e) {
+                } catch {
                   setError(true);
                 }
               });

apps/web/app/home/(user)/layout.tsx

@@ -23,7 +23,7 @@ import { loadUserWorkspace } from './_lib/server/load-user-workspace';
 
 function UserHomeLayout({ children }: React.PropsWithChildren) {
   const workspace = use(loadUserWorkspace());
-  const style = getLayoutStyle();
+  const style = use(getLayoutStyle());
 
   return (
     <Page style={style}>
@@ -52,9 +52,11 @@ function UserHomeLayout({ children }: React.PropsWithChildren) {
 
 export default withI18n(UserHomeLayout);
 
-function getLayoutStyle() {
+async function getLayoutStyle() {
+  const cookieStore = await cookies();
+
   return (
-    (cookies().get('layout-style')?.value as PageLayoutStyle) ??
+    (cookieStore.get('layout-style')?.value as PageLayoutStyle) ??
     personalAccountNavigationConfig.style
   );
-}
+}

apps/web/app/home/(user)/settings/page.tsx

@@ -6,17 +6,20 @@ import { PageBody } from '@kit/ui/page';
 import authConfig from '~/config/auth.config';
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
-import { loadUserWorkspace } from '~/home/(user)/_lib/server/load-user-workspace';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
+import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
 
 const features = {
   enableAccountDeletion: featureFlagsConfig.enableAccountDeletion,
   enablePasswordUpdate: authConfig.providers.password,
 };
 
+const callbackPath = pathsConfig.auth.callback;
+const accountHomePath = pathsConfig.app.accountHome;
+
 const paths = {
-  callback: pathsConfig.auth.callback + `?next=${pathsConfig.app.accountHome}`,
+  callback: callbackPath + `?next=${accountHomePath}`,
 };
 
 export const generateMetadata = async () => {
@@ -29,7 +32,7 @@ export const generateMetadata = async () => {
 };
 
 function PersonalAccountSettingsPage() {
-  const { user } = use(loadUserWorkspace());
+  const user = use(requireUserInServerComponent());
 
   return (
     <PageBody>