Port to Next.js 15

ruffle-rs · Nov 13, 2024 · 6fc34dd · 6fc34dd
1 parent 801c0cb
commit 6fc34dd
Show file tree

Hide file tree

Showing 8 changed files with 698 additions and 473 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,9 +12,9 @@
     "@mantine/charts": "^7.14.0",
     "@mantine/core": "7.14.0",
     "@mantine/hooks": "7.14.0",
-    "@next/bundle-analyzer": "^14.2.15",
+    "@next/bundle-analyzer": "15.0.3",
     "@tabler/icons-react": "^3.22.0",
-    "next": "14.2.15",
+    "next": "15.0.3",
     "node-html-parser": "^6.1.13",
     "react": "^18",
     "react-device-detect": "^2.2.3",
@@ -31,7 +31,7 @@
     "@typescript-eslint/parser": "^8.14.0",
     "d3": "^7.9.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.15",
+    "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "feed": "^4.2.2",
     "gray-matter": "^4.0.3",

diff --git a/src/app/blog/[year]/[month]/[day]/[slug]/page.tsx b/src/app/blog/[year]/[month]/[day]/[slug]/page.tsx
@@ -3,11 +3,10 @@ import { Container } from "@mantine/core";
 import { BlogPost } from "@/app/blog/post";
 import { Metadata } from "next";
 
-export async function generateMetadata({
-  params,
-}: {
-  params: PostPath;
+export async function generateMetadata(props: {
+  params: Promise<PostPath>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const post = getPostData(
     `${params.year}-${params.month}-${params.day}-${params.slug}.markdown`,
   );
@@ -28,7 +27,8 @@ export async function generateMetadata({
   };
 }
 
-export default function Page({ params }: { params: PostPath }) {
+export default async function Page(props: { params: Promise<PostPath> }) {
+  const params = await props.params;
   const post = getPostData(
     `${params.year}-${params.month}-${params.day}-${params.slug}.markdown`,
   );

diff --git a/src/app/compatibility/avm2/tree.svg/route.tsx b/src/app/compatibility/avm2/tree.svg/route.tsx
@@ -222,3 +222,5 @@ export async function GET() {
     },
   });
 }
+
+export const dynamic = "force-static";
diff --git a/src/app/feed.xml/route.tsx b/src/app/feed.xml/route.tsx
@@ -34,3 +34,5 @@ export async function GET() {
     },
   });
 }
+
+export const dynamic = "force-static";
diff --git a/src/app/installers.tsx b/src/app/installers.tsx
@@ -4,7 +4,7 @@ import { Icon, IconBrandJavascript, IconList } from "@tabler/icons-react";
 import React from "react";
 import { useDeviceSelectors } from "react-device-detect";
 import classes from "./index.module.css";
-import { Button, Group } from "@mantine/core";
+import { Button, Container, Group, Loader } from "@mantine/core";
 import Link from "next/link";
 import { allLinks, CurrentDevice, GithubRelease } from "@/app/downloads/config";
 
@@ -17,10 +17,20 @@ interface RecommendedDownload {
 }
 
 export default function Installers({
+  loading,
   release,
 }: {
+  loading: boolean;
   release: GithubRelease | null;
 }) {
+  if (loading) {
+    return (
+      <Container size="xl" className={classes.container}>
+        <Loader />
+      </Container>
+    );
+  }
+
   const [selectors] = useDeviceSelectors(window.navigator.userAgent);
   const recommended: RecommendedDownload[] = [];
   const currentDevice: CurrentDevice = {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -30,7 +30,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <ColorSchemeScript />
         {/*<link rel="shortcut icon" href="/favicon.svg" />*/}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import dynamic from "next/dynamic";
 import classes from "./index.module.css";
 import {
@@ -13,6 +15,7 @@ import Image from "next/image";
 import { IconCheck } from "@tabler/icons-react";
 import React from "react";
 import { getLatestReleases } from "@/app/downloads/github";
+import { GithubRelease } from "./downloads/config";
 
 const InteractiveLogo = dynamic(() => import("../components/logo"), {
   ssr: false,
@@ -22,9 +25,23 @@ const Installers = dynamic(() => import("./installers"), {
   ssr: false,
 });
 
-export default async function Home() {
-  const releases = await getLatestReleases();
-  const latest = releases.length > 0 ? releases[0] : null;
+export default function Home() {
+  const [latest, setLatest] = React.useState<GithubRelease | null>(null);
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    const fetchReleases = async () => {
+      try {
+        const releases = await getLatestReleases();
+        setLatest(releases.length > 0 ? releases[0] : null);
+      } catch (err) {
+        console.warn("Failed to fetch releases", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchReleases();
+  }, []);
 
   return (
     <Container size="xl" className={classes.container}>
@@ -79,7 +96,7 @@ export default async function Home() {
               </ListItem>
             </List>
 
-            <Installers release={latest} />
+            <Installers loading={loading} release={latest} />
           </div>
         </div>
       </Container>