Upgrade to Next11 (#297)

client/components/layout/PageWithAsideMenu/PageWithAsideMenu.tsx

@@ -1,5 +1,7 @@
 import { useRouter } from 'next/router';
-import React, { useState, PropsWithChildren, ReactElement } from 'react';
+import React, {
+  useState, PropsWithChildren, ReactElement, useEffect,
+} from 'react';
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
 import AsideMenu from '../AsideMenu/AsideMenu';
@@ -17,7 +19,14 @@ function PageWithAsideMenu({ children, menu }: PropsWithChildren<Props>) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const router = useRouter();
 
-  router.events.on('routeChangeStart', () => setIsMenuOpen(false));
+  useEffect(() => {
+    const handleRouteChange = () => setIsMenuOpen(false);
+    router.events.on('routeChangeStart', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, []);
 
   return (
     <div className={`${styles['page-with-aside-menu']} d-flex`}>

next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -96,14 +96,14 @@
     "mongoose": "^5.10.11",
     "mongoose-unique-validator": "^2.0.3",
     "multer": "^1.4.2",
-    "next": "^10.1.0",
+    "next": "^11.1.0",
     "next-absolute-url": "^1.2.2",
     "next-transpile-modules": "^6.4.0",
     "node-fetch": "^2.6.1",
     "postmark": "^2.7.1",
-    "react": "17.0.2",
+    "react": "^17.0.2",
     "react-bscroll": "^1.0.7",
-    "react-dom": "17.0.2",
+    "react-dom": "^17.0.2",
     "react-redux": "^7.2.1",
     "react-select": "^4.0.2",
     "redux": "^4.0.5",

pages/_error.tsx

@@ -1,4 +1,6 @@
-function Error({ statusCode }) {
+import { NextPageContext } from 'next';
+
+function Error({ statusCode }: { statusCode: number }) {
   return (
     <p>
       {statusCode
@@ -8,8 +10,18 @@ function Error({ statusCode }) {
   );
 }
 
-Error.getInitialProps = ({ res, err }) => {
-  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+Error.getInitialProps = ({ res, err }: NextPageContext) => {
+  // Default code
+  let statusCode = 500;
+
+  if (res) {
+    statusCode = res.statusCode;
+  } else if (err) {
+    statusCode = err.statusCode;
+  } else {
+    console.error('[Error.getInitialProps] Neither `res` nor `err` are defined. ');
+  }
+
   return { statusCode };
 };