Migrate to NextJS with npx @next/codemod cra-to-next

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

.gitignore

@@ -30,3 +30,12 @@ yarn-error.log*
 
 dist/
 .eslintcache
+
+# next.js
+/.next/
+/out/
+*.pem
+# debug
+# local env files
+# vercel
+.vercel

jest.config.js

@@ -0,0 +1,37 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  clearMocks: true,
+  testPathIgnorePatterns: [
+    '<rootDir>/.next/',
+    '<rootDir>/node_modules/',
+    '<rootDir>/cypress/',
+    '<rootDir>/dist/',
+    '<rootDir>/build/',
+  ],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+    '.(jpg|jpeg|png|otf|webp|ttf|woff|woff2|svg)$':
+      '<rootDir>/src/test-utils/fileTransform.js',
+  },
+  // For absolute imports
+  modulePaths: ['<rootDir>/src'],
+  collectCoverageFrom: [
+    'src/**/*.{js,ts,tsx}',
+    '!src/**/*.{types,type,d}.ts',
+    '!src/setup*',
+    '!src/index.tsx',
+    '!src/**/index.ts',
+    '!src/types/**',
+    '!**/test-utils/**',
+    '!src/pages/*',
+  ],
+  coverageThreshold: {
+    global: {
+      statements: 95,
+      branches: 70,
+      functions: 95,
+      lines: 94,
+    },
+  },
+};

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  env: {
+    PUBLIC_URL: '/carousel/',
+  },
+  experimental: {
+    craCompat: true,
+  },
+  // Remove this to leverage Next.js' static image handling
+  // read more here: https://nextjs.org/docs/api-reference/next/image
+  images: {
+    disableStaticImages: true,
+  },
+};

package.json

@@ -27,30 +27,43 @@
     "@types/node": "15.12.5",
     "@types/react": "17.0.11",
     "@types/react-dom": "17.0.8",
+    "@typescript-eslint/eslint-plugin": "4.28.1",
+    "@typescript-eslint/parser": "4.28.1",
+    "babel-eslint": "10.1.0",
+    "error": "10.4.0",
     "eslint": "7.29.0",
+    "eslint-config-next": "11.0.1",
     "eslint-config-prettier": "8.3.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.8.0",
+    "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jest-dom": "3.9.0",
+    "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "7.24.0",
+    "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-testing-library": "4.6.0",
     "husky": "6.0.0",
+    "jest": "27.0.6",
     "lint-staged": "11.0.0",
+    "next": "11.0.1",
     "npm-run-all": "4.1.5",
     "pinst": "2.1.6",
     "prettier": "2.3.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-scripts": "4.0.3",
     "rollup": "2.52.3",
     "rollup-plugin-typescript2": "0.30.0",
     "rollup-plugin-virtual": "1.0.1",
     "typescript": "4.3.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
+    "start": "next dev",
+    "start-production": "next start",
+    "build": "next build && next export --outdir build",
     "lint": "eslint --ext js,ts,tsx src --max-warnings=0",
     "build:package": "rollup -c && node copy-package-json.js && cp README.md dist",
-    "test": "react-scripts test --coverage",
+    "test": "jest test --coverage",
     "deploy": "npx gh-pages -d build",
     "format": "yarn lint --fix",
     "release": "npm-run-all build:package && cd dist && npm publish",

src/global.d.ts

@@ -0,0 +1,6 @@
+declare module '*.jpeg';
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.svg';
+declare module '*.ico';
+declare module '*.webp';

src/index.tsx

@@ -1,11 +1,11 @@
 import { StrictMode } from 'react';
-import ReactDOM from 'react-dom';
 
 import App from './App';
 
-ReactDOM.render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-  document.getElementById('root')
-);
+export default function NextIndexWrapper() {
+  return (
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}

src/pages/[[...slug]].tsx

@@ -0,0 +1,39 @@
+// import NextIndexWrapper from '..'
+
+// next/dynamic is used to prevent breaking incompatibilities
+// with SSR from window.SOME_VAR usage, if this is not used
+// next/dynamic can be removed to take advantage of SSR/prerendering
+import dynamic from 'next/dynamic';
+
+import { GetStaticPathsResult } from 'next';
+
+// try changing "ssr" to true below to test for incompatibilities, if
+// no errors occur the above static import can be used instead and the
+// below removed
+const NextIndexWrapper = dynamic(() => import('..'), { ssr: false });
+
+/**
+ * Ensures that [[...slug]].tsx is outputed as index.html
+ */
+export async function getStaticPaths(): Promise<
+  GetStaticPathsResult<{ slug: string[] }>
+> {
+  return {
+    // An empty array, as per documentation, will generate one only index.html
+    // ref: https://nextjs.org/docs/basic-features/data-fetching#the-paths-key-required
+    paths: [{ params: { slug: [] } }],
+    // To have an SPA both in dev and prod mode
+    fallback: process.env.NODE_ENV === 'development',
+  };
+}
+
+/**
+ * Empty function needed for getStaticPaths to work
+ */
+export async function getStaticProps() {
+  return { props: {} };
+}
+
+export default function Page(props: any): JSX.Element {
+  return <NextIndexWrapper {...props} />;
+}

src/pages/_app.tsx

@@ -0,0 +1,17 @@
+import Head from 'next/head';
+
+export default function MyApp({ Component, pageProps }: any): JSX.Element {
+  return (
+    <>
+      <Head>
+        <title>Material-UI Carousel</title>
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+        />
+      </Head>
+
+      <Component {...pageProps} />
+    </>
+  );
+}

src/pages/_document.tsx

@@ -0,0 +1,31 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <meta charSet="utf-8" />
+          <link rel="icon" href={`${process.env.PUBLIC_URL}/favicon.ico`} />
+          <meta name="theme-color" content="#000000" />
+          <meta
+            name="description"
+            content="Web site created using create-react-app"
+          />
+          <link
+            rel="manifest"
+            href={`${process.env.PUBLIC_URL}/manifest.json`}
+          />
+          <noscript>You need to enable JavaScript to run this app.</noscript>
+        </Head>
+
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

src/test-utils/fileTransform.js

@@ -0,0 +1,39 @@
+const path = require('path');
+
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};

tsconfig.json

@@ -1,7 +1,12 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["es6", "dom", "dom.iterable", "esnext"],
+    "lib": [
+      "es6",
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -14,8 +19,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "declaration": true,
-  "include": ["src"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }