chore: update to next 13 (#34)

* chore: update to next 13

* chore: update links

Author: agustinusnathaniel

package.json

@@ -23,11 +23,11 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fontsource/outfit": "^4.5.9",
-    "@vercel/og": "^0.0.19",
+    "@vercel/og": "^0.0.21",
     "clsx": "^1.2.1",
     "framer-motion": "^7.6.19",
     "lodash-es": "^4.17.21",
-    "next": "^12.3.4",
+    "next": "^13.0.6",
     "next-seo": "^5.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -40,12 +40,12 @@
     "@types/react": "^18.0.26",
     "commitlint": "^17.3.0",
     "eslint": "^8.29.0",
-    "eslint-config-next": "12.3.1",
+    "eslint-config-next": "13.0.6",
     "eslint-config-sznm": "^1.0.1",
     "husky": "^8.0.2",
     "lint-staged": "^13.1.0",
     "next-sitemap": "^3.1.32",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.1",
     "standard-version": "^9.5.0",
     "typescript": "^4.9.4"
   }

src/lib/pages/404/index.tsx

@@ -38,13 +38,13 @@ const Page404 = () => {
 
         <Box textAlign="center" marginTop={4}>
           <Text>It&apos;s Okay!</Text>
-          <Link href="/" passHref>
-            <Button
-              backgroundColor={colorMode === "light" ? "gray.300" : "teal.500"}
-            >
-              Let&apos;s Head Back
-            </Button>
-          </Link>
+          <Button
+            as={Link}
+            href="/"
+            backgroundColor={colorMode === "light" ? "gray.300" : "teal.500"}
+          >
+            Let&apos;s Head Back
+          </Button>
         </Box>
       </Box>
     </>

src/lib/pages/home/index.tsx

@@ -14,11 +14,9 @@ const Home = () => {
       <Text>Edge service to generate embeddable dynamic OpenGraph image</Text>
 
       <Flex justifyContent="center">
-        <Link href="/generate" passHref>
-          <Button as="a" colorScheme="teal">
-            Generate
-          </Button>
-        </Link>
+        <Button as={Link} href="/generate" colorScheme="teal">
+          Generate
+        </Button>
       </Flex>
     </Stack>
   );