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/Settings/Notifications/NotificationsWebhook/index.tsx

@@ -2,6 +2,7 @@ import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
 import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
 import {
   ArrowPathIcon,
@@ -12,7 +13,7 @@ import { Field, Form, Formik } from 'formik';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
@@ -66,23 +67,26 @@ const defaultPayload = {
   '{{extra}}': [],
 };
 
-const messages = defineMessages({
-  agentenabled: 'Enable Agent',
-  webhookUrl: 'Webhook URL',
-  authheader: 'Authorization Header',
-  validationJsonPayloadRequired: 'You must provide a valid JSON payload',
-  webhooksettingssaved: 'Webhook notification settings saved successfully!',
-  webhooksettingsfailed: 'Webhook notification settings failed to save.',
-  toastWebhookTestSending: 'Sending webhook test notification…',
-  toastWebhookTestSuccess: 'Webhook test notification sent!',
-  toastWebhookTestFailed: 'Webhook test notification failed to send.',
-  resetPayload: 'Reset to Default',
-  resetPayloadSuccess: 'JSON payload reset successfully!',
-  customJson: 'JSON Payload',
-  templatevariablehelp: 'Template Variable Help',
-  validationWebhookUrl: 'You must provide a valid URL',
-  validationTypes: 'You must select at least one notification type',
-});
+const messages = defineMessages(
+  'components.Settings.Notifications.NotificationsWebhook',
+  {
+    agentenabled: 'Enable Agent',
+    webhookUrl: 'Webhook URL',
+    authheader: 'Authorization Header',
+    validationJsonPayloadRequired: 'You must provide a valid JSON payload',
+    webhooksettingssaved: 'Webhook notification settings saved successfully!',
+    webhooksettingsfailed: 'Webhook notification settings failed to save.',
+    toastWebhookTestSending: 'Sending webhook test notification…',
+    toastWebhookTestSuccess: 'Webhook test notification sent!',
+    toastWebhookTestFailed: 'Webhook test notification failed to send.',
+    resetPayload: 'Reset to Default',
+    resetPayloadSuccess: 'JSON payload reset successfully!',
+    customJson: 'JSON Payload',
+    templatevariablehelp: 'Template Variable Help',
+    validationWebhookUrl: 'You must provide a valid URL',
+    validationTypes: 'You must select at least one notification type',
+  }
+);
 
 const NotificationsWebhook = () => {
   const intl = useIntl();
@@ -309,6 +313,7 @@ const NotificationsWebhook = () => {
                   <Link
                     href="https://docs.overseerr.dev/using-overseerr/notifications/webhooks#template-variables"
                     passHref
+                    legacyBehavior
                   >
                     <Button
                       as="a"