upgrade next and react

Author: davidcsally

.eslintrc.js

@@ -48,5 +48,12 @@ module.exports = {
     'react-hooks/exhaustive-deps': 0,
 
     semi: ['error', 'never'],
+    // mac / windows end of line
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
 }

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package.json

@@ -28,12 +28,12 @@
   "dependencies": {
     "border-box.css": "^1.0.0",
     "framer-motion": "^4.1.17",
-    "next": "^11.1.2",
+    "next": "^12.2.5",
     "normalize.css": "^8.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.14.3",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^11.1.2",
@@ -45,15 +45,15 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.2",
-    "@types/react": "^17.0.30",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "@types/react-modal": "^3.13.1",
-    "@types/styled-components": "^5.1.15",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
     "babel-plugin-styled-components": "^1.13.3",
     "cypress": "^9.5.4",
-    "eslint": "^8.12.0",
+    "eslint": "^8.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",

pages/index.tsx

@@ -25,7 +25,9 @@ const Home = () => (
       />
     </Head>
     <App />
-    <Script strategy="afterInteractive">{GA}</Script>
+    <Script id="ga-script" strategy="afterInteractive">
+      {GA}
+    </Script>
   </>
 )
 

src/styles/global.ts

@@ -2,7 +2,7 @@ import { createGlobalStyle } from 'styled-components'
 
 import { palette } from './colors'
 
-export default createGlobalStyle`
+const GlobalStyles = createGlobalStyle`
   ${palette}
 
   body {
@@ -32,3 +32,5 @@ export default createGlobalStyle`
     margin: 0;
   }
 `
+
+export default GlobalStyles