[WIP] Migrate /internal/assetImage to Next routing

This one is a bit trickier, because it doesn't use a page layout, and we had to make some fixes in OutfitMovieLayer! Nice to get a head-start on that though :3

pages/internal/assetImage.tsx

@@ -0,0 +1,12 @@
+import InternalAssetImagePage from "../../src/app/InternalAssetImagePage";
+import type { NextPageWithLayout } from "../_app";
+
+const InternalAssetImagePageWrapper: NextPageWithLayout = () => {
+  return <InternalAssetImagePage />;
+};
+
+InternalAssetImagePageWrapper.layoutComponent = ({ children }) => {
+  return children;
+};
+
+export default InternalAssetImagePageWrapper;

src/app/App.js

@@ -12,9 +12,6 @@ import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
 import { loadable } from "./util";
 
 const HomePage = loadable(() => import("./HomePage"));
-const InternalAssetImagePage = loadable(() =>
-  import("./InternalAssetImagePage")
-);
 const ItemSearchPage = loadable(() => import("./ItemSearchPage"));
 const ItemPage = loadable(() => import("./ItemPage"));
 const ItemTradesOfferingPage = loadable(() =>
@@ -112,9 +109,6 @@ function App() {
             <SupportPetAppearancesPage />
           </PageLayout>
         </Route>
-        <Route path="/internal/assetImage">
-          <InternalAssetImagePage />
-        </Route>
         <Route path="/">
           <PageLayout hideHomeLink>
             <HomePage />

src/app/InternalAssetImagePage.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { Box, Center } from "@chakra-ui/react";
-import { useLocation } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { Global, css } from "@emotion/react";
+import { useRouter } from "next/router";
 
 import OutfitMovieLayer from "./components/OutfitMovieLayer";
 
@@ -36,10 +36,9 @@ function InternalAssetImagePage() {
 }
 
 function InternalAssetImagePageContent() {
-  const location = useLocation();
+  const { query } = useRouter();
-  const search = new URLSearchParams(location.search);
+  const libraryUrl = query.libraryUrl;
-  const libraryUrl = search.get("libraryUrl");
+  const size = query.size ?? "600";
-  const size = search.get("size") || "600";
 
   const [movieError, setMovieError] = React.useState(null);
 

src/app/components/OutfitMovieLayer.js

@@ -7,8 +7,11 @@ import { loadImage, logAndCapture, safeImageUrl } from "../util";
 // Import EaselJS and TweenJS directly into the `window` object! The bundled
 // scripts are built to attach themselves to `window.createjs`, and
 // `window.createjs` is where the Neopets movie libraries expects to find them!
-require("imports-loader?wrapper=window!easeljs/lib/easeljs");
+// NOTE: If there's no window (e.g. SSR), we skip this step.
-require("imports-loader?wrapper=window!tweenjs/lib/tweenjs");
+if (typeof window !== "undefined") {
+  require("imports-loader?wrapper=window!easeljs/lib/easeljs");
+  require("imports-loader?wrapper=window!tweenjs/lib/tweenjs");
+}
 
 function OutfitMovieLayer({
   libraryUrl,