Remove varianle NEXT_PUBLIC_BASE_URL

.env.example

@@ -1,3 +1,2 @@
 POSTGRES_PRISMA_URL=postgresql://postgres:1234@localhost
-POSTGRES_URL_NON_POOLING=postgresql://postgres:1234@localhost
+POSTGRES_URL_NON_POOLING=postgresql://postgres:1234@localhost
-NEXT_PUBLIC_BASE_URL=http://localhost:3000

container.env.example

@@ -4,4 +4,3 @@ POSTGRES_PASSWORD=1234
 # app
 POSTGRES_PRISMA_URL=postgresql://postgres:${POSTGRES_PASSWORD}@db
 POSTGRES_URL_NON_POOLING=postgresql://postgres:${POSTGRES_PASSWORD}@db
-NEXT_PUBLIC_BASE_URL=http://localhost:3000

src/app/groups/[groupId]/share-button.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { CopyButton } from '@/components/copy-button'
 import { ShareUrlButton } from '@/components/share-url-button'
 import { Button } from '@/components/ui/button'
@@ -7,7 +8,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import { env } from '@/lib/env'
+import { useBaseUrl } from '@/lib/hooks'
 import { Group } from '@prisma/client'
 import { Share } from 'lucide-react'
 
@@ -16,7 +17,8 @@ type Props = {
 }
 
 export function ShareButton({ group }: Props) {
-  const url = `${env.NEXT_PUBLIC_BASE_URL}/groups/${group.id}/expenses?ref=share`
+  const baseUrl = useBaseUrl()
+  const url = baseUrl && `${baseUrl}/groups/${group.id}/expenses?ref=share`
 
   return (
     <Popover>
@@ -30,14 +32,16 @@ export function ShareButton({ group }: Props) {
           For other participants to see the group and add expenses, share its
           URL with them.
         </p>
-        <div className="flex gap-2">
+        {url && (
-          <Input className="flex-1" defaultValue={url} readOnly />
+          <div className="flex gap-2">
-          <CopyButton text={url} />
+            <Input className="flex-1" defaultValue={url} readOnly />
-          <ShareUrlButton
+            <CopyButton text={url} />
-            text={`Join my group ${group.name} on Spliit`}
+            <ShareUrlButton
-            url={url}
+              text={`Join my group ${group.name} on Spliit`}
-          />
+              url={url}
-        </div>
+            />
+          </div>
+        )}
         <p>
           <strong>Warning!</strong> Every person with the group URL will be able
           to see and edit expenses. Share with caution!

src/app/layout.tsx

@@ -3,14 +3,12 @@ import { ThemeProvider } from '@/components/theme-provider'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { Button } from '@/components/ui/button'
 import { Toaster } from '@/components/ui/toaster'
-import { env } from '@/lib/env'
 import type { Metadata, Viewport } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
 import './globals.css'
 
 export const metadata: Metadata = {
-  metadataBase: new URL(env.NEXT_PUBLIC_BASE_URL),
   title: {
     default: 'Spliit · Share Expenses with Friends & Family',
     template: '%s · Spliit',

src/app/robots.ts

@@ -1,4 +1,3 @@
-import { env } from '@/lib/env'
 import { MetadataRoute } from 'next'
 
 export default function robots(): MetadataRoute.Robots {
@@ -8,6 +7,8 @@ export default function robots(): MetadataRoute.Robots {
       allow: '/',
       disallow: '/groups/',
     },
-    sitemap: `${env.NEXT_PUBLIC_BASE_URL}/sitemap.xml`,
+    sitemap: process.env.VERCEL_URL
+      ? `${process.env.VERCEL_URL}/sitemap.xml`
+      : undefined,
   }
 }

src/app/sitemap.ts

@@ -1,13 +1,14 @@
-import { env } from '@/lib/env'
 import { MetadataRoute } from 'next'
 
 export default function sitemap(): MetadataRoute.Sitemap {
-  return [
+  return process.env.VERCEL_URL
-    {
+    ? [
-      url: env.NEXT_PUBLIC_BASE_URL,
+        {
-      lastModified: new Date(),
+          url: process.env.VERCEL_URL,
-      changeFrequency: 'yearly',
+          lastModified: new Date(),
-      priority: 1,
+          changeFrequency: 'yearly',
-    },
+          priority: 1,
-  ]
+        },
+      ]
+    : []
 }

src/lib/env.ts

@@ -1,7 +1,6 @@
 import { z } from 'zod'
 
 const envSchema = z.object({
-  NEXT_PUBLIC_BASE_URL: z.string().url(),
   POSTGRES_URL_NON_POOLING: z.string().url(),
   POSTGRES_PRISMA_URL: z.string().url(),
 })

src/lib/hooks.ts

@@ -40,3 +40,11 @@ export function useMediaQuery(query: string): boolean {
 
   return matches
 }
+
+export function useBaseUrl() {
+  const [baseUrl, setBaseUrl] = useState<string | null>(null)
+  useEffect(() => {
+    setBaseUrl(window.location.origin)
+  }, [])
+  return baseUrl
+}