refactoring: move onboarding UI from app layout to new /app/onboarding

next.config.js

@@ -6,8 +6,6 @@ const nextConfig = {
 };
 
 const withPWA = require("@ducanh2912/next-pwa").default({
-  aggressiveFrontEndNavCaching: true,
-  cacheOnFrontEndNav: true,
   dest: "public",
 });
 

src/app/(marketing)/layout.tsx

@@ -15,7 +15,7 @@ export default async function MarketingLayout({ children }: { children: React.Re
     data: { session },
   } = await supabase.auth.getSession();
 
-  if (session) redirect('/app/today');
+  if (session) redirect('/app/onboarding');
   /**/
 
   return (

src/app/app/layout.tsx

@@ -1,12 +1,7 @@
 import { redirect } from 'next/navigation';
-import Link from 'next/link';
-import { twMerge } from 'tailwind-merge';
-import { buttonGreenClassName } from '@/modules/shared/controls/button/buttonClassName';
-import { ErrorList } from '@/modules/shared/errors/ErrorList';
 import { Header } from '@/modules/app/shared/Header';
 import { MainMenu } from '@/modules/app/shared/main-menu/MainMenu';
 import { InstallPwaDialog } from '@/modules/shared/pwa/InstallPwaDialog';
-import { getProjects } from '@/modules/app/projects/ProjectsRepository';
 import { UserProvider } from '@/modules/app/users/UserProvider';
 import { UpdateUserTimeZone } from '@/modules/app/users/UpdateUserTimeZone';
 import { getUser, UserDto } from '@/modules/app/users/UsersRepository';
@@ -18,14 +13,16 @@ export default async function AppLayout({
   children: React.ReactNode;
   dialog: React.ReactNode;
 }) {
+  /*
+   * Redirect to sign-in if user is not signed in.
+   */
   let user: UserDto;
   try {
     user = await getUser();
   } catch {
     redirect('/auth/sign-in');
   }
-
-  const { data: projects, errors } = await getProjects();
+  /**/
 
   return (
     <UserProvider user={user}>
@@ -40,20 +37,6 @@ export default async function AppLayout({
               <div className="pb-16">
                 {children}
                 {dialog}
-                {errors && <ErrorList errors={errors} />}
-                {!errors && (!projects || projects.length === 0) && (
-                  <>
-                    <p className="mt-4 text-sm font-medium text-gray-600">
-                      You don&#39;t have any projects yet.
-                    </p>
-                    <Link
-                      href="/app/projects/new"
-                      className={twMerge(buttonGreenClassName, 'w-fit mt-6')}
-                    >
-                      Create your first!
-                    </Link>
-                  </>
-                )}
               </div>
             </div>
           </div>

src/app/app/onboarding/page.tsx

@@ -0,0 +1,23 @@
+import 'server-only';
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+import { twMerge } from 'tailwind-merge';
+import { buttonGreenClassName } from '@/modules/shared/controls/button/buttonClassName';
+import { ErrorList } from '@/modules/shared/errors/ErrorList';
+import { getProjects } from '@/modules/app/projects/ProjectsRepository';
+
+export default async function Onboarding() {
+  const { data: projects, errors } = await getProjects();
+  if (errors) return <ErrorList errors={errors} />;
+  if (projects && projects.length > 0) redirect('/app/today');
+
+  return (
+    <>
+      <h2 className="mt-4 text-2xl">Welcome!</h2>
+      <p className="mt-8 text-sm font-medium">You don&#39;t have any projects yet.</p>
+      <Link href="/app/projects/new" className={twMerge(buttonGreenClassName, 'w-fit mt-8')}>
+        Create your first!
+      </Link>
+    </>
+  );
+}

src/app/app/page.tsx

@@ -2,5 +2,5 @@ import 'server-only';
 import { redirect } from 'next/navigation';
 
 export default function AppPage() {
-  redirect('/app/today');
+  redirect('/app/onboarding');
 }

src/app/auth/callback/route.ts

@@ -18,5 +18,5 @@ export async function GET(request: NextRequest) {
   }
 
   // URL to redirect to after sign in process completes
-  return NextResponse.redirect(`${requestUrl.origin}/app/today`);
+  return NextResponse.redirect(`${requestUrl.origin}/app/onboarding`);
 }

src/app/auth/sign-in/page.tsx

@@ -47,7 +47,7 @@ export default async function SignInPage() {
     data: { session },
   } = await supabase.auth.getSession();
 
-  if (session) redirect('/app/today');
+  if (session) redirect('/app/onboarding');
   /**/
 
   const baseUrl = process.env.NEXT_PUBLIC_URL;