refactor: update Next.js, React.js and Node.js (#815)

* refactor: update Next.js and React.js

* refactor: update Next.js images

* refactor: update ESLint rules and fix warnings/errors

* fix: remove old intl polyfill

* fix: add proper size to next/image components

* fix: adjust full-size for next/image components

* fix: temporary allow all domains for image optimization

* build: fixes an issue where dev env could lead to javascript heap out of memory

* fix: resolve webpack cache issue with country-flag-icons

* refactor: switch compiler from Babel to SWC

* fix: resize logo in sidebar

* fix: break word on long path to avoid text overflow

* chore: added sharp for production image optimisation

* fix: change extract script for i18n to a custom script

* fix: resolve GitHub CodeQL alert

* chore: temporarily remove builds for ARMv7

* fix: resize avatar images

* refactor: update Node.js to v20

* fix: resolve various UI issues

* build: migrate yarn to pnpm and restrict engine to node@^20.0.0

* ci: specify the pnpm version to use in workflow actions

* ci: fix typo in pnpm action-setup for cypress workflow

* test(cypress): use pnpm instead of yarn

* style: ran prettier on pnpm-lock

* ci(cypress): setup nodejs v20 in cypress workflow

* ci: pnpm cache to reduce install time

* ci: use sh shell to get pnpm store directory

* build(dockerfile): migrate to pnpm from yarn in docker builds

* build(dockerfile): copy the proper pnpm lockfile

* build: install pnpm for all platforms

* build(dockerfile): remove unnecessary `&&` on apk installation steps

* build: migrate pnpm 8 to 9

* build(dockerfile): add node-gyp back in

* build(dockerfile): install node-gyp through npm

* build(dockerfile): ignore scripts to not run husky install when devdependencies are pruned

* build: migrate to pnpm from yarn

* chore: remove a section that is no longer relevant

---------

Co-authored-by: fallenbagel <98979876+Fallenbagel@users.noreply.github.com>

src/components/UserProfile/index.tsx

@@ -8,6 +8,7 @@ import TmdbTitleCard from '@app/components/TitleCard/TmdbTitleCard';
 import ProfileHeader from '@app/components/UserProfile/ProfileHeader';
 import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import Error from '@app/pages/_error';
+import defineMessages from '@app/utils/defineMessages';
 import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import type { WatchlistResponse } from '@server/interfaces/api/discoverInterfaces';
 import type {
@@ -20,10 +21,10 @@ import type { TvDetails } from '@server/models/Tv';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 
-const messages = defineMessages({
+const messages = defineMessages('components.UserProfile', {
   recentrequests: 'Recent Requests',
   limit: '{remaining} of {limit}',
   requestsperdays: '{limit} remaining',
@@ -164,7 +165,7 @@ const UserProfile = () => {
                         : `/users/${user?.id}/requests?filter=all`
                     }
                   >
-                    <a>{intl.formatNumber(user.requestCount)}</a>
+                    {intl.formatNumber(user.requestCount)}
                   </Link>
                 </dd>
               </div>
@@ -296,11 +297,10 @@ const UserProfile = () => {
                     ? '/profile/requests?filter=all'
                     : `/users/${user?.id}/requests?filter=all`
                 }
+                className="slider-title"
               >
-                <a className="slider-title">
-                  <span>{intl.formatMessage(messages.recentrequests)}</span>
-                  <ArrowRightCircleIcon />
-                </a>
+                <span>{intl.formatMessage(messages.recentrequests)}</span>
+                <ArrowRightCircleIcon />
               </Link>
             </div>
             <Slider
@@ -336,11 +336,10 @@ const UserProfile = () => {
                     ? '/profile/watchlist'
                     : `/users/${user.id}/watchlist`
                 }
+                className="slider-title"
               >
-                <a className="slider-title">
-                  <span>{watchlistSliderTitle}</span>
-                  <ArrowRightCircleIcon />
-                </a>
+                <span>{watchlistSliderTitle}</span>
+                <ArrowRightCircleIcon />
               </Link>
             </div>
             <Slider