refactor to build api at compile time

app/page.tsx

@@ -1,24 +1,22 @@
-"use client";
-
 import { useState, useEffect } from 'react';
 import { RogueApp } from '../lib/types';
 import styles from '../styles/Home.module.css';
 import Callout from './components/Callout';
+import { getRogueApps } from '../lib/getRogueApps';
 
-export default function Home() {
-  const [rogueApps, setRogueApps] = useState<RogueApp[]>([]);
+export async function getStaticProps() {
+  const rogueApps = getRogueApps();
+  return {
+    props: {
+      rogueApps,
+    },
+  };
+}
+
+export default function Home({ rogueApps }: { rogueApps: RogueApp[] }) {
   const [searchTerm, setSearchTerm] = useState('');
   const [expandedCard, setExpandedCard] = useState<number | null>(null);
 
-  useEffect(() => {
-    async function fetchRogueApps() {
-      const res = await fetch('/api/rogueapps');
-      const data: RogueApp[] = await res.json();
-      setRogueApps(data);
-    }
-    fetchRogueApps();
-  }, []);
-
   const filteredApps = rogueApps.filter(app =>
     app.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
     app.description.toLowerCase().includes(searchTerm.toLowerCase()) ||

lib/getRogueApps.ts

@@ -1,10 +1,9 @@
 import fs from 'fs';
 import path from 'path';
-import { RogueApp } from './types';
 
-export async function getRogueApps(): Promise<RogueApp[]> {
+export function getRogueApps() {
   const filePath = path.join(process.cwd(), 'public', 'rogueapps.json');
   const jsonData = fs.readFileSync(filePath, 'utf8');
-  const rogueApps: RogueApp[] = JSON.parse(jsonData);
+  const rogueApps = JSON.parse(jsonData);
   return rogueApps;
 }