Migrated project from pages to app router

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -17,8 +17,7 @@ const config = {
   webpack: config => {
     config.resolve.fallback = { fs: false };
     config.output.webassemblyModuleFilename = "static/wasm/[modulehash].wasm";
-    config.experiments = { asyncWebAssembly: true };
-
+    config.experiments = { asyncWebAssembly: true, layers: true };
     return config;
   },
 };

package.json

@@ -14,20 +14,21 @@
     "analyze": "ANALYZE=true npm run build"
   },
   "dependencies": {
-    "@mantine/code-highlight": "^7.4.2",
-    "@mantine/core": "^7.4.2",
-    "@mantine/hooks": "^7.4.2",
+    "@mantine/code-highlight": "^7.4.1",
+    "@mantine/core": "^7.4.1",
+    "@mantine/hooks": "^7.4.1",
     "@monaco-editor/react": "^4.6.0",
     "@sentry/nextjs": "^7.94.1",
     "@supabase/auth-helpers-nextjs": "^0.8.7",
     "@supabase/auth-helpers-react": "^0.4.2",
     "@supabase/supabase-js": "^2.39.3",
     "@tanstack/react-query": "^4.36.1",
-    "allotment": "^1.20.0",
+    "allotment": "^1.19.5",
     "axios": "^1.6.5",
     "dayjs": "^1.11.10",
     "gofmt.js": "^0.0.2",
     "html-to-image": "^1.11.11",
+    "impl": "^1.3.0",
     "jq-in-the-browser": "^0.7.2",
     "jq-web": "^0.5.1",
     "js-yaml": "^4.1.0",
@@ -36,14 +37,15 @@
     "jsonc-parser": "^3.2.0",
     "jsonwebtoken": "^9.0.2",
     "jxon": "^2.0.0-beta.5",
+    "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "lodash.unset": "^4.5.2",
     "lodash.update": "^4.10.2",
     "maketypes": "^1.1.2",
     "million": "^2.6.4",
-    "next": "14.1.0",
+    "next": "13.5.6",
     "pako": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -58,7 +60,7 @@
     "styled-components": "^6.1.8",
     "toml": "^3.0.0",
     "use-long-press": "^3.2.0",
-    "zustand": "^4.5.0"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^14.1.0",
@@ -71,16 +73,16 @@
     "@types/lodash.set": "^4.3.9",
     "@types/lodash.unset": "^4.5.9",
     "@types/lodash.update": "^4.10.9",
-    "@types/node": "^20.11.5",
+    "@types/node": "^20.4.7",
     "@types/pako": "^2.0.3",
-    "@types/react": "18.2.48",
+    "@types/react": "18.2.45",
     "@types/react-dom": "^18.2.18",
     "eslint": "8.56.0",
-    "eslint-config-next": "14.1.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-next": "14.0.4",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.2",
     "ts-node": "^10.9.2",
     "typescript": "5.3.3"
   }

src/pages/404.tsx → src/app/404/page.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import React from "react";
 import Head from "next/head";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { Button, Text, Title } from "@mantine/core";
 import styled from "styled-components";
 import Layout from "src/layout/Layout";
@@ -32,7 +34,7 @@ const StyledImageWrapper = styled.div`
 `;
 
 const NotFound: React.FC = () => {
-  const router = useRouter();
+  const { push } = useRouter();
 
   return (
     <Layout>
@@ -45,7 +47,7 @@ const NotFound: React.FC = () => {
         </StyledImageWrapper>
         <Title c="dark">WIZARDS BEHIND CURTAINS?</Title>
         <Text c="dark">Looks like you&apos;re lost, let&apos;s head back to the home!</Text>
-        <Button mt="lg" size="lg" type="button" onClick={() => router.push("/")}>
+        <Button mt="lg" size="lg" type="button" onClick={() => push("/")}>
           Go Home
         </Button>
       </StyledNotFound>