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/pages/404.tsx

@@ -1,9 +1,10 @@
 import PageTitle from '@app/components/Common/PageTitle';
+import defineMessages from '@app/utils/defineMessages';
 import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
-const messages = defineMessages({
+const messages = defineMessages('pages', {
   errormessagewithcode: '{statusCode} - {error}',
   pagenotfound: 'Page Not Found',
   returnHome: 'Return Home',
@@ -21,11 +22,9 @@ const Custom404 = () => {
           error: intl.formatMessage(messages.pagenotfound),
         })}
       </div>
-      <Link href="/">
-        <a className="mt-2 flex">
-          {intl.formatMessage(messages.returnHome)}
-          <ArrowRightCircleIcon className="ml-2 h-6 w-6" />
-        </a>
+      <Link href="/" className="mt-2 flex">
+        {intl.formatMessage(messages.returnHome)}
+        <ArrowRightCircleIcon className="ml-2 h-6 w-6" />
       </Link>
     </div>
   );

src/pages/_app.tsx

@@ -109,10 +109,6 @@ interface ExtendedAppProps extends AppProps {
   currentSettings: PublicSettingsResponse;
 }
 
-if (typeof window === 'undefined') {
-  global.Intl = require('intl');
-}
-
 const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
   Component,
   pageProps,

src/pages/_error.tsx

@@ -1,15 +1,16 @@
 import PageTitle from '@app/components/Common/PageTitle';
+import defineMessages from '@app/utils/defineMessages';
 import type { Undefinable } from '@app/utils/typeHelpers';
 import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import type { NextPage } from 'next';
 import Link from 'next/link';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 interface ErrorProps {
   statusCode?: number;
 }
 
-const messages = defineMessages({
+const messages = defineMessages('pages', {
   errormessagewithcode: '{statusCode} - {error}',
   internalservererror: 'Internal Server Error',
   serviceunavailable: 'Service Unavailable',
@@ -44,11 +45,9 @@ const Error: NextPage<ErrorProps> = ({ statusCode }) => {
             })
           : getErrorMessage(statusCode)}
       </div>
-      <Link href="/">
-        <a className="mt-2 flex">
-          {intl.formatMessage(messages.returnHome)}
-          <ArrowRightCircleIcon className="ml-2 h-6 w-6" />
-        </a>
+      <Link href="/" className="mt-2 flex">
+        {intl.formatMessage(messages.returnHome)}
+        <ArrowRightCircleIcon className="ml-2 h-6 w-6" />
       </Link>
     </div>
   );