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/TvDetails/index.tsx

@@ -30,6 +30,7 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
+import defineMessages from '@app/utils/defineMessages';
 import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import { Disclosure, Transition } from '@headlessui/react';
 import {
@@ -47,16 +48,16 @@ import { MediaRequestStatus, MediaStatus } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { Crew } from '@server/models/common';
 import type { TvDetails as TvDetailsType } from '@server/models/Tv';
-import { hasFlag } from 'country-flag-icons';
+import { countries } from 'country-flag-icons';
 import 'country-flag-icons/3x2/flags.css';
 import getConfig from 'next/config';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, 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.TvDetails', {
   firstAirDate: 'First Air Date',
   nextAirDate: 'Next Air Date',
   originallanguage: 'Original Language',
@@ -222,8 +223,12 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
     seriesAttributes.push(
       data.genres
         .map((g) => (
-          <Link href={`/discover/tv?genre=${g.id}`} key={`genre-${g.id}`}>
-            <a className="hover:underline">{g.name}</a>
+          <Link
+            href={`/discover/tv?genre=${g.id}`}
+            key={`genre-${g.id}`}
+            className="hover:underline"
+          >
+            {g.name}
           </Link>
         ))
         .reduce((prev, curr) => (
@@ -309,8 +314,8 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
           <CachedImage
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
             priority
           />
           <div
@@ -361,7 +366,8 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                 : '/images/overseerr_poster_not_found.png'
             }
             alt=""
-            layout="responsive"
+            sizes="100vw"
+            style={{ width: '100%', height: 'auto' }}
             width={600}
             height={900}
             priority
@@ -519,18 +525,19 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                   .map((person) => (
                     <li key={`crew-${person.job}-${person.id}`}>
                       <span>{person.job}</span>
-                      <Link href={`/person/${person.id}`}>
-                        <a className="crew-name">{person.name}</a>
+                      <Link href={`/person/${person.id}`} className="crew-name">
+                        {person.name}
                       </Link>
                     </li>
                   ))}
               </ul>
               <div className="mt-4 flex justify-end">
-                <Link href={`/tv/${data.id}/crew`}>
-                  <a className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100">
-                    <span>{intl.formatMessage(messages.viewfullcrew)}</span>
-                    <ArrowRightCircleIcon className="ml-1.5 inline-block h-5 w-5" />
-                  </a>
+                <Link
+                  href={`/tv/${data.id}/crew`}
+                  className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100"
+                >
+                  <span>{intl.formatMessage(messages.viewfullcrew)}</span>
+                  <ArrowRightCircleIcon className="ml-1.5 inline-block h-5 w-5" />
                 </Link>
               </div>
             </>
@@ -541,10 +548,9 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                 <Link
                   href={`/discover/tv?keywords=${keyword.id}`}
                   key={`keyword-id-${keyword.id}`}
+                  className="mb-2 mr-2 inline-flex last:mr-0"
                 >
-                  <a className="mb-2 mr-2 inline-flex last:mr-0">
-                    <Tag>{keyword.name}</Tag>
-                  </a>
+                  <Tag>{keyword.name}</Tag>
                 </Link>
               ))}
             </div>
@@ -919,15 +925,13 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                 <span>{intl.formatMessage(messages.originallanguage)}</span>
                 <span className="media-fact-value">
                   <Link href={`/discover/tv/language/${data.originalLanguage}`}>
-                    <a>
-                      {intl.formatDisplayName(data.originalLanguage, {
-                        type: 'language',
-                        fallback: 'none',
-                      }) ??
-                        data.spokenLanguages.find(
-                          (lng) => lng.iso_639_1 === data.originalLanguage
-                        )?.name}
-                    </a>
+                    {intl.formatDisplayName(data.originalLanguage, {
+                      type: 'language',
+                      fallback: 'none',
+                    }) ??
+                      data.spokenLanguages.find(
+                        (lng) => lng.iso_639_1 === data.originalLanguage
+                      )?.name}
                   </Link>
                 </span>
               </div>
@@ -946,7 +950,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                         className="flex items-center justify-end"
                         key={`prodcountry-${c.iso_3166_1}`}
                       >
-                        {hasFlag(c.iso_3166_1) && (
+                        {countries.includes(c.iso_3166_1) && (
                           <span
                             className={`mr-1.5 text-xs leading-5 flag:${c.iso_3166_1}`}
                           />
@@ -977,7 +981,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                         href={`/discover/tv/network/${n.id}`}
                         key={`network-${n.id}`}
                       >
-                        <a>{n.name}</a>
+                        {n.name}
                       </Link>
                     ))
                     .reduce((prev, curr) => (
@@ -1021,11 +1025,13 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
       {data.credits.cast.length > 0 && (
         <>
           <div className="slider-header">
-            <Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
-              <a className="slider-title">
-                <span>{intl.formatMessage(messages.cast)}</span>
-                <ArrowRightCircleIcon />
-              </a>
+            <Link
+              href="/tv/[tvId]/cast"
+              as={`/tv/${data.id}/cast`}
+              className="slider-title"
+            >
+              <span>{intl.formatMessage(messages.cast)}</span>
+              <ArrowRightCircleIcon />
             </Link>
           </div>
           <Slider