Update Next.js version and improve session handling

Next.js version has been upgraded from 14.2.0-canary.58 to 14.2.0-canary.60 for performance and stability improvements. Additionally, account session handling has been improved by fetching the session data during server-side processing and passing it to various components, thus optimizing the user experience.

apps/web/app/(dashboard)/home/[account]/_components/account-layout-sidebar.tsx

@@ -2,6 +2,8 @@
 
 import { useRouter } from 'next/navigation';
 
+import { User } from '@supabase/supabase-js';
+
 import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
@@ -37,6 +39,7 @@ export function AccountLayoutSidebar(props: {
   account: string;
   accounts: AccountModel[];
   collapsed: boolean;
+  user: User | null;
 }) {
   return (
     <Sidebar collapsed={props.collapsed}>
@@ -46,6 +49,7 @@ export function AccountLayoutSidebar(props: {
           setCollapsed={setCollapsed}
           account={props.account}
           accounts={props.accounts}
+          user={props.user}
         />
       )}
     </Sidebar>
@@ -58,6 +62,7 @@ function SidebarContainer(props: {
   collapsed: boolean;
   setCollapsed: (collapsed: boolean) => void;
   collapsible?: boolean;
+  user: User | null;
 }) {
   const { account, accounts } = props;
   const router = useRouter();
@@ -86,7 +91,10 @@ function SidebarContainer(props: {
 
       <div className={'absolute bottom-4 left-0 w-full'}>
         <SidebarContent>
-          <ProfileAccountDropdownContainer collapsed={props.collapsed} />
+          <ProfileAccountDropdownContainer
+            user={props.user}
+            collapsed={props.collapsed}
+          />
 
           <If condition={props.collapsible}>
             <AppSidebarFooterMenu

apps/web/app/(dashboard)/home/[account]/_lib/server/team-account-workspace.loader.ts

@@ -26,9 +26,16 @@ export const loadTeamWorkspace = cache(async (accountSlug: string) => {
 
   const accountsPromise = client.from('user_accounts').select('*');
 
-  const [accountResult, accountsResult] = await Promise.all([
+  const [
+    accountResult,
+    accountsResult,
+    {
+      data: { session },
+    },
+  ] = await Promise.all([
     accountPromise,
     accountsPromise,
+    client.auth.getSession(),
   ]);
 
   if (accountResult.error) {
@@ -56,5 +63,6 @@ export const loadTeamWorkspace = cache(async (accountSlug: string) => {
   return {
     account: accountData,
     accounts: accountsResult.data,
+    session,
   };
 });

apps/web/app/(dashboard)/home/[account]/layout.tsx

@@ -32,6 +32,7 @@ function TeamWorkspaceLayout({
           collapsed={false}
           account={params.account}
           accounts={accounts}
+          user={data.session?.user ?? null}
         />
       }
     >

apps/web/app/(dashboard)/home/_components/home-sidebar.tsx

@@ -4,14 +4,16 @@ import { cookies } from 'next/headers';
 
 import { Sidebar, SidebarContent, SidebarNavigation } from '@kit/ui/sidebar';
 
-import { HomeSidebarAccountSelector } from '~/(dashboard)/home/_components/home-sidebar-account-selector';
-import { ProfileAccountDropdownContainer } from '~/(dashboard)/home/_components/personal-account-dropdown-container';
-import { loadUserWorkspace } from '~/(dashboard)/home/_lib/load-user-workspace';
 import { personalAccountSidebarConfig } from '~/config/personal-account-sidebar.config';
 
+// home imports
+import { HomeSidebarAccountSelector } from '../_components/home-sidebar-account-selector';
+import { ProfileAccountDropdownContainer } from '../_components/personal-account-dropdown-container';
+import { loadUserWorkspace } from '../_lib/load-user-workspace';
+
 export function HomeSidebar() {
   const collapsed = getSidebarCollapsed();
-  const { accounts } = use(loadUserWorkspace());
+  const { accounts, session } = use(loadUserWorkspace());
 
   return (
     <Sidebar collapsed={collapsed}>
@@ -25,7 +27,10 @@ export function HomeSidebar() {
 
       <div className={'absolute bottom-4 left-0 w-full'}>
         <SidebarContent>
-          <ProfileAccountDropdownContainer collapsed={collapsed} />
+          <ProfileAccountDropdownContainer
+            collapsed={collapsed}
+            user={session?.user ?? null}
+          />
         </SidebarContent>
       </div>
     </Sidebar>

apps/web/app/(dashboard)/home/_components/personal-account-dropdown-container.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import type { User } from '@supabase/supabase-js';
+
 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUser } from '@kit/supabase/hooks/use-user';
@@ -7,9 +9,12 @@ import { useUser } from '@kit/supabase/hooks/use-user';
 import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 
-export function ProfileAccountDropdownContainer(props: { collapsed: boolean }) {
+export function ProfileAccountDropdownContainer(props: {
+  collapsed: boolean;
+  user: User | null;
+}) {
   const signOut = useSignOut();
-  const user = useUser();
+  const user = useUser(props.user);
 
   return (
     <div className={props.collapsed ? '' : 'w-full'}>

apps/web/app/(dashboard)/home/_lib/load-user-workspace.ts

@@ -3,16 +3,20 @@ import { cache } from 'react';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 
 export const loadUserWorkspace = cache(async () => {
-  const accounts = await loadUserAccounts();
+  const client = getSupabaseServerComponentClient();
+
+  const accounts = await loadUserAccounts(client);
+  const { data } = await client.auth.getSession();
 
   return {
     accounts,
+    session: data.session,
   };
 });
 
-async function loadUserAccounts() {
-  const client = getSupabaseServerComponentClient();
-
+async function loadUserAccounts(
+  client: ReturnType<typeof getSupabaseServerComponentClient>,
+) {
   const { data: accounts, error } = await client
     .from('user_accounts')
     .select(`name, slug, picture_url`);

apps/web/package.json

@@ -43,7 +43,7 @@
     "i18next": "^23.10.1",
     "i18next-resources-to-backend": "^1.2.0",
     "lucide-react": "^0.363.0",
-    "next": "14.2.0-canary.58",
+    "next": "14.2.0-canary.60",
     "next-sitemap": "^4.2.3",
     "next-themes": "0.3.0",
     "react": "18.2.0",