From da33e3bea6a2507da6f995d5ecdfd47ba678f72f Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 3 May 2023 16:09:32 +0200
Subject: [PATCH] chore: navigate with router

---
 apps/www/components/Hero.tsx | 58 ++++++++++++++++++------------------
 apps/www/lib/constants.ts    |  2 +-
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/apps/www/components/Hero.tsx b/apps/www/components/Hero.tsx
index 5557da55251..53df050350e 100644
--- a/apps/www/components/Hero.tsx
+++ b/apps/www/components/Hero.tsx
@@ -7,11 +7,12 @@ import gaEvents from '~/lib/gaEvents'
 import useGoogleAnalyticsProps from '~/hooks/useGoogleAnalyticsProps'
 
 const Hero = () => {
-  const { basePath } = useRouter()
+  const router = useRouter()
   const googleAnalyticsProps = useGoogleAnalyticsProps()
 
-  const handleClick = (event: GoogleAnalyticsEvent) => {
+  const trackAndNavigate = (url: string, event: GoogleAnalyticsEvent) => {
     Telemetry.sendEvent(event, googleAnalyticsProps)
+    router.push(url)
   }
 
   return (
@@ -47,29 +48,28 @@ const Hero = () => {
                       </div>
                     </div>
                     <div className="flex items-center gap-2">
-                      <Link href="https://app.supabase.com" as="https://app.supabase.com" passHref>
-                        <a>
-                          <Button
-                            size="small"
-                            className="text-white"
-                            onClick={() => handleClick(gaEvents['www_hp_hero_startProject'])}
-                          >
-                            Start your project
-                          </Button>
-                        </a>
-                      </Link>
-                      <Link href="/docs" as="/docs" passHref>
-                        <a>
-                          <Button
-                            size="small"
-                            type="default"
-                            icon={<IconBookOpen />}
-                            onClick={() => handleClick(gaEvents['www_hp_hero_documentation'])}
-                          >
-                            Documentation
-                          </Button>
-                        </a>
-                      </Link>
+                      <Button
+                        size="small"
+                        className="text-white"
+                        onClick={() =>
+                          trackAndNavigate(
+                            'https://app.supabase.com',
+                            gaEvents['www_hp_hero_startProject']
+                          )
+                        }
+                      >
+                        Start your project
+                      </Button>
+                      <Button
+                        size="small"
+                        type="default"
+                        icon={<IconBookOpen />}
+                        onClick={() =>
+                          trackAndNavigate('/docs', gaEvents['www_hp_hero_documentation'])
+                        }
+                      >
+                        Documentation
+                      </Button>
                     </div>
                     <div className="flex flex-col gap-4">
                       <small className="small text-xs">backed by</small>
@@ -77,22 +77,22 @@ const Hero = () => {
                         <div className="flex flex-wrap items-center justify-start gap-y-8 sm:flex-nowrap">
                           <img
                             className="h-8 pr-5 sm:h-8 md:pr-10"
-                            src={`${basePath}/images/logos/yc--grey.png`}
+                            src={`${router.basePath}/images/logos/yc--grey.png`}
                             alt="Y Combinator"
                           />
                           <img
                             className="relative h-5 pr-5 sm:h-5 md:pr-10"
-                            src={`${basePath}/images/logos/mozilla--grey.png`}
+                            src={`${router.basePath}/images/logos/mozilla--grey.png`}
                             alt="Mozilla"
                           />
                           <img
                             className="relative h-5 pr-5 sm:h-5 md:pr-10"
-                            src={`${basePath}/images/logos/coatue.png`}
+                            src={`${router.basePath}/images/logos/coatue.png`}
                             alt="Coatue"
                           />
                           <img
                             className="relative h-6 pr-5 sm:h-6 md:pr-10"
-                            src={`${basePath}/images/logos/felicis.png`}
+                            src={`${router.basePath}/images/logos/felicis.png`}
                             alt="Felicis"
                           />
                         </div>
diff --git a/apps/www/lib/constants.ts b/apps/www/lib/constants.ts
index 1b7537a438d..5586bb59f81 100644
--- a/apps/www/lib/constants.ts
+++ b/apps/www/lib/constants.ts
@@ -1,7 +1,7 @@
 export const APP_NAME = 'Supabase'
 export const DESCRIPTION = 'The Open Source Alternative to Firebase.'
 export const IS_PROD = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
-export const API_URL = !IS_PROD ? process.env.NEXT_PUBLIC_API_URL : '/api'
+export const API_URL = IS_PROD ? process.env.NEXT_PUBLIC_API_URL : '/api'
 
 // Launch Weeek
 export const SAMPLE_TICKET_NUMBER = 1234