Upgrade Next.js to v13 - Part I

app/web/components/Avatar/Avatar.tsx

@@ -71,19 +71,18 @@ export default function Avatar({
     >
       {user ? (
         isProfileLink ? (
-          <Link href={routeToUser(user.username)}>
-            <a
-              className={classes.link}
-              aria-label={getProfileLinkA11yLabel(user.name)}
+          <Link
+            href={routeToUser(user.username)}
+            className={classes.link}
+            aria-label={getProfileLinkA11yLabel(user.name)}
+          >
+            <MuiAvatar
+              className={classes.avatar}
+              alt={user.name}
+              src={user.avatarUrl}
             >
-              <MuiAvatar
-                className={classes.avatar}
-                alt={user.name}
-                src={user.avatarUrl}
-              >
-                {user.name.split(/\s+/).map((name) => name[0])}
-              </MuiAvatar>
-            </a>
+              {user.name.split(/\s+/).map((name) => name[0])}
+            </MuiAvatar>
           </Link>
         ) : (
           <MuiAvatar

app/web/components/Datepicker.test.tsx

@@ -2,13 +2,15 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { useTranslation } from "i18n";
 import { useForm } from "react-hook-form";
-import { t } from "test/utils";
+import i18n from "test/i18n";
 import timezoneMock from "timezone-mock";
 import dayjs, { Dayjs } from "utils/dayjs";
 
 import wrapper from "../test/hookWrapper";
 import Datepicker from "./Datepicker";
 
+const { t } = i18n;
+
 jest.mock("@mui/x-date-pickers", () => {
   return {
     ...jest.requireActual("@mui/x-date-pickers"),

app/web/components/EditLocationMap.test.tsx

@@ -4,11 +4,13 @@ import MapUI from "components/Map";
 import { LngLat, Map as MaplibreMap } from "maplibre-gl";
 import { useEffect } from "react";
 import wrapper from "test/hookWrapper";
+import i18n from "test/i18n";
 import { server } from "test/restMock";
-import { t } from "test/utils";
 
 import EditLocationMap from "./EditLocationMap";
 
+const { t } = i18n;
+
 jest.mock("components/Map");
 jest.mock("maplibre-gl");
 

app/web/components/ErrorFallback/ErrorFallback.tsx

@@ -35,10 +35,9 @@ export default function ErrorFallback({ isFatal }: { isFatal?: boolean }) {
           <ReportButton isResponsive={false} />
         </div>
       )}
-
       <Actions>
         {!isFatal && (
-          <Link href={baseRoute} passHref>
+          <Link href={baseRoute} passHref legacyBehavior>
             <Button
               variant="outlined"
               component="a"

app/web/components/Footer/Footer.tsx

@@ -165,12 +165,12 @@ export default function Footer() {
             <FooterLink href={contactRoute}>{t("nav.contact_us")}</FooterLink>
           </div>
           <StyledButtonContainer>
-            <Link href={donationsRoute} passHref>
+            <Link href={donationsRoute} passHref legacyBehavior>
               <StyledButton component="a" variant="contained">
                 {t("nav.donate")}
               </StyledButton>
             </Link>
-            <Link href={volunteerRoute} passHref>
+            <Link href={volunteerRoute} passHref legacyBehavior>
               <StyledButton component="a" variant="contained" color="secondary">
                 {t("nav.volunteer")}
               </StyledButton>
@@ -219,7 +219,7 @@ export default function Footer() {
         <StyledMiddleContainer>
           <Typography variant="body2">
             <Link href={foundationRoute} passHref>
-              <a>{NON_PROFIT}</a>
+              {NON_PROFIT}
             </Link>
           </Typography>
         </StyledMiddleContainer>

app/web/components/ImageInput/ImageInput.test.tsx

@@ -19,16 +19,14 @@ import {
   SERVER_ERROR,
 } from "service/constants";
 import wrapper from "test/hookWrapper";
+import i18n from "test/i18n";
 import { server } from "test/restMock";
-import {
-  assertErrorAlert,
-  mockConsoleError,
-  MockedService,
-  t,
-} from "test/utils";
+import { assertErrorAlert, mockConsoleError, MockedService } from "test/utils";
 
 import ImageInput from "./ImageInput";
 
+const { t } = i18n;
+
 const uploadFileMock = service.api.uploadFile as MockedService<
   typeof service.api.uploadFile
 >;

app/web/components/LocationAutocomplete/LocationAutocomplete.test.tsx

@@ -3,12 +3,14 @@ import userEvent from "@testing-library/user-event";
 import { LngLat } from "maplibre-gl";
 import { useForm } from "react-hook-form";
 import wrapper from "test/hookWrapper";
+import i18n from "test/i18n";
 import { rest, server } from "test/restMock";
-import { t } from "test/utils";
 import { GeocodeResult } from "utils/hooks";
 
 import LocationAutocomplete from "./LocationAutocomplete";
 
+const { t } = i18n;
+
 const submitAction = jest.fn();
 const submitInvalidAction = jest.fn();
 

app/web/components/Navigation/GuestMenu.tsx

@@ -65,18 +65,22 @@ export default function GuestMenu({
         }}
       >
         <MenuItem>
-          <Link href={signupRoute}>{t("sign_up")}</Link>
+          <Link href={signupRoute} legacyBehavior>
+            {t("sign_up")}
+          </Link>
         </MenuItem>
         <MenuItem>
-          <Link href={loginRoute}>{t("login")}</Link>
+          <Link href={loginRoute} legacyBehavior>
+            {t("login")}
+          </Link>
         </MenuItem>
         <Divider />
         <MenuItem>
           <ReportButton isMenuLink />
         </MenuItem>
         <Divider />
         <MenuItem>
-          <Link href={helpCenterURL} target="_blank">
+          <Link href={helpCenterURL} target="_blank" legacyBehavior>
             {t("nav.help")}
           </Link>
         </MenuItem>

app/web/components/Navigation/NavButton.tsx

@@ -28,19 +28,18 @@ export default function NavButton({
       : router.asPath.includes(route);
 
   return (
-    <Link href={route}>
-      <a
-        className={classNames(classes.link, {
-          [classes.notification]: !!notificationCount,
-          [classes.selected]: isActive,
-        })}
-      >
-        <NotificationBadge count={notificationCount}>
-          <Typography variant={labelVariant} className={classes.label} noWrap>
-            {label}
-          </Typography>
-        </NotificationBadge>
-      </a>
+    <Link
+      href={route}
+      className={classNames(classes.link, {
+        [classes.notification]: !!notificationCount,
+        [classes.selected]: isActive,
+      })}
+    >
+      <NotificationBadge count={notificationCount}>
+        <Typography variant={labelVariant} className={classes.label} noWrap>
+          {label}
+        </Typography>
+      </NotificationBadge>
     </Link>
   );
 }

app/web/components/Navigation/Navigation.tsx

@@ -17,10 +17,10 @@ import ExternalNavButton from "components/Navigation/ExternalNavButton";
 import { useAuthContext } from "features/auth/AuthProvider";
 import useNotifications from "features/useNotifications";
 import { GLOBAL } from "i18n/namespaces";
+import { TFunction } from "i18next";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import React, { useEffect, useState } from "react";
-import { TFunction } from "react-i18next";
 import CouchersLogo from "resources/CouchersLogo";
 import {
   blogRoute,
@@ -416,7 +416,7 @@ export default function Navigation() {
               {linkContent}
             </StyledMenuItemLink>
           ) : (
-            <Link href={route}>
+            <Link href={route} legacyBehavior>
               <StyledMenuItemLink onClick={() => setMenuOpen(false)}>
                 {linkContent}
               </StyledMenuItemLink>

app/web/components/Navigation/ReportButton.test.tsx

@@ -11,10 +11,13 @@ import { supportEmail } from "appConstants";
 import mediaQuery from "css-mediaquery";
 import { service } from "service";
 import wrapper from "test/hookWrapper";
-import { MockedService, t, wait } from "test/utils";
+import i18n from "test/i18n";
+import { MockedService, wait } from "test/utils";
 
 import ReportButton from "./ReportButton";
 
+const { t } = i18n;
+
 jest.mock("@mui/material", () => ({
   ...jest.requireActual("@mui/material"),
   useMediaQuery: jest.fn(),

app/web/components/ProfileIncompleteDialog/ProfileIncompleteDialog.tsx

@@ -59,7 +59,7 @@ export default function ProfileIncompleteDialog({
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Link href={routeToEditProfile()} passHref>
+        <Link href={routeToEditProfile()} passHref legacyBehavior>
           <Button>
             {t("dashboard:complete_profile_dialog.edit_profile_button")}
           </Button>

app/web/components/StyledLink.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 
 const StyledLink = forwardRef<HTMLAnchorElement, { href: string } & LinkProps>(
   ({ href, ...props }, ref) => (
-    <Link href={href} passHref>
+    <Link href={href} passHref legacyBehavior>
       <MuiLink ref={ref} {...props} underline={props.underline || "hover"} />
     </Link>
   )

app/web/components/TOSLink.tsx

@@ -14,10 +14,8 @@ export default function TOSLink() {
   const { t } = useTranslation("global");
   const classes = useStyles();
   return (
-    <Link href={tosRoute}>
-      <a target="_blank" className={classes.root}>
-        {t("terms_of_service")}
-      </a>
+    <Link href={tosRoute} target="_blank" className={classes.root}>
+      {t("terms_of_service")}
     </Link>
   );
 }

app/web/features/auth/AuthProvider.test.ts

@@ -2,13 +2,18 @@ import { act, renderHook } from "@testing-library/react";
 import { Empty } from "google-protobuf/google/protobuf/empty_pb";
 import { RpcError } from "grpc-web";
 import { service } from "service";
+import i18n from "test/i18n";
 
 import * as client from "../../service/client";
 import wrapper from "../../test/hookWrapper";
-import { addDefaultUser, t } from "../../test/utils";
+import { addDefaultUser } from "../../test/utils";
 import { useAuthContext } from "./AuthProvider";
 import { JAILED_ERROR_MESSAGE, LOGGED_OUT_ERROR_MESSAGE } from "./constants";
 
+const { t } = i18n;
+
+jest.mock("../../service/client");
+
 const logoutMock = service.user.logout as jest.Mock;
 const getIsJailedMock = service.jail.getIsJailed as jest.Mock;
 

app/web/features/auth/email/ChangeEmail.test.tsx

@@ -4,7 +4,10 @@ import ChangeEmail from "features/auth/email/ChangeEmail";
 import { Empty } from "google-protobuf/google/protobuf/empty_pb";
 import { service } from "service";
 import wrapper from "test/hookWrapper";
-import { MockedService, t } from "test/utils";
+import i18n from "test/i18n";
+import { MockedService } from "test/utils";
+
+const { t } = i18n;
 
 const getAccountInfoMock = service.account.getAccountInfo as MockedService<
   typeof service.account.getAccountInfo

app/web/features/auth/email/ConfirmChangeEmail.test.tsx

@@ -5,10 +5,13 @@ import mockRouter from "next-router-mock";
 import { loginRoute } from "routes";
 import { service } from "service";
 import wrapper from "test/hookWrapper";
-import { MockedService, t } from "test/utils";
+import i18n from "test/i18n";
+import { MockedService } from "test/utils";
 
 import ConfirmChangeEmail from "./ConfirmChangeEmail";
 
+const { t } = i18n;
+
 const confirmChangeEmailMock = service.account
   .confirmChangeEmail as MockedService<
   typeof service.account.confirmChangeEmail

app/web/features/auth/login/Login.test.tsx

@@ -2,10 +2,13 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { service } from "service";
 import wrapper from "test/hookWrapper";
-import { assertErrorAlert, t } from "test/utils";
+import i18n from "test/i18n";
+import { assertErrorAlert } from "test/utils";
 
 import Login from "./Login";
 
+const { t } = i18n;
+
 const passwordLoginMock = service.user.passwordLogin as jest.MockedFunction<
   typeof service.user.passwordLogin
 >;

app/web/features/auth/logins/LoginsLink.tsx

@@ -16,7 +16,7 @@ export default function LoginsLink({ className }: { className: string }) {
       <Typography variant="body1" gutterBottom>
         {t("active_logins.settings_page_text")}
       </Typography>
-      <Link href={loginsSettingsRoute} passHref>
+      <Link href={loginsSettingsRoute} passHref legacyBehavior>
         <Button>{t("active_logins.settings_page_link")}</Button>
       </Link>
     </div>

app/web/features/auth/notifications/NotificationSettings.tsx

@@ -17,7 +17,7 @@ export default function NotificationSettings({
       <Typography variant="h2" gutterBottom>
         {t("notification_settings.title")}
       </Typography>
-      <Link href={notificationSettingsRoute} passHref>
+      <Link href={notificationSettingsRoute} passHref legacyBehavior>
         <Button>{t("notification_settings.go_to_button")}</Button>
       </Link>
     </div>

app/web/features/auth/password/ChangePassword.test.tsx

@@ -4,7 +4,10 @@ import ChangePassword from "features/auth/password/ChangePassword";
 import { Empty } from "google-protobuf/google/protobuf/empty_pb";
 import { service } from "service";
 import wrapper from "test/hookWrapper";
-import { MockedService, t } from "test/utils";
+import i18n from "test/i18n";
+import { MockedService } from "test/utils";
+
+const { t } = i18n;
 
 const changePasswordMock = service.account.changePassword as MockedService<
   typeof service.account.changePassword

app/web/features/auth/password/CompleteResetPassword.test.tsx

@@ -4,10 +4,13 @@ import { useRouter } from "next/router";
 import { AuthRes } from "proto/auth_pb";
 import { service } from "service";
 import wrapper from "test/hookWrapper";
-import { MockedService, t } from "test/utils";
+import i18n from "test/i18n";
+import { MockedService } from "test/utils";
 
 import CompletePasswordReset from "./CompleteResetPassword";
 
+const { t } = i18n;
+
 const CompletePasswordResetMock = service.account
   .CompletePasswordResetV2 as MockedService<
   typeof service.account.CompletePasswordResetV2
@@ -17,6 +20,11 @@ jest.mock("next/router", () => ({
   useRouter: jest.fn(),
 }));
 
+jest.mock("@sentry/nextjs", () => ({
+  captureException: jest.fn(),
+  setUser: jest.fn(),
+}));
+
 const mockUseRouter = useRouter as jest.Mock;
 
 describe("CompletePasswordReset page", () => {

app/web/features/auth/password/ResetPassword.test.tsx

@@ -3,10 +3,13 @@ import userEvent from "@testing-library/user-event";
 import { Empty } from "google-protobuf/google/protobuf/empty_pb";
 import { service } from "service";
 import wrapper from "test/hookWrapper";
-import { MockedService, t } from "test/utils";
+import i18n from "test/i18n";
+import { MockedService } from "test/utils";
 
 import ResetPassword from "./ResetPassword";
 
+const { t } = i18n;
+
 const resetPasswordMock = service.account.resetPassword as MockedService<
   typeof service.account.resetPassword
 >;