✨ Created type to support session in _app.tsx

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

@@ -12,6 +12,7 @@
     "@next-auth/mongodb-adapter": "^1.0.1",
     "@tailwindcss/typography": "^0.5.7",
     "@types/formidable": "^1.2.3",
+    "@types/react-dom": "^18.0.6",
     "@types/react-timeago": "^4.1.3",
     "autoprefixer": "^10.2.6",
     "aws-sdk": "^2.946.0",
@@ -22,13 +23,13 @@
     "mongodb": "^4.4.0",
     "multer": "^1.4.2",
     "multiparty": "^4.2.2",
-    "next": "^11.0.0",
+    "next": "^12.3.0",
     "next-auth": "^4.2.1",
     "next-connect": "^0.10.2",
     "next-sitemap": "^1.6.168",
     "postcss": "^8.3.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^11.3.4",
     "react-hot-toast": "^2.1.1",
     "react-markdown": "^7.0.1",
@@ -41,7 +42,7 @@
   },
   "devDependencies": {
     "@types/multiparty": "^0.0.33",
-    "@types/react": "17.0.11",
+    "@types/react": "^18.0.19",
     "typescript": "4.3.2"
   }
 }

pages/_app.tsx

@@ -2,15 +2,20 @@ import "../styles/globals.css";
 import { motion } from "framer-motion";
 import type { AppProps } from "next/app";
 import { Toaster } from "react-hot-toast";
+import type { NextComponentType } from "next";
 import { PostsWrapper } from "../context/posts";
 import { SessionProvider } from "next-auth/react";
 import { OwnPostsWrapper } from "../context/ownPosts";
 
+type AppPropsWithSession = AppProps & {
+  pageProps: NextComponentType & { session?: any };
+};
+
 function MyApp({
   Component,
   pageProps: { session, ...pageProps },
   router,
-}: AppProps) {
+}: AppPropsWithSession) {
   return (
     <SessionProvider session={session}>
       <PostsWrapper>