Fix static site generation for each skybox

Author: Jacobdeanr

app/skybox/[slug]/page.tsx

@@ -1,33 +1,23 @@
-import fs from 'fs';
+import { use } from 'react';
+import fs   from 'fs';
 import path from 'path';
 import SkyboxClient from './skybox-client';
 
-// This function runs at build time to generate all possible paths
 export async function generateStaticParams() {
-  const allPath = path.join(process.cwd(), 'public', 'data', 'index.json');
-  const allData = JSON.parse(fs.readFileSync(allPath, 'utf8'));
-  return Object.keys(allData).map((slug) => ({
-    slug: slug.toString()
-  }));
+  const listPath = path.join(process.cwd(), 'public', 'data', 'index.json');
+  const list     = JSON.parse(fs.readFileSync(listPath, 'utf8')) as Record<string, any>;
+  return Object.keys(list).map((slug) => ({ slug }));
 }
 
-async function getSkyboxData(slug: string) {
-  const dataPath = path.join(process.cwd(), 'public', 'data', `${slug}.json`);
-  const fileContents = await fs.promises.readFile(dataPath, 'utf8');
-  return JSON.parse(fileContents);
-}
-
-export default async function Page({
-  params,
+export default function Page({
+  params,                 // 👈 promise!
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }) {
-  const { slug } = params;
-  const skyboxData = await getSkyboxData(slug);
-  
-  if (!skyboxData) {
-    return <div>Skybox not found</div>;
-  }
-  
+  const { slug } = use(params);            // unwrap
+
+  const dataPath   = path.join(process.cwd(), 'public', 'data', `${slug}.json`);
+  const skyboxData = JSON.parse(fs.readFileSync(dataPath, 'utf8'));
+
   return <SkyboxClient slug={slug} skyboxData={skyboxData} />;
 }