condition env variables for host

app/tournois/page.tsx

@@ -1,9 +1,11 @@
+import { Tournament } from "@/types";
+
 import dynamic from "next/dynamic";
 import Layout from "@/components/Layout";
 import TournamentTable from "@/components/TournamentTable";
+import getTournaments from "@/utils/getTournamentData";
 
-const server = process.env.SERVER;
+// TODO can these functions be put into a custom hook?
-
 /**
  * Imports the tournament map component, ensuring CSR only.
  * @remarks SSR is not supported by react-leaflet
@@ -18,17 +20,7 @@ const TournamentMap = dynamic(() => import("@/components/TournamentMap"), {
 });
 
 export default async function Tournaments() {
-  /**
+  const tournamentData = await getTournaments("france");
-   * Retrieves tournament data from /api/tournaments/:country
-   * @remarks The result is cached for the revalidation period in seconds
-   */
-  const res = await fetch(`${server}/api/tournaments/france`, {
-    next: { revalidate: 300 },
-  });
-  if (res.status !== 200) {
-    throw new Error("Failed to fetch tournament data");
-  }
-  const tournamentData = await res.json();
 
   return (
     <Layout>

next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  env: {
+    SERVER: process.env.SERVER,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

utils/getTournamentData.tsx

@@ -3,11 +3,11 @@
  * @remarks The result is cached for the revalidation period in seconds
  */
 export default async function getTournaments(country: string) {
-  const baseUrl =
+  const server = process.env.NEXT_PUBLIC_VERCEL_URL
-    process.env.NODE_ENV === "production"
+    ? process.env.NEXT_PUBLIC_VERCEL_URL
-      ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+    : process.env.SERVER;
-      : "http://localhost:3000";
+
-  const res = await fetch(`${baseUrl}/api/tournaments/${country}`, {
+  const res = await fetch(`${server}/api/tournaments/${country}`, {
     next: { revalidate: 300 },
   });