Upgrade Next.js to V14

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn lint-staged

.storybook/manager.js

@@ -1,8 +1,8 @@
 // .storybook/manager.js
 
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import theme from './QDCTheme';
 
 addons.setConfig({
   theme,
-});
+});

next.config.js

@@ -7,19 +7,32 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE_BUNDLE === 'true',
 });
 const { withSentryConfig } = require('@sentry/nextjs');
-const withPlugins = require('next-compose-plugins');
 const withFonts = require('next-fonts');
 const withPWA = require('next-pwa');
-const nextTranslate = require('next-translate');
-const withTM = require('next-transpile-modules')(['remotion', '@remotion/cli', '@remotion/player']);
+const nextTranslate = require('next-translate-plugin');
 
 const securityHeaders = require('./configs/SecurityHeaders.js');
 const runtimeCaching = require('./pwa-runtime-config.js');
 
 const isDev = process.env.NEXT_PUBLIC_VERCEL_ENV === 'development';
 const isProduction = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
-const config = {
-  productionBrowserSourceMaps: true, // {@see https://nextjs.org/docs/advanced-features/source-maps}
+const withPWAConfig = withPWA({
+  dest: 'public',
+  disable: !isProduction,
+  mode: isProduction ? 'production' : 'development',
+  publicExcludes: [
+    '!fonts/**/!(sura_names|ProximaVara)*', // exclude pre-caching all fonts that are not sura_names or ProximaVara
+    '!icons/**', // exclude all icons
+    '!images/**/!(background|homepage)*', // don't pre-cache except background.jpg and homepage.png
+  ],
+  runtimeCaching,
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  productionBrowserSourceMaps: true,
+  swcMinify: true,
   images: {
     formats: ['image/avif', 'image/webp'],
     domains: [
@@ -31,18 +44,6 @@ const config = {
       'images.quran.com',
     ],
   },
-  pwa: {
-    disable: !isProduction,
-    dest: 'public',
-    mode: isProduction ? 'production' : 'development',
-    runtimeCaching,
-    publicExcludes: [
-      '!fonts/**/!(sura_names|ProximaVara)*', // exclude pre-caching all fonts that are not sura_names or ProximaVara
-      '!icons/**', // exclude all icons
-      '!images/**/!(background|homepage)*', // don't pre-cache except background.jpg and homepage.png
-    ],
-  },
-  // this is needed to support importing audioWorklet nodes. {@see https://github.com/webpack/webpack/issues/11543#issuecomment-826897590}
   webpack: (webpackConfig) => {
     webpackConfig.resolve = {
       ...webpackConfig.resolve,
@@ -88,18 +89,7 @@ const config = {
 
     return webpackConfig;
   },
-  SentryWebpackPluginOptions: {
-    // Additional config options for the Sentry Webpack plugin. Keep in mind that
-    // the following options are set automatically, and overriding them is not
-    // recommended:
-    //   release, url, org, project, authToken, configFile, stripPrefix,
-    //   urlPrefix, include, ignore
-
-    silent: true, // Suppresses all logs
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options.
-  },
-  async headers() {
+  headers: async () => {
     return isDev
       ? []
       : [
@@ -136,39 +126,50 @@ const config = {
           },
         ];
   },
-  async redirects() {
-    return [
-      {
-        source: '/:surah/:from(\\d{1,})\\::to(\\d{1,})', // 1/2:3 => 1/2-3
-        destination: '/:surah/:from-:to',
-        permanent: true,
-      },
-      {
-        source: '/:surah\\::from(\\d{1,})\\::to(\\d{1,})', // 1:2:3 => 1/2-3
-        destination: '/:surah/:from-:to',
-        permanent: true,
-      },
-      {
-        source: '/:surah(\\d{1,})-:from\\::to', // 1-2:3 => 1/2-3
-        destination: '/:surah/:from-:to',
-        permanent: true,
-      },
-      {
-        source: '/:surah(\\d{1,})-:from(\\d{1,})-:to(\\d{1,})', // 1-2-3 => 1/2-3
-        destination: '/:surah/:from-:to',
-        permanent: true,
-      },
-      {
-        source: '/:surah(\\d{1,})\\::from(\\d{1,})-:to(\\d{1,})', // 1:2-3 => 1/2-3
-        destination: '/:surah/:from-:to',
-        permanent: true,
-      },
-    ];
+  redirects: async () => [
+    {
+      source: '/:surah/:from(\\d{1,})\\::to(\\d{1,})', // 1/2:3 => 1/2-3
+      destination: '/:surah/:from-:to',
+      permanent: true,
+    },
+    {
+      source: '/:surah\\::from(\\d{1,})\\::to(\\d{1,})', // 1:2:3 => 1/2-3
+      destination: '/:surah/:from-:to',
+      permanent: true,
+    },
+    {
+      source: '/:surah(\\d{1,})-:from\\::to', // 1-2:3 => 1/2-3
+      destination: '/:surah/:from-:to',
+      permanent: true,
+    },
+    {
+      source: '/:surah(\\d{1,})-:from(\\d{1,})-:to(\\d{1,})', // 1-2-3 => 1/2-3
+      destination: '/:surah/:from-:to',
+      permanent: true,
+    },
+    {
+      source: '/:surah(\\d{1,})\\::from(\\d{1,})-:to(\\d{1,})', // 1:2-3 => 1/2-3
+      destination: '/:surah/:from-:to',
+      permanent: true,
+    },
+  ],
+  compiler: {
+    removeConsole: !isDev,
   },
 };
 
-// eslint-disable-next-line max-lines
-module.exports = withPlugins(
-  [withTM, withBundleAnalyzer, withPWA, withFonts, nextTranslate, withSentryConfig],
-  config,
+// Apply plugins
+const configWithPlugins = withBundleAnalyzer(withFonts(nextTranslate(withPWAConfig(nextConfig))));
+
+// Apply Sentry configuration
+module.exports = withSentryConfig(
+  configWithPlugins,
+  {
+    silent: true,
+  },
+  {
+    hideSourceMaps: !isDev,
+    // Additional config options for the Sentry Webpack plugin
+    // ... (any additional Sentry options)
+  },
 );

package.json

@@ -37,7 +37,7 @@
     "postpack": "pinst --enable"
   },
   "dependencies": {
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/eslint-parser": "^7.25.1",
     "@milkdown/core": "^7.5.0",
     "@milkdown/ctx": "^7.5.0",
     "@milkdown/kit": "^7.5.5",
@@ -46,31 +46,31 @@
     "@milkdown/react": "^7.5.0",
     "@milkdown/transformer": "^7.5.0",
     "@milkdown/utils": "^7.5.0",
-    "@next/bundle-analyzer": "^12.3.1",
+    "@next/bundle-analyzer": "^14.2.7",
     "@novu/headless": "0.24.0",
-    "@radix-ui/react-checkbox": "^1.0.0",
-    "@radix-ui/react-collapsible": "^1.0.0",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-direction": "^1.0.1",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.0.7",
-    "@radix-ui/react-id": "^1.0.1",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-direction": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-id": "^1.1.0",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "@radix-ui/react-visually-hidden": "^1.0.3",
-    "@reduxjs/toolkit": "^1.8.5",
-    "@remotion/bundler": "4.0.126",
-    "@remotion/cli": "4.0.126",
-    "@remotion/eslint-plugin": "4.0.126",
-    "@remotion/lambda": "4.0.126",
-    "@remotion/player": "4.0.126",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@reduxjs/toolkit": "^2.2.7",
+    "@remotion/bundler": "4.0.206",
+    "@remotion/cli": "4.0.206",
+    "@remotion/eslint-plugin": "4.0.206",
+    "@remotion/lambda": "4.0.206",
+    "@remotion/player": "4.0.206",
     "@sanity/client": "^5.2.1",
     "@sanity/image-url": "^1.0.2",
     "@sentry/nextjs": "^7.77.0",
@@ -88,66 +88,68 @@
     "humps": "^2.0.1",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
-    "next": "^12.1.5",
+    "next": "^14.2.6",
     "next-compose-plugins": "^2.2.0",
     "next-fonts": "^1.0.3",
     "next-pwa": "^5.6.0",
-    "next-seo": "^5.5.0",
-    "next-translate": "^1.6.0",
-    "next-transpile-modules": "9.0.0",
+    "next-seo": "^6.5.0",
+    "next-translate": "^2.6.2",
+    "next-translate-plugin": "^2.6.2",
     "node-fetch": "2",
     "querystring": "^0.2.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.36.1",
-    "react-hotkeys-hook": "^3.4.7",
+    "react-hotkeys-hook": "^4.5.0",
     "react-joyride": "^2.7.2",
-    "react-redux": "^8.0.4",
+    "react-redux": "^9.1.2",
     "react-toastify": "^9.0.8",
     "react-virtuoso": "^2.19.0",
-    "redux": "^4.2.0",
+    "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "refresh-fetch": "^0.8.0",
     "remark-directive": "^3.0.0",
-    "remotion": "4.0.126",
+    "remotion": "4.0.206",
     "swr": "1.2.1",
     "xstate": "^4.33.6"
   },
   "devDependencies": {
     "@lokalise/node-api": "^12.7.0",
     "@next/eslint-plugin-next": "^12.3.1",
-    "@playwright/test": "^1.26.0",
-    "@storybook/addon-a11y": "^7.6.4",
-    "@storybook/addon-actions": "^7.6.4",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/addon-storysource": "^7.6.4",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/nextjs": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@svgr/webpack": "^6.3.1",
+    "@playwright/test": "^1.46.1",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-storysource": "^8.2.9",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/react": "^13.4.0",
-    "@types/cookie": "^0.5.1",
+    "@types/cookie": "^0.6.0",
     "@types/js-cookie": "^3.0.2",
-    "@types/lodash": "^4.14.184",
-    "@types/node": "^20.10.4",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^22.5.0",
     "@types/node-fetch": "^2.6.2",
-    "@types/qs": "^6.9.7",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
+    "@types/qs": "^6.9.15",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.23",
     "@types/refresh-fetch": "^0.6.1",
     "@types/wicg-mediasession": "^1.1.3",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react": "^2.1.0",
-    "@vitest/coverage-c8": "^0.23.4",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-c8": "^0.33.0",
+    "@vitest/coverage-v8": "^2.0.5",
     "adm-zip": "^0.5.9",
+    "browserify-fs": "^1.0.0",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.2",
     "eslint": "^8.24.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.2.6",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-i18next": "^6.0.0-4",
     "eslint-plugin-import": "^2.26.0",
@@ -160,30 +162,31 @@
     "eslint-plugin-sonarjs": "^0.15.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unicorn": "^43.0.2",
-    "husky": "^9.0.11",
+    "husky": "^9.1.5",
     "inquirer": "^8.0.0",
     "inquirer-file-tree-selection-prompt": "^1",
     "jsdom": "^20.0.0",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^15.2.9",
     "next-sitemap": "^3.1.22",
     "pinst": "^3.0.0",
-    "postcss": "8",
+    "postcss": "8.4.41",
     "postcss-scss": "^4.0.5",
     "prettier": "^2.7.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "replace-in-file": "^6.3.5",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.0.2",
-    "storybook": "^7.6.4",
-    "storybook-addon-rtl": "^1.0.0",
+    "require-npm": "^1.4.1",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.1",
+    "storybook": "^8.2.9",
+    "storybook-addon-rtl": "^1.0.1",
     "stylelint": "14.12.1",
     "stylelint-prettier": "^2.0.0",
     "stylelint-scss": "^4.3.0",
     "stylelint-use-logical": "^2.0.0",
-    "superagent": "^10.1.0",
-    "typescript": "^4.8.3",
-    "vite": "^3.2.5",
-    "vitest": "^0.23.4"
+    "superagent": "^8.0.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2",
+    "vitest": "^2.0.5"
   },
   "husky": {
     "hooks": {