[243] Upgrade next.js

components/pages/activity/components/ActivityPagination/styled.ts

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
-import { component as LeftPointer } from 'public/images/icons/left-pointer.svg';
-import { component as RightPointer } from 'public/images/icons/right-pointer.svg';
+import LeftPointer from 'public/images/icons/left-pointer.svg';
+import RightPointer from 'public/images/icons/right-pointer.svg';
 
 export const Wrapper = styled.div`
   display: flex;

components/shared/atoms/Logo/Logo.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { component as LogoIcon } from 'public/images/logo.svg';
+import LogoIcon from 'public/images/logo.svg';
 
 const Logo = (): JSX.Element => (
   <Link href="/" passHref>

lib/withApolloClient.jsx

@@ -1,4 +1,3 @@
-import Head from 'next/head';
 import { ApolloClient, ApolloLink, HttpLink, InMemoryCache, ApolloProvider } from '@apollo/client';
 import fetch from 'isomorphic-unfetch';
 
@@ -186,10 +185,6 @@ function withApollo(PageComponent, { ssr = true } = {}) {
             console.error('Error while running `getDataFromTree`', error);
           }
         }
-
-        // getDataFromTree does not call componentWillUnmount
-        // head side effect therefore need to be cleared manually
-        Head.rewind();
       }
 
       return {

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.

next.config.js

@@ -2,21 +2,15 @@
 /* eslint-disable no-param-reassign */
 
 const dotenv = require('dotenv');
-const withPlugins = require('next-compose-plugins');
-const nextImages = require('next-images');
-const nextFonts = require('next-fonts');
-const svgr = require('next-svgr');
 const path = require('path');
 
 dotenv.config();
 
-const nextConfig = {
+module.exports = {
   webpack: (config, { isServer }) => {
     // Fixes npm packages that depend on `fs` module
     if (!isServer) {
-      config.node = {
-        fs: 'empty',
-      };
+      config.resolve.fallback.fs = false;
     }
 
     // add polyfills to all browsers
@@ -59,5 +53,3 @@ const nextConfig = {
     polyfillsOptimization: true,
   },
 };
-
-module.exports = withPlugins([[nextImages], [nextFonts], [svgr]], nextConfig);

package.json

@@ -44,12 +44,7 @@
     "isomorphic-unfetch": "^3.0.0",
     "jest-extended": "^0.11.5",
     "lodash": "^4.17.15",
-    "next": "10.2.3",
-    "next-compose-plugins": "^2.2.0",
-    "next-fonts": "^1.1.0",
-    "next-images": "^1.4.0",
-    "next-svgr": "^0.0.2",
-    "next-with-apollo": "^5.0.0",
+    "next": "11.1.4",
     "polished": "^3.4.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",