Static export for rails

web/next.config.mjs

@@ -1,6 +1,22 @@
 /* esline-env node */
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-};
+let nextConfig = {};
+
+if (process.env.NODE_ENV === 'production') {
+    nextConfig = {
+        output: 'export',
+        basePath: '/replay',
+        assetPrefix: '/replay',
+        env: {
+            NEXT_PUBLIC_BASE_PATH: '/replay',
+        },   
+    };
+} else {
+    nextConfig = {
+        env: {
+            NEXT_PUBLIC_BASE_PATH: ''
+        }
+    };
+}
 
 export default nextConfig;

web/src/app/api/simulations/[id]/route.ts

@@ -52,12 +52,21 @@ function sortSteps(a: any, b: any) {
   return a.step - b.step;
 }
 
+// Return a list of `params` to populate the [slug] dynamic segment
+export async function generateStaticParams() {
+  return [{id: 'skip'}];
+}
+
 export async function GET(
     request: NextRequest,
     { params }: { params: { id: string } }
 
     ) {
         const id = params.id;
+        if (id === 'skip'){
+          return Response.json([]);
+        }
+
         const fromIndex = Number(request.nextUrl.searchParams.get('fromIndex')) || 0;
 
         const [totalSteps, allSteps] = await getStepsFromRedis(id, fromIndex);

web/src/components/AgentSprite.tsx

@@ -1,30 +1,29 @@
 import React from "react";
-import Image from "next/image";
 import styles from './Agent.module.css';
 
 const AgentSprite: React.FC<{ agentName: string, isTalking: boolean, isThinking: boolean }> = ({ agentName, isTalking, isThinking }) => {
     return (
         <div className={styles.agent}>
             <div>
-                <Image 
-                    src="/images/icons/ChatCircleDots-R.png" 
+                <img 
+                    src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/ChatCircleDots-R.png`} 
                     alt="Talking" 
                     className={`${styles.leftChatIcon} ${isTalking ? '' : styles.hidden}`}
                     width={32}
                     height={32}
                 />
                 {isThinking && (
-                    <Image 
-                        src="/images/icons/lightbulb.gif" 
+                    <img 
+                        src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/lightbulb.gif` }
                         alt="Thinking" 
                         className={styles.thoughtBubbleIcon}
                         width={16}
                         height={16}
                     />
                 )}
             </div>
-            <Image 
-                src={`/images/characters/${agentName}.png`} 
+            <img
+                src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/characters/${agentName}.png`} 
                 alt={agentName} 
                 width={32}
                 height={32}

web/src/components/RenderLevel.tsx

@@ -55,7 +55,8 @@ const RenderLevel: React.FC<{simId: string}> = ({ simId }) => {
             }
         };
 
-        const interval = setInterval(fetchData, 6000);
+        fetchData();
+        const interval = setInterval(fetchData, 12000);
 
         return () => {
             isMounted = false;
@@ -104,7 +105,7 @@ const RenderLevel: React.FC<{simId: string}> = ({ simId }) => {
             <div className={styles.gameContainer}>
 
                 <Camera followAgent={followAgent} setFollowAgent={setFollowAgent}>
-                    <img src="/images/maps/Large.png" alt="Default Map" />
+                    <img src={process.env.NEXT_PUBLIC_BASE_PATH +"/images/maps/Large.png"} alt="Default Map" />
                     <>
                         {renderAgents()}
                     </>