chore(deps): update dependency Next.js to v16 (#3003)

.github/workflows/cypress.yml

@@ -10,7 +10,7 @@ on:
       - 'cypress.config.ts'
       - 'package.json'
       - 'pnpm-lock.yaml'
-      - 'next.config.js'
+      - 'next.config.ts'
       - 'tsconfig.json'
       - '.github/workflows/cypress.yml'
   push:
@@ -20,7 +20,7 @@ on:
       - 'cypress.config.ts'
       - 'package.json'
       - 'pnpm-lock.yaml'
-      - 'next.config.js'
+      - 'next.config.ts'
       - 'tsconfig.json'
       - '.github/workflows/cypress.yml'
 

.prettierignore

@@ -7,6 +7,7 @@ pnpm-lock.yaml
 cypress/config/settings.cypress.json
 .github
 .vscode
+next-env.d.ts
 
 # assets
 src/assets/

.prettierrc.js

@@ -9,6 +9,12 @@ module.exports = {
         rangeEnd: 0, // default: Infinity
       },
     },
+    {
+      files: 'next-env.d.ts',
+      options: {
+        rangeEnd: 0, // default: Infinity
+      },
+    },
     {
       files: 'gen-docs/pnpm-lock.yaml',
       options: {

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

next.config.ts

@@ -1,7 +1,6 @@
-/**
- * @type {import('next').NextConfig}
- */
-module.exports = {
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
   env: {
     commitTag: process.env.COMMIT_TAG || 'local',
   },
@@ -14,17 +13,18 @@ module.exports = {
     ],
   },
   transpilePackages: ['country-flag-icons'],
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: /\.(js|ts)x?$/,
-      use: ['@svgr/webpack'],
-    });
-
-    return config;
+  turbopack: {
+    rules: {
+      '*.svg': {
+        loaders: ['@svgr/webpack'],
+        as: '*.js',
+      },
+    },
   },
   experimental: {
     scrollRestoration: true,
     largePageDataBytes: 512 * 1000,
   },
 };
+
+export default nextConfig;

package.json

@@ -70,7 +70,7 @@
     "lodash": "4.18.1",
     "mime": "^4.1.0",
     "nanoid": "^5.1.7",
-    "next": "^14.2.35",
+    "next": "16.2.6",
     "node-cache": "5.1.2",
     "node-gyp": "12.2.0",
     "node-schedule": "2.1.1",
@@ -78,11 +78,11 @@
     "openpgp": "6.3.0",
     "pg": "8.20.0",
     "pug": "3.0.4",
-    "react": "^18.3.1",
+    "react": "19.2.6",
     "react-ace": "14.0.1",
     "react-animate-height": "3.2.3",
     "react-aria": "3.47.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.2.6",
     "react-hot-toast": "^2.6.0",
     "react-intersection-observer": "10.0.3",
     "react-intl": "^7.1.14",
@@ -115,7 +115,7 @@
     "@commitlint/cli": "20.5.0",
     "@commitlint/config-conventional": "20.5.0",
     "@eslint/js": "9.39.3",
-    "@next/eslint-plugin-next": "^16.2.3",
+    "@next/eslint-plugin-next": "16.2.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
@@ -134,8 +134,8 @@
     "@types/node": "22.19.0",
     "@types/node-schedule": "2.1.8",
     "@types/nodemailer": "^8.0.0",
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "@types/react-transition-group": "4.4.12",
     "@types/semver": "7.7.1",
     "@types/supertest": "^7.2.0",
@@ -154,6 +154,7 @@
     "cypress": "15.13.1",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "9.39.3",
+    "eslint-config-next": "16.2.6",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-formatjs": "6.4.5",
     "eslint-plugin-jsx-a11y": "6.10.2",
@@ -211,7 +212,9 @@
     ],
     "overrides": {
       "sqlite3>node-gyp": "8.4.1",
-      "@types/express-session": "1.18.2"
+      "@types/express-session": "1.18.2",
+      "@types/react": "19.2.14",
+      "@types/react-dom": "19.2.3"
     }
   },
   "scarfSettings": {

server/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "commonjs",
+    "moduleResolution": "node",
     "outDir": "../dist",
     "noEmit": false,
     "incremental": true,

src/components/Common/Accordion/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import AnimateHeight from 'react-animate-height';
 
 export interface AccordionProps {

src/components/Common/Button/index.tsx

@@ -1,4 +1,4 @@
-import type { ForwardedRef } from 'react';
+import type { ForwardedRef, JSX } from 'react';
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 

src/components/Common/Tag/index.tsx

@@ -1,5 +1,5 @@
 import { TagIcon } from '@heroicons/react/24/outline';
-import React from 'react';
+import React, { type JSX } from 'react';
 
 type TagProps = {
   children: React.ReactNode;

src/components/Common/Tooltip/index.tsx

@@ -5,7 +5,7 @@ import { usePopperTooltip } from 'react-popper-tooltip';
 
 type TooltipProps = {
   content: React.ReactNode;
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   tooltipConfig?: Partial<Config>;
   className?: string;
 };

src/components/Layout/MobileMenu/index.tsx

@@ -27,7 +27,7 @@ import {
 } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { cloneElement, useEffect, useRef, useState } from 'react';
+import { cloneElement, useEffect, useRef, useState, type JSX } from 'react';
 import { useIntl } from 'react-intl';
 
 interface MobileMenuProps {

src/components/Layout/Sidebar/index.tsx

@@ -255,7 +255,12 @@ const Sidebar = ({
               <div className="flex flex-shrink-0 items-center">
                 <span className="w-full px-4 py-2 text-2xl text-gray-50">
                   <Link href="/" className="relative block h-24">
-                    <Image src="/logo_full.svg" alt="Logo" fill />
+                    <Image
+                      src="/logo_full.svg"
+                      alt="Logo"
+                      fill
+                      loading="eager"
+                    />
                   </Link>
                 </span>
               </div>

src/components/Login/index.tsx

@@ -17,7 +17,7 @@ import { MediaServerType } from '@server/constants/server';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
 import Image from 'next/image';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type JSX } from 'react';
 import { useIntl } from 'react-intl';
 import { CSSTransition, SwitchTransition } from 'react-transition-group';
 import useSWR from 'swr';

src/components/ManageSlideOver/index.tsx

@@ -34,6 +34,8 @@ import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 
+import type { JSX } from 'react';
+
 const filterDuplicateDownloads = (
   items: DownloadingItem[] = []
 ): DownloadingItem[] => {

src/components/Slider/index.tsx

@@ -3,7 +3,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { useSpring } from '@react-spring/web';
 import { debounce } from 'lodash';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, type JSX } from 'react';
 import { useIntl } from 'react-intl';
 
 interface SliderProps {

src/hooks/useClickOutside.ts

@@ -10,7 +10,7 @@ import { useEffect } from 'react';
  * @param callback Callback triggered when clicking outside of ref element
  */
 const useClickOutside = (
-  ref: React.RefObject<HTMLElement>,
+  ref: React.RefObject<HTMLElement | null>,
   callback: (e: MouseEvent) => void
 ): void => {
   useEffect(() => {

src/hooks/useVerticalScroll.ts

@@ -19,7 +19,7 @@ const useVerticalScroll = (
 
   type SetTimeoutReturnType = ReturnType<typeof setTimeout>;
   const scrollingTimer: MutableRefObject<SetTimeoutReturnType | undefined> =
-    useRef();
+    useRef(undefined);
 
   const runCallback = () => {
     if (shouldFetch) {

src/pages/_document.tsx

@@ -1,6 +1,8 @@
 import type { DocumentContext, DocumentInitialProps } from 'next/document';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 
+import type { JSX } from 'react';
+
 class MyDocument extends Document {
   static async getInitialProps(
     ctx: DocumentContext

tsconfig.json

@@ -9,10 +9,10 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "strictPropertyInitialization": false,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,