Updating project to Next 12

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     'airbnb',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
+    'plugin:@next/next/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -47,6 +48,9 @@ module.exports = {
         tsx: 'never',
       },
     ],
+    'react/function-component-definition': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/require-default-props': 'off',
   },
   settings: {
     'import/resolver': {

jest.config.js

@@ -0,0 +1,18 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <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

@@ -1,19 +1,15 @@
-const withPlugins = require('next-compose-plugins');
+/** @type {import('next').NextConfig} */
+
 const withPWA = require('next-pwa');
 
-module.exports = withPlugins([
-  [
-    withPWA,
-    {
-      pwa: {
-        dest: 'public',
-      },
-    },
-  ],
-  {
-    basePath: '/react-timestamper',
-    future: {
-      webpack5: true,
-    },
+module.exports = withPWA({
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+  pwa: {
+    dest: 'public'
   },
-]);
+  basePath: '/react-timestamper'
+});
+

package.json

@@ -9,41 +9,41 @@
     "test": "jest"
   },
   "dependencies": {
-    "date-fns": "^2.21.3",
-    "formik": "^2.2.6",
-    "next": "^10.2.0",
-    "next-compose-plugins": "^2.2.1",
-    "next-pwa": "^5.2.21",
-    "next-seo": "^4.24.0",
+    "date-fns": "^2.28.0",
+    "formik": "^2.2.9",
+    "next": "^12.1.1",
+    "next-pwa": "^5.4.6",
+    "next-seo": "^5.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0",
-    "styled-components": "^5.3.0"
+    "react-icons": "^4.3.1",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.2.7",
-    "@types/jest": "^26.0.23",
-    "@types/node": "15.3.0",
-    "@types/react": "17.0.5",
-    "@types/react-dom": "17.0.5",
-    "@types/styled-components": "5.1.9",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
-    "@typescript-eslint/parser": "^4.23.0",
-    "babel-jest": "^26.6.3",
-    "babel-plugin-styled-components": "^1.12.0",
-    "eslint": "^7.26.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "^2.23.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^26.6.3",
-    "prettier": "^2.3.0",
+    "@next/eslint-plugin-next": "^12.1.1",
+    "@testing-library/react": "^12.1.4",
+    "@types/jest": "^27.4.1",
+    "@types/node": "17.0.23",
+    "@types/react": "17.0.43",
+    "@types/react-dom": "17.0.14",
+    "@types/styled-components": "5.1.24",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "babel-jest": "^27.5.1",
+    "babel-plugin-styled-components": "^2.0.6",
+    "eslint": "^8.12.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^2.7.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "jest": "^27.5.1",
+    "prettier": "^2.6.1",
     "rimraf": "^3.0.2",
-    "typescript": "^4.2"
+    "typescript": "^4.6"
   },
   "license": "MIT"
 }

pages/_app.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Head from 'next/head';
 import { AppProps } from 'next/app';
 import Router from 'next/router';
@@ -23,56 +22,42 @@ const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => (
       <meta name="theme-color" content="#3C3845" />
 
       <link
-        href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
-        rel="stylesheet"
-      />
-      <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-2048-2732.png"
         media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
       />
       <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-1668-2388.png"
         media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
       />
       <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-1668-2224.png"
         media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
       />
       <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-1536-2048.png"
         media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
       />
       <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-1242-2688.png"
         media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
       />
       <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-1125-2436.png"
         media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
       />
       <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-828-1792.png"
         media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
       />
       <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-1242-2208.png"
         media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
       />
       <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-750-1334.png"
         media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
       />
       <link
-        rel="apple-touch-startup-image"
         href="/assets/apple-splash-640-1136.png"
         media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
       />

pages/_document.tsx

@@ -1,44 +1,9 @@
-import React from 'react';
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-  DocumentContext,
-} from 'next/document';
-import { ServerStyleSheet } from 'styled-components';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 import { GA_TRACKING_ID } from '../src/services/ga';
 
 export default class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
-    const sheet = new ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
-
-    try {
-      ctx.renderPage = () =>
-        originalRenderPage({
-          enhanceApp: (App) => (props) =>
-            sheet.collectStyles(<App {...props} />),
-        });
-
-      const initialProps = await Document.getInitialProps(ctx);
-
-      return {
-        ...initialProps,
-        styles: (
-          <>
-            {initialProps.styles}
-            {sheet.getStyleElement()}
-          </>
-        ),
-      };
-    } finally {
-      sheet.seal();
-    }
-  }
-
-  render() {
+  render(): JSX.Element {
     return (
       <Html lang="en">
         <Head>
@@ -62,6 +27,11 @@ export default class MyDocument extends Document {
               />
             </>
           )}
+
+          <link
+            href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
+            rel="stylesheet"
+          />
         </Head>
         <body>
           <Main />

src/components/Button/__tests__/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 
 import CustomButton from '..';

src/components/Button/index.tsx

@@ -1,4 +1,5 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
+
 import styled from 'styled-components';
 
 const Button: React.FC<ButtonHTMLAttributes<HTMLButtonElement>> = styled.button`

src/components/Input/__tests__/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import CustomInput from '..';

src/components/Input/index.tsx

@@ -1,4 +1,5 @@
-import React, { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+
 import { IconBaseProps } from 'react-icons';
 
 import { Container, Input } from './styles';

src/pages/__tests__/index.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, fireEvent, act, waitFor } from '@testing-library/react';
 
 import App from '..';

src/pages/index.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
+
 import { Form, Formik, FormikProps } from 'formik';
 import { fromUnixTime, format, getUnixTime } from 'date-fns';
 import { FaClock } from 'react-icons/fa';

tsconfig.json

@@ -3,7 +3,10 @@
     "target": "esnext",
     "module": "esnext",
     "jsx": "preserve",
-    "lib": ["dom", "es2017"],
+    "lib": [
+      "dom",
+      "es2017"
+    ],
     "moduleResolution": "node",
     "allowJs": true,
     "noEmit": true,
@@ -18,8 +21,15 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "incremental": true
   },
-  "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }