build: Update to Next 13

.github/workflows/style.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: ["16.13.2"]
+        node-version: ["18.12.0"]
 
     steps:
       - name: ☁ Checkout code

.nvmrc

@@ -1 +1 @@
-16.13.2
+18.12.0

components/Badge/index.tsx

@@ -2,16 +2,17 @@ import Link from "next/link";
 
 export default function Badge({ name, id, avatar, tokens, owned }) {
   return (
-    <Link href={`/badge/${id}`}>
-      <a className={`h-full w-full ${owned ? "opacity-100" : "opacity-30"}`}>
-        <div>
-          <img src={avatar} alt={name}></img>
-        </div>
-        <div className="flex flex-col justify-items-center text-center font-iregular">
-          <div>{name}</div>
-          <div>{tokens} 💰 </div>
-        </div>
-      </a>
+    <Link
+      href={`/badge/${id}`}
+      className={`h-full w-full ${owned ? "opacity-100" : "opacity-30"}`}
+    >
+      <div>
+        <img src={avatar} alt={name}></img>
+      </div>
+      <div className="flex flex-col justify-items-center text-center font-iregular">
+        <div>{name}</div>
+        <div>{tokens} 💰 </div>
+      </div>
     </Link>
   );
 }

components/Base/index.jsx

@@ -68,17 +68,17 @@ const MobileNavbar = ({
               </div>
               <nav className="mt-5 flex-1">
                 {navigation.map((item) => (
-                  <Link key={item} href={`/manager/${item}`} passHref>
-                    <a
-                      className={classNames(
-                        item == href
-                          ? "bg-primary text-quinary"
-                          : "text-white hover:bg-primary hover:bg-opacity-50",
-                        "group flex items-center border-b-2 border-tertiary border-opacity-50 px-8 py-8 font-ibold text-xs"
-                      )}
-                    >
-                      {item.toUpperCase()}
-                    </a>
+                  <Link
+                    key={item}
+                    href={`/manager/${item}`}
+                    className={classNames(
+                      item == href
+                        ? "bg-primary text-quinary"
+                        : "text-white hover:bg-primary hover:bg-opacity-50",
+                      "group flex items-center border-b-2 border-tertiary border-opacity-50 px-8 py-8 font-ibold text-xs"
+                    )}
+                  >
+                    {item.toUpperCase()}
                   </Link>
                 ))}
               </nav>
@@ -128,22 +128,26 @@ export default function Dashboard({
           <div className="flex flex-1 flex-col overflow-y-auto pt-5 pb-10">
             <Return componentStyle="ml-4 mt-10 sm:mt-10" />
             <div className="mt-20 flex flex-shrink-0 items-center px-4">
-              <Image src="/images/sei-logo.svg" width="220" height="120" />
+              <Image
+                src="/images/sei-logo.svg"
+                width="220"
+                height="120"
+                alt="SEI Logo"
+              />
             </div>
             <nav className="mt-5 flex-1">
               {navigation.map((item) => (
-                <Link key={item} href={`${baseHref}/${item}`} passHref>
-                  <a
-                    key={item}
-                    className={classNames(
-                      item == href
-                        ? "bg-primary text-quinary"
-                        : "text-white hover:bg-primary hover:bg-opacity-50",
-                      "group flex items-center border-b-2 border-tertiary border-opacity-50 px-8 py-8 font-ibold text-xs"
-                    )}
-                  >
-                    {item.toUpperCase()}
-                  </a>
+                <Link
+                  key={item}
+                  href={`${baseHref}/${item}`}
+                  className={classNames(
+                    item == href
+                      ? "bg-primary text-quinary"
+                      : "text-white hover:bg-primary hover:bg-opacity-50",
+                    "group flex items-center border-b-2 border-tertiary border-opacity-50 px-8 py-8 font-ibold text-xs"
+                  )}
+                >
+                  {item.toUpperCase()}
                 </Link>
               ))}
             </nav>

components/Dashboard/index.jsx

@@ -123,7 +123,7 @@ export default function Dashboard(props) {
                 src="/images/sponsors/accenture.svg"
                 width="220"
                 height="120"
-                alt=""
+                alt="Accenture"
               />
             </div>
             <nav className="mt-5 flex-1">
@@ -142,8 +142,8 @@ export default function Dashboard(props) {
                 </a>
               ))}
             </nav>
-            <Link href="/" passHref>
-              <a className="px-4 font-iregular text-quinary">Log out 👋</a>
+            <Link href="/" className="px-4 font-iregular text-quinary">
+              Log out 👋
             </Link>
           </div>
         </div>

components/Footer/index.tsx

@@ -14,8 +14,8 @@ function DefaultAnimation() {
   return (
     <span>
       Psst. Have you checked the{" "}
-      <Link href="/challenges">
-        <a className="text-primary underline">challenges?</a>
+      <Link href="/challenges" className="text-primary underline">
+        challenges?
       </Link>{" "}
       Just saying.
     </span>
@@ -88,14 +88,13 @@ export default function Footer(props: IFooterProps) {
       <div className="justify-center lg:flex">
         <div className="py- flex-1">
           <div className="flex justify-center font-ibold lg:justify-start">
-            {/* eslint-disable-next-line jsx-a11y/alt-text */}
             <Image
-              className="lg:flex-1"
               src="/images/sei-logo.svg"
-              width="100"
-              height="100"
+              width={100}
+              height={100}
+              alt="SEI Logo"
             />
-            <p className="pt-4 pl-6 text-white lg:flex-1">
+            <p className="pl-6 text-white lg:flex-1">
               Semana da <br />
               Engenharia
               <br />
@@ -105,20 +104,23 @@ export default function Footer(props: IFooterProps) {
         </div>
         <div className="flex-2 py-10">
           <div className="grid grid-rows-2 justify-items-center gap-8 font-iregular text-sm text-white lg:grid-cols-2 lg:justify-items-end">
-            <Link passHref href="https://2022.seium.org/">
-              <a className="text-white hover:underline">Previous Edition</a>
+            <Link
+              href="https://2022.seium.org/"
+              className="text-white hover:underline"
+            >
+              Previous Edition
             </Link>
-            <Link passHref href="/docs/regulamento.pdf">
-              <a className="hover:underline">General Regulation</a>
+            <Link href="/docs/regulamento.pdf" className="hover:underline">
+              General Regulation
             </Link>
             <Link
-              passHref
               href="https://docs.google.com/forms/d/e/1FAIpQLSdV1bSyW2tcLuTC_jJCGdZ5NZHUlgETK7nQkOmyDzwb7eFS4Q/viewform"
+              className="hover:underline"
             >
-              <a className="hover:underline">Report a Problem</a>
+              Report a Problem
             </Link>
-            <Link passHref href="/docs/survival.pdf">
-              <a className="hover:underline">Survival Guide</a>
+            <Link href="/docs/survival.pdf" className="hover:underline">
+              Survival Guide
             </Link>
           </div>
           <div className="flex justify-center lg:justify-end">

components/Layout/Layout.tsx

@@ -68,16 +68,14 @@ export default function Layout({
       <aside className="inset-y-0 hidden w-72 overflow-y-scroll border-r-2 bg-secondary px-8 py-5 lg:fixed lg:flex lg:flex-col">
         <div className="flex flex-1">
           <nav className="mt-10 flex flex-col">
-            <Link href="/">
-              <a className="font-iregular text-quinary">
-                &lt; Back to SEI website
-              </a>
+            <Link href="/" className="font-iregular text-quinary">
+              &lt; Back to SEI website
             </Link>
 
             <div className="my-4">
               <Image
                 src="/images/sei-logo.svg"
-                alt="SEI"
+                alt="SEI Logo"
                 width="220"
                 height="120"
               />
@@ -177,15 +175,13 @@ function MobileNavbar({
             <aside className="flex h-full flex-col justify-between">
               <div>
                 <div className="flex justify-between">
-                  <Link href="/">
-                    <a className="font-iregular text-quinary">
-                      <Image
-                        src="/images/sei-logo.svg"
-                        alt="SEI"
-                        width="48"
-                        height="32"
-                      />
-                    </a>
+                  <Link href="/" className="font-iregular text-quinary">
+                    <Image
+                      src="/images/sei-logo.svg"
+                      alt="SEI Logo"
+                      width="48"
+                      height="32"
+                    />
                   </Link>
 
                   <button type="button" onClick={onClose} className="h-12 w-12">
@@ -230,12 +226,11 @@ function ActiveLink({ link, href, basePath }: IActiveLinkProps) {
   const activeStyle = href === `/${basePath}/${link}` && "text-quinary";
 
   return (
-    <Link href={`/${basePath}/${link}`}>
-      <a
-        className={`py-8 font-ibold text-xs uppercase transition duration-200 hover:text-quinary ${activeStyle}`}
-      >
-        {link}
-      </a>
+    <Link
+      href={`/${basePath}/${link}`}
+      className={`py-8 font-ibold text-xs uppercase transition duration-200 hover:text-quinary ${activeStyle}`}
+    >
+      {link}
     </Link>
   );
 }

components/Navbar/index.jsx

@@ -51,32 +51,36 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
             <div className="flex h-16 items-center justify-between">
               <div className="relative z-50 flex flex-auto">
                 <div className="grid w-full grid-cols-4">
-                  <Link href="/" passHref>
+                  <Link href="/">
                     <div className={`${styles.logo} pt-4 lg:pt-8`}>
                       <Image
                         className="cursor-pointer opacity-60 hover:opacity-100"
                         src="/images/sei-logo.svg"
                         width="50"
                         height="40"
-                        alt="SEIUM"
+                        alt="SEI Logo"
                       />
                     </div>
                   </Link>
                   <div className="col-span-3 hidden justify-self-end lg:block">
                     <div className="flex">
                       <div className="mr-6 grid grid-cols-3 gap-y-4 gap-x-20 pt-4">
                         {navigation.map((item) => (
-                          <Link key={item.slug} href={item.slug} passHref>
-                            <a className="font-iregular text-sm text-white text-opacity-40 hover:text-opacity-100">
-                              {item.name}
-                            </a>
+                          <Link
+                            key={item.slug}
+                            href={item.slug}
+                            className="font-iregular text-sm text-white text-opacity-40 hover:text-opacity-100"
+                          >
+                            {item.name}
                           </Link>
                         ))}
                         {isAuthenticated ? null : (
-                          <Link key="login" href="/login" passHref>
-                            <a className="font-iregular text-sm text-white text-opacity-40 hover:text-opacity-100">
-                              Login
-                            </a>
+                          <Link
+                            key="login"
+                            href="/login"
+                            className="font-iregular text-sm text-white text-opacity-40 hover:text-opacity-100"
+                          >
+                            Login
                           </Link>
                         )}
                       </div>
@@ -89,10 +93,14 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                                 <img
                                   className="h-10 w-10 rounded-full"
                                   src={user.avatar}
+                                  alt="Avatar"
                                 />
                               ) : (
                                 <span className="flex h-10 w-10 items-center justify-center rounded-full">
-                                  <img src="/images/mascot-head.png" />
+                                  <img
+                                    src="/images/mascot-head.png"
+                                    alt="Mascote"
+                                  />
                                 </span>
                               )}
                             </Menu.Button>
@@ -110,10 +118,11 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                               {user &&
                                 userNavigation(user.type).map((item) => (
                                   <Menu.Item key={item.name}>
-                                    <Link passHref href={item.slug}>
-                                      <a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                        {item.name}
-                                      </a>
+                                    <Link
+                                      href={item.slug}
+                                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                                    >
+                                      {item.name}
                                     </Link>
                                   </Menu.Item>
                                 ))}
@@ -157,7 +166,7 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                   as="a"
                   className="block rounded-md py-6 text-center font-ibold text-3xl text-white hover:text-quinary"
                 >
-                  <Link key={item.slug} href={item.slug} passHref>
+                  <Link key={item.slug} href={item.slug}>
                     {item.name}
                   </Link>
                 </Disclosure.Button>
@@ -170,7 +179,7 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                     as="a"
                     className="block rounded-md py-6 text-center font-ibold text-3xl text-white hover:text-quinary"
                   >
-                    <Link key={item.slug} href={item.slug} passHref>
+                    <Link key={item.slug} href={item.slug}>
                       {item.name}
                     </Link>
                   </Disclosure.Button>
@@ -181,7 +190,7 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                   as="a"
                   className="block rounded-md py-6 text-center font-ibold text-3xl text-white hover:text-quinary"
                 >
-                  <Link key="login" href="/login" passHref>
+                  <Link key="login" href="/login">
                     Login
                   </Link>
                 </Disclosure.Button>

components/Return/index.tsx

@@ -6,12 +6,11 @@ interface Props {
 
 export default function Return({ componentStyle }: Props) {
   return (
-    <Link href="/">
-      <a
-        className={`${componentStyle} flex items-center justify-center font-iregular text-quinary sm:absolute`}
-      >
-        &lt; Back to SEI website
-      </a>
+    <Link
+      href="/"
+      className={`${componentStyle} flex items-center justify-center font-iregular text-quinary sm:absolute`}
+    >
+      &lt; Back to SEI website
     </Link>
   );
 }