[bot] Run grit migration: Upgrade to Next.js 13

package.json

@@ -1,75 +1,75 @@
 {
-	"name": "rdamn",
-	"private": true,
-	"scripts": {
-		"dev": "next dev",
-		"build": "next build",
-		"start": "next start",
-		"lint": "next lint",
-		"buildDocs": "npx typedoc"
-	},
-	"dependencies": {
-		"@auth0/nextjs-auth0": "^1.7.0",
-		"@aws-sdk/client-ec2": "^3.54.0",
-		"@aws-sdk/client-ecs": "^3.54.0",
-		"@aws-sdk/client-s3": "^3.54.0",
-		"@aws-sdk/s3-request-presigner": "^3.54.0",
-		"@headlessui/react": "^1.5.0",
-		"@monaco-editor/react": "^4.3.1",
-		"@szhsin/react-menu": "^3.0.0",
-		"ajv": "^8.10.0",
-		"daisyui": "^2.8.0",
-		"file-extension-icon-js": "^1.1.3",
-		"ioredis": "^4.28.5",
-		"monaco-editor": "^0.33.0",
-		"mongoose": "^6.2.6",
-		"nanoid": "^3.3.1",
-		"next": "^12.1.0",
-		"nextjs-progressbar": "^0.0.14",
-		"node-abort-controller": "^3.0.1",
-		"object-path": "^0.11.8",
-		"object-path-immutable": "^4.1.2",
-		"random-word-slugs": "^0.1.6",
-		"react": "17.0.2",
-		"react-dom": "17.0.2",
-		"react-hot-toast": "^2.2.0",
-		"react-reflex": "^4.0.6",
-		"react-use-websocket": "^3.0.0",
-		"reconnecting-websocket": "^4.4.0",
-		"swr": "^1.2.2",
-		"tailwind-scrollbar-hide": "^1.1.7",
-		"thenby": "^1.3.4",
-		"xterm": "^4.18.0",
-		"xterm-addon-fit": "^0.5.0",
-		"xterm-addon-web-links": "^0.5.1"
-	},
-	"devDependencies": {
-		"@next/eslint-plugin-next": "^12.1.0",
-		"@types/ioredis": "^4.28.8",
-		"@types/node": "^17.0.21",
-		"@types/object-path": "^0.11.1",
-		"@types/react": "^17.0.40",
-		"@typescript-eslint/eslint-plugin": "^5.15.0",
-		"@typescript-eslint/parser": "^5.15.0",
-		"autoprefixer": "^10.4.2",
-		"eslint": "^8.11.0",
-		"eslint-config-next": "^12.1.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-react": "^7.29.4",
-		"import-sort-style-module": "^6.0.0",
-		"postcss": "^8.4.8",
-		"prettier": "^2.5.1",
-		"prettier-plugin-import-sort": "^0.0.7",
-		"tailwindcss": "^3.0.23",
-		"typedoc": "^0.22.13",
-		"typedoc-theme-hierarchy": "^1.0.14",
-		"typescript": "^4.6.2"
-	},
-	"importSort": {
-		".js, .jsx, .ts, .tsx": {
-			"style": "module",
-			"parser": "typescript"
-		}
-	}
-}
+  "name": "rdamn",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "buildDocs": "npx typedoc"
+  },
+  "dependencies": {
+    "@auth0/nextjs-auth0": "^1.7.0",
+    "@aws-sdk/client-ec2": "^3.54.0",
+    "@aws-sdk/client-ecs": "^3.54.0",
+    "@aws-sdk/client-s3": "^3.54.0",
+    "@aws-sdk/s3-request-presigner": "^3.54.0",
+    "@headlessui/react": "^1.5.0",
+    "@monaco-editor/react": "^4.3.1",
+    "@szhsin/react-menu": "^3.0.0",
+    "ajv": "^8.10.0",
+    "daisyui": "^2.8.0",
+    "file-extension-icon-js": "^1.1.3",
+    "ioredis": "^4.28.5",
+    "monaco-editor": "^0.33.0",
+    "mongoose": "^6.2.6",
+    "nanoid": "^3.3.1",
+    "next": "^13.4.18",
+    "nextjs-progressbar": "^0.0.14",
+    "node-abort-controller": "^3.0.1",
+    "object-path": "^0.11.8",
+    "object-path-immutable": "^4.1.2",
+    "random-word-slugs": "^0.1.6",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-hot-toast": "^2.2.0",
+    "react-reflex": "^4.0.6",
+    "react-use-websocket": "^3.0.0",
+    "reconnecting-websocket": "^4.4.0",
+    "swr": "^1.2.2",
+    "tailwind-scrollbar-hide": "^1.1.7",
+    "thenby": "^1.3.4",
+    "xterm": "^4.18.0",
+    "xterm-addon-fit": "^0.5.0",
+    "xterm-addon-web-links": "^0.5.1"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "^12.1.0",
+    "@types/ioredis": "^4.28.8",
+    "@types/node": "^17.0.21",
+    "@types/object-path": "^0.11.1",
+    "@types/react": "^17.0.40",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "autoprefixer": "^10.4.2",
+    "eslint": "^8.11.0",
+    "eslint-config-next": "^12.1.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "import-sort-style-module": "^6.0.0",
+    "postcss": "^8.4.8",
+    "prettier": "^2.5.1",
+    "prettier-plugin-import-sort": "^0.0.7",
+    "tailwindcss": "^3.0.23",
+    "typedoc": "^0.22.13",
+    "typedoc-theme-hierarchy": "^1.0.14",
+    "typescript": "^4.6.2"
+  },
+  "importSort": {
+    ".js, .jsx, .ts, .tsx": {
+      "style": "module",
+      "parser": "typescript"
+    }
+  }
+}

src/components/AuthCheck/index.tsx

@@ -1,34 +1,35 @@
+
+import { useRouter } from "next/navigation";
 /* Copyright (c) rishabhrao (https://github.com/rishabhrao) */
 
-import { UserProfile } from "@auth0/nextjs-auth0"
-import Spinner from "@components/Spinner"
-import { useRouter } from "next/router"
+import { UserProfile } from "@auth0/nextjs-auth0";
+import Spinner from "@components/Spinner";
 
 /**
  * Shape of properties provided to the AuthCheck component
  *
  * @export
  */
 export type AuthCheckPropsType = {
-	/**
-	 * JSX element to be rendered if AuthCheck passes
-	 *
-	 * @type {JSX.Element}
-	 */
-	children: JSX.Element
-	/**
-	 * Auth0 User object
-	 *
-	 * @type {UserProfile | undefined}
-	 */
-	authUser: UserProfile | undefined
-	/**
-	 * Whether Auth0 is loading
-	 *
-	 * @type {boolean}
-	 */
-	isAuthLoading: boolean
-}
+    /**
+     * JSX element to be rendered if AuthCheck passes
+     *
+     * @type {JSX.Element}
+     */
+    children: JSX.Element;
+    /**
+     * Auth0 User object
+     *
+     * @type {UserProfile | undefined}
+     */
+    authUser: UserProfile | undefined;
+    /**
+     * Whether Auth0 is loading
+     *
+     * @type {boolean}
+     */
+    isAuthLoading: boolean;
+};
 
 /**
  * An Auth Check component to allow only the users who are logged in to access a page or view an element
@@ -44,17 +45,20 @@ export type AuthCheckPropsType = {
  * ```
  */
 const AuthCheck = (props: AuthCheckPropsType): JSX.Element => {
-	const { children, authUser, isAuthLoading } = props
-	const router = useRouter()
+    const { children, authUser, isAuthLoading } = props;
+    const router = useRouter();
+
+    if (isAuthLoading)
+        return <Spinner isFullScreen/>;
 
-	if (isAuthLoading) return <Spinner isFullScreen />
+    if (!authUser) {
+        const router = useRouter();
+ void router.push("/api/auth/login?returnTo=/playgrounds");
+        return <Spinner isFullScreen/>;
+    }
 
-	if (!authUser) {
-		void router.push("/api/auth/login?returnTo=/playgrounds")
-		return <Spinner isFullScreen />
-	}
+    return children;
+};
 
-	return children
-}
+export default AuthCheck;
 
-export default AuthCheck

src/components/FileExplorer/index.tsx

@@ -5,7 +5,7 @@ import "@szhsin/react-menu/dist/theme-dark.css"
 
 import { ControlledMenu, MenuItem, useMenuState } from "@szhsin/react-menu"
 import AjvJtd, { JTDParser, JTDSchemaType } from "ajv/dist/jtd"
-import Image from "next/image"
+import LegacyImage from "next/legacy/image"
 import objectPath from "object-path"
 import * as objectPathImmutable from "object-path-immutable"
 import { Dispatch, Fragment, SetStateAction, useEffect, useMemo, useState } from "react"
@@ -492,7 +492,7 @@ const FileExplorer = (props: FileExplorerPropsType): JSX.Element => {
 										</div>
 
 										<div className="flex min-w-fit mr-1.5" onClick={() => sendCrudSocketMessage(serializeCrudClientToServerEvent({ command: "readFile", filePath: item.path }))}>
-											<Image src={getMaterialFolderIcon(item.name)} alt={item.path} width={18} height={18} />
+											<LegacyImage src={getMaterialFolderIcon(item.name)} alt={item.path} width={18} height={18} />
 										</div>
 
 										<p className="flex-grow overflow-hidden select-none text text-ellipsis opacity-80">{item.name}</p>
@@ -520,7 +520,7 @@ const FileExplorer = (props: FileExplorerPropsType): JSX.Element => {
 									}}
 								>
 									<div className="flex min-w-fit mr-1.5" onClick={() => sendCrudSocketMessage(serializeCrudClientToServerEvent({ command: "readFile", filePath: item.path }))}>
-										<Image src={getMaterialFileIcon(item.name)} alt={item.path} width={18} height={18} />
+										<LegacyImage src={getMaterialFileIcon(item.name)} alt={item.path} width={18} height={18} />
 									</div>
 
 									<p

src/pages/404.tsx

@@ -1,22 +1,23 @@
+import { Metadata } from "next";
+import { useRouter } from "next/navigation";
 /* Copyright (c) rishabhrao (https://github.com/rishabhrao) */
 
-import type { NextPage } from "next"
-import Head from "next/head"
-import { useRouter } from "next/router"
-import { useEffect } from "react"
+import type { NextPage } from "next";
+import { useEffect } from "react";
+export const metadata: Metadata = {
+    title: `404 - rdamn`,
+};
 
 const Home: NextPage = () => {
-	const router = useRouter()
+    const router = useRouter();
 
-	useEffect(() => {
-		void router.push("/")
-	}, [router])
+    useEffect(() => {
+        void router.push("/");
+    }, [router]);
+
+    return ();
+};
+
+export default Home;
 
-	return (
-		<Head>
-			<title>404 - rdamn</title>
-		</Head>
-	)
-}
 
-export default Home

src/pages/_app.tsx

@@ -1,7 +1,7 @@
 /* Copyright (c) rishabhrao (https://github.com/rishabhrao) */
 
-import "tailwindcss/tailwind.css"
 import "@styles/globals.css"
+import "tailwindcss/tailwind.css"
 
 import { UserProvider } from "@auth0/nextjs-auth0"
 import type { AppProps } from "next/app"