Skip to content

Commit

Permalink
Upgrade Next.js to V14 (#2194)
Browse files Browse the repository at this point in the history 
* Upgrade

* Update storybook

* Update @svgr/webpack

* Update vitest

* Update playwright

* Update Redux

* Update Husky

* Update Typescript

* Update types

* Fix Husky

* Remove next-transpile-modules

* Update next-translate

* Fix sitemap generation issue

* Update next-seo

* Update react-hotkeys-hook

* Update lint-staged

* Update Remotion

* Update postcss, sass and sass-loader

* Update @next/bundle-analyzer

* Fix video thumbnails

* Solve merge conflict changes

* Fix tests failing issue
  • Loading branch information
@osamasayed
osamasayed authored Dec 4, 2024
1 parent 61b0df2 commit f7facc7
Show file tree
Hide file tree
Showing 82 changed files with 5,366 additions and 5,109 deletions.
3 changes: 0 additions & 3 deletions .husky/pre-commit
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged
4 changes: 2 additions & 2 deletions .storybook/manager.js
View file
Original file line number Diff line number Diff line change
@@ -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,
});
});
0 quranic-calendar.json → data/quranic-calendar.json
View file
File renamed without changes.
123 changes: 62 additions & 61 deletions next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -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,
Expand Down Expand Up @@ -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
? []
: [
Expand Down Expand Up @@ -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)
},
);
131 changes: 67 additions & 64 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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": {
Expand Down
Loading

0 comments on commit f7facc7

Please sign in to comment.