diff --git a/pages/internal/assetImage.tsx b/pages/internal/assetImage.tsx
new file mode 100644
index 0000000..7c92c17
--- /dev/null
+++ b/pages/internal/assetImage.tsx
@@ -0,0 +1,12 @@
+import InternalAssetImagePage from "../../src/app/InternalAssetImagePage";
+import type { NextPageWithLayout } from "../_app";
+
+const InternalAssetImagePageWrapper: NextPageWithLayout = () => {
+ return ;
+};
+
+InternalAssetImagePageWrapper.layoutComponent = ({ children }) => {
+ return children;
+};
+
+export default InternalAssetImagePageWrapper;
diff --git a/src/app/App.js b/src/app/App.js
index 00e60f0..5b0baa3 100644
--- a/src/app/App.js
+++ b/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() {
-
-
-
diff --git a/src/app/InternalAssetImagePage.js b/src/app/InternalAssetImagePage.js
index c9db2b8..d37caee 100644
--- a/src/app/InternalAssetImagePage.js
+++ b/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 search = new URLSearchParams(location.search);
- const libraryUrl = search.get("libraryUrl");
- const size = search.get("size") || "600";
+ const { query } = useRouter();
+ const libraryUrl = query.libraryUrl;
+ const size = query.size ?? "600";
const [movieError, setMovieError] = React.useState(null);
diff --git a/src/app/components/OutfitMovieLayer.js b/src/app/components/OutfitMovieLayer.js
index 07a2911..ac8c06e 100644
--- a/src/app/components/OutfitMovieLayer.js
+++ b/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");
-require("imports-loader?wrapper=window!tweenjs/lib/tweenjs");
+// NOTE: If there's no window (e.g. SSR), we skip this step.
+if (typeof window !== "undefined") {
+ require("imports-loader?wrapper=window!easeljs/lib/easeljs");
+ require("imports-loader?wrapper=window!tweenjs/lib/tweenjs");
+}
function OutfitMovieLayer({
libraryUrl,