Update nextjs.

components/DeployEditor.tsx

@@ -94,7 +94,7 @@ const DeployEditor = () => {
       }}
     >
       {`You haven't compiled any files yet, compile files on `}
-      <NextLink shallow href={`/develop/${router.query.slug}`} passHref>
+      <NextLink legacyBehavior shallow href={`/develop/${router.query.slug}`} passHref>
         <Link as="a">develop view</Link>
       </NextLink>
     </Text>

components/EditorNavigation.tsx

@@ -155,9 +155,11 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
                 >
                   <Image
                     src={session?.user?.image || ''}
-                    width="30px"
-                    height="30px"
-                    objectFit="cover"
+                    width="30"
+                    height="30"
+                    style={{
+                      objectFit: 'cover'
+                    }}
                     alt="User avatar"
                   />
                 </Box>

components/LogBox.tsx

@@ -160,7 +160,7 @@ export const Log: FC<ILog> = ({
         )}
         <Pre>{message}</Pre>
         {link && (
-          <NextLink href={link} shallow passHref>
+          <NextLink legacyBehavior href={link} shallow passHref>
             <Link as="a">{linkText}</Link>
           </NextLink>
         )}

components/Navigation.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from 'next/link'
+import NextLink from 'next/link'
 
 import { useSnapshot } from 'valtio'
 import { useRouter } from 'next/router'
@@ -78,7 +78,7 @@ const Navigation = () => {
             pr: '$4'
           }}
         >
-          <Link href={gistId ? `/develop/${gistId}` : '/develop'} passHref>
+          <NextLink legacyBehavior href={gistId ? `/develop/${gistId}` : '/develop'} passHref>
             <Box
               as="a"
               css={{
@@ -89,7 +89,7 @@ const Navigation = () => {
             >
               <Logo width="32px" height="32px" />
             </Box>
-          </Link>
+          </NextLink>
           <Flex
             css={{
               ml: '$5',
@@ -105,7 +105,8 @@ const Navigation = () => {
                 <Text css={{ fontSize: '$xs', color: '$mauve10', lineHeight: 1 }}>
                   {snap.files.length > 0 ? 'Gist: ' : 'Builder'}
                   {snap.files.length > 0 && (
-                    <Link
+                    <NextLink
+                      legacyBehavior
                       href={`https://gist.github.com/${snap.gistOwner || ''}/${snap.gistId || ''}`}
                       passHref
                     >
@@ -117,7 +118,7 @@ const Navigation = () => {
                       >
                         {`${snap.gistOwner || '-'}/${truncate(snap.gistId || '')}`}
                       </Text>
-                    </Link>
+                    </NextLink>
                   )}
                 </Text>
               </>
@@ -336,29 +337,39 @@ const Navigation = () => {
             }}
           >
             <ButtonGroup>
-              <Link href={gistId ? `/develop/${gistId}` : '/develop'} passHref shallow>
+              <NextLink
+                legacyBehavior
+                href={gistId ? `/develop/${gistId}` : '/develop'}
+                passHref
+                shallow
+              >
                 <Button as="a" outline={!router.pathname.includes('/develop')} uppercase>
                   Develop
                 </Button>
-              </Link>
-              <Link href={gistId ? `/deploy/${gistId}` : '/deploy'} passHref shallow>
+              </NextLink>
+              <NextLink
+                legacyBehavior
+                href={gistId ? `/deploy/${gistId}` : '/deploy'}
+                passHref
+                shallow
+              >
                 <Button as="a" outline={!router.pathname.includes('/deploy')} uppercase>
                   Deploy
                 </Button>
-              </Link>
-              <Link href={gistId ? `/test/${gistId}` : '/test'} passHref shallow>
+              </NextLink>
+              <NextLink legacyBehavior href={gistId ? `/test/${gistId}` : '/test'} passHref shallow>
                 <Button as="a" outline={!router.pathname.includes('/test')} uppercase>
                   Test
                 </Button>
-              </Link>
+              </NextLink>
             </ButtonGroup>
-            <Link href="https://xrpl-hooks.readme.io/v2.0" passHref>
+            <NextLink legacyBehavior href="https://xrpl-hooks.readme.io/v2.0" passHref>
               <a target="_blank" rel="noreferrer noopener">
                 <Button outline>
                   <BookOpen size="15px" />
                 </Button>
               </a>
-            </Link>
+            </NextLink>
           </Stack>
         </Flex>
       </Container>

middleware.ts

@@ -1,7 +1,7 @@
-import type { NextRequest, NextFetchEvent } from 'next/server'
+import type { NextRequest } from 'next/server'
 import { NextResponse as Response } from 'next/server'
 
-export default function middleware(req: NextRequest, ev: NextFetchEvent) {
+export default function middleware(req: NextRequest) {
   if (req.nextUrl.pathname === '/') {
     const url = req.nextUrl.clone()
     url.pathname = '/develop'

package.json

@@ -37,7 +37,7 @@
     "lodash.uniqby": "^4.7.0",
     "lodash.xor": "^4.5.0",
     "monaco-editor": "^0.33.0",
-    "next": "^12.0.4",
+    "next": "^13.1.1",
     "next-auth": "^4.10.3",
     "next-plausible": "^3.2.0",
     "next-themes": "^0.1.1",
@@ -49,8 +49,8 @@
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
     "re-resizable": "^6.9.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.28.0",
     "react-hot-keys": "^2.7.1",
     "react-hot-toast": "^2.1.1",
@@ -77,7 +77,7 @@
     "@types/pako": "^1.0.2",
     "@types/react": "17.0.31",
     "eslint": "7.32.0",
-    "eslint-config-next": "11.1.2",
+    "eslint-config-next": "^13.1.1",
     "raw-loader": "^4.0.2",
     "typescript": "4.4.4"
   },