feat: update nextjs

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
 }

app/api.ts

@@ -0,0 +1,29 @@
+
+export async function getStatbusData() {
+    const summary = await(
+      await fetch('https://statbus.psykzz.com/api/summary', {
+        next: { revalidate: 60 },
+      })
+    ).json();
+
+    // Remove this - do it later in the component itself.
+    const rounds = await Promise.all(
+      summary.rounds.map(async (roundId: number) => {
+        return roundId;
+      })
+    );
+
+    return { summary, rounds };
+  }
+
+  export async function getRoundData(roundId: number) {
+    const res = await fetch(`https://statbus.psykzz.com/api/round/${roundId}`, {
+      next: { revalidate: 60 },
+    });
+    if (!res.ok) {
+      return {};
+    }
+    const data = await res.json();
+    return data?.round ?? {};
+  }
+

app/page.tsx

@@ -1,38 +1,10 @@
 import { Round } from '../components/Round/round';
+import { getStatbusData } from './api';
 import styles from './page.module.css';
 
 const PLAY_LINK = 'byond://tgmc.tgstation13.org:5337';
 const DISCORD_LINK = 'https://discord.gg/2dFpfNE';
 
-export async function getStatbusData() {
-  const summary = await(
-    await fetch('https://statbus.psykzz.com/api/summary', {
-      next: { revalidate: 60 },
-    })
-  ).json();
-
-  // Remove this - do it later in the component itself.
-  const rounds = await Promise.all(
-    summary.rounds.map(async (roundId: number) => {
-      // const data = await getRoundData(roundId);
-      return <Round key={roundId} roundId={roundId} />;
-    })
-  );
-
-  return { summary, rounds };
-}
-
-export async function getRoundData(roundId: number) {
-  const res = await fetch(`https://statbus.psykzz.com/api/round/${roundId}`, {
-    next: { revalidate: 60 },
-  });
-  if (!res.ok) {
-    return {};
-  }
-  const data = await res.json();
-  return data?.round ?? {};
-}
-
 export default async function Home() {
   const { summary, rounds } = await getStatbusData();
 
@@ -58,7 +30,7 @@ export default async function Home() {
 
         <h2 className={styles.subtitle}>Latest rounds</h2>
 
-        <div className={styles.grid}>{rounds}</div>
+        <div className={styles.grid}>{rounds.map(roundId => <Round key={roundId} roundId={roundId} />)}</div>
       </main>
     </div>
   );

app/round/[roundId]/death/page.tsx

@@ -1,4 +1,4 @@
-import { getRoundData } from '../../../page';
+import { getRoundData } from '../../../api';
 import styles from './page.module.css';
 
 export const revalidate = 60; // revalidate this page every 60 seconds

app/round/[roundId]/layout.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
-import { getRoundData, getStatbusData } from '../../page';
 import styles from './page.module.css';
+import { getStatbusData, getRoundData } from '../../api';
 
 const PLAY_LINK = 'byond://tgmc.tgstation13.org:5337';
 const DISCORD_LINK = 'https://discord.gg/2dFpfNE';
@@ -9,12 +9,13 @@ export const revalidate = 60; // revalidate this page every 60 seconds
 
 export default async function RoundLayout({
   children,
-  params: { roundId },
+  params,
 }: {
   children: React.ReactNode;
-  params: Record<string, any>;
+  params: Promise<Record<string, any>>;
 }) {
   const { summary } = await getStatbusData();
+  const { roundId } = await params;
   const { game_mode, game_mode_result, map_name, ship_name, deaths } =
     await getRoundData(roundId);
   return (

app/round/[roundId]/pr/page.tsx

@@ -1,7 +1,7 @@
 import { Octokit } from 'octokit';
 import { cache } from 'react';
-import { getRoundData } from '../../../page';
 import styles from './page.module.css';
+import { getRoundData } from '../../../api';
 
 export const revalidate = 60; // revalidate this page every 60 seconds
 
@@ -77,15 +77,15 @@ export default async function Deaths({ params: { roundId } }: any) {
         thumbs_up: 0,
         thumbs_down: 0,
       };
-      reactions.forEach(reaction => {
+      reactions.forEach((reaction: any) => {
         if (reaction.content === '+1') {
           totalReactions.thumbs_up++;
         }
         if (reaction.content === '-1') {
           totalReactions.thumbs_down++;
         }
       });
-      allComments.forEach(comment => {
+      allComments.forEach((comment: any) => {
         totalReactions.thumbs_up += comment.reactions?.['+1'] ?? 0;
         totalReactions.thumbs_down += comment.reactions?.['-1'] ?? 0;
       });
@@ -117,7 +117,7 @@ export default async function Deaths({ params: { roundId } }: any) {
           <td>
             <a href={pullRequestUrl}>
               <ul>
-                {labels.map((label, index) => (
+                {labels.map((label: any, index: any) => (
                   <li key={index}>
                     <span title={label.description ?? ''}>{label.name}</span>
                   </li>

app/round/[roundId]/stats/page.tsx

@@ -1,4 +1,4 @@
-import { getRoundData } from '../../../page';
+import { getRoundData } from '../../../api';
 import styles from './page.module.css';
 
 export const revalidate = 60; // revalidate this page every 60 seconds

components/Round/round.tsx

@@ -1,6 +1,6 @@
 import { use } from 'react';
-import { getRoundData } from '../../app/page';
 import styles from './round.module.css';
+import { getRoundData } from '../../app/api';
 
 export const Round = ({ roundId }: { roundId: any }) => {
   const data = use(getRoundData(roundId));

next.config.js

@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    appDir: true,
-  },
-}
+const nextConfig = {}
 
 module.exports = nextConfig