chore: upgrade to Next.js 13

frontend/package.json

@@ -23,12 +23,12 @@
     "file-saver": "^2.0.5",
     "jose": "^4.8.1",
     "moment": "^2.29.4",
-    "next": "^12.3.1",
+    "next": "^13.0.0",
     "next-cookies": "^2.0.3",
     "next-http-proxy-middleware": "^1.2.4",
     "next-pwa": "^5.6.0",
-    "react": "18.0.0",
+    "react": "^18.2.0",
-    "react-dom": "18.0.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
     "yup": "^0.32.11"
   },
@@ -39,7 +39,7 @@
     "axios": "^0.26.1",
     "dotenv-cli": "^6.0.0",
     "eslint": "8.13.0",
-    "eslint-config-next": "12.1.5",
+    "eslint-config-next": "^13.0.0",
     "eslint-config-prettier": "^8.5.0",
     "prettier": "^2.7.1",
     "tar": "^6.1.11",

frontend/src/components/auth/AuthForm.tsx

@@ -9,8 +9,8 @@ import {
   Title,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
-import { NextLink } from "@mantine/next";
 import getConfig from "next/config";
+import Link from "next/link";
 import * as yup from "yup";
 import authService from "../../services/auth.service";
 import toast from "../../utils/toast.util";
@@ -61,7 +61,7 @@ const AuthForm = ({ mode }: { mode: "signUp" | "signIn" }) => {
             ? "You have an account already?"
             : "You don't have an account yet?"}{" "}
           <Anchor
-            component={NextLink}
+            component={Link}
             href={mode == "signUp" ? "signIn" : "signUp"}
             size="sm"
           >

frontend/src/components/navBar/ActionAvatar.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Avatar, Menu } from "@mantine/core";
-import { NextLink } from "@mantine/next";
+import Link from "next/link";
 import { TbDoorExit, TbLink } from "react-icons/tb";
 import authService from "../../services/auth.service";
 
@@ -13,7 +13,7 @@ const ActionAvatar = () => {
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item
-          component={NextLink}
+          component={Link}
           href="/account/shares"
           icon={<TbLink size={14} />}
         >

frontend/src/components/navBar/NavBar.tsx

@@ -11,8 +11,8 @@ import {
   Transition,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { NextLink } from "@mantine/next";
 import getConfig from "next/config";
+import Link from "next/link";
 import { ReactNode, useEffect, useState } from "react";
 import useUser from "../../hooks/user.hook";
 import Logo from "../Logo";
@@ -22,7 +22,7 @@ const { publicRuntimeConfig } = getConfig();
 
 const HEADER_HEIGHT = 60;
 
-type Link = {
+type NavLink = {
   link?: string;
   label?: string;
   component?: ReactNode;
@@ -122,7 +122,7 @@ const NavBar = () => {
     },
   ];
 
-  const [unauthenticatedLinks, setUnauthenticatedLinks] = useState<Link[]>([
+  const [unauthenticatedLinks, setUnauthenticatedLinks] = useState<NavLink[]>([
     {
       link: "/auth/signIn",
       label: "Sign in",
@@ -161,7 +161,7 @@ const NavBar = () => {
           );
         }
         return (
-          <NextLink
+          <Link
             key={link.label}
             href={link.link ?? ""}
             onClick={() => toggleOpened.toggle()}
@@ -170,7 +170,7 @@ const NavBar = () => {
             })}
           >
             {link.label}
-          </NextLink>
+          </Link>
         );
       })}
     </>
@@ -178,12 +178,12 @@ const NavBar = () => {
   return (
     <Header height={HEADER_HEIGHT} mb={40} className={classes.root}>
       <Container className={classes.header}>
-        <NextLink href="/">
+        <Link href="/" passHref>
           <Group>
             <Logo height={35} width={35} />
             <Text weight={600}>Pingvin Share</Text>
           </Group>
-        </NextLink>
+        </Link>
         <Group spacing={5} className={classes.links}>
           <Group>{items} </Group>
         </Group>

frontend/src/components/upload/modals/showCompletedUploadModal.tsx

@@ -10,14 +10,11 @@ import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import moment from "moment";
-import getConfig from "next/config";
 import { useRouter } from "next/router";
 import { TbCopy } from "react-icons/tb";
 import { Share } from "../../../types/share.type";
 import toast from "../../../utils/toast.util";
 
-const { publicRuntimeConfig } = getConfig();
-
 const showCompletedUploadModal = (modals: ModalsContextProps, share: Share) => {
   return modals.openModal({
     closeOnClickOutside: false,

frontend/src/pages/404.tsx

@@ -8,7 +8,7 @@ import {
   Group,
 } from "@mantine/core";
 import Meta from "../components/Meta";
-import { NextLink } from "@mantine/next";
+import Link from "next/link";
 
 const useStyles = createStyles((theme) => ({
   root: {
@@ -53,7 +53,7 @@ const ErrorNotFound = () => {
           className={classes.description}
         ></Text>
         <Group position="center">
-          <Button component={NextLink} href="/" variant="light">
+          <Button component={Link} href="/" variant="light">
             Bring me back
           </Button>
         </Group>

frontend/src/pages/account/shares.tsx

@@ -12,9 +12,8 @@ import {
 } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
-import { NextLink } from "@mantine/next";
 import moment from "moment";
-import getConfig from "next/config";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { TbLink, TbTrash } from "react-icons/tb";
@@ -24,8 +23,6 @@ import shareService from "../../services/share.service";
 import { MyShare } from "../../types/share.type";
 import toast from "../../utils/toast.util";
 
-const { publicRuntimeConfig } = getConfig();
-
 const MyShares = () => {
   const modals = useModals();
   const clipboard = useClipboard();
@@ -54,7 +51,7 @@ const MyShares = () => {
               <Title order={3}>It's empty here 👀</Title>
               <Text>You don't have any shares.</Text>
               <Space h={5} />
-              <Button component={NextLink} href="/upload" variant="light">
+              <Button component={Link} href="/upload" variant="light">
                 Create one
               </Button>
             </Stack>

frontend/src/pages/index.tsx

@@ -8,9 +8,9 @@ import {
   ThemeIcon,
   Title,
 } from "@mantine/core";
-import { NextLink } from "@mantine/next";
 import getConfig from "next/config";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { TbCheck } from "react-icons/tb";
 import Meta from "../components/Meta";
@@ -126,7 +126,7 @@ export default function Home() {
 
               <Group mt={30}>
                 <Button
-                  component={NextLink}
+                  component={Link}
                   href="/auth/signUp"
                   radius="xl"
                   size="md"
@@ -135,7 +135,7 @@ export default function Home() {
                   Get started
                 </Button>
                 <Button
-                  component={NextLink}
+                  component={Link}
                   href="https://github.com/stonith404/pingvin-share"
                   target="_blank"
                   variant="default"

frontend/src/styles/global.style.tsx

@@ -3,7 +3,7 @@ import { Global } from "@mantine/core";
 const GlobalStyle = () => {
   return (
     <Global
-      styles={(theme) => ({
+      styles={() => ({
         a: {
           color: "inherit",
           textDecoration: "none",