Upgrade Next, React, TypeScript (#91)

closes #41

# Steps for reviewing

1. `git checkout adi-upgrade-deps`
1. `git clean -xfd`
1. `npm i`
1. `npm run dev`
1. make sure everything looks normal

Reviewed-on: #91
Reviewed-by: n3parikh <n3parikh@localhost>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>

next-env.d.ts

@@ -1,86 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
-
-declare module "*.event.mdx" {
-  import { ComponentType } from "react";
-
-  interface EventMetadata {
-    name: string;
-    short: string;
-    date: Date;
-    online: boolean;
-    location: string;
-    poster?: string;
-    registerLink?: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: EventMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.news.mdx" {
-  import { ComponentType } from "react";
-
-  interface NewsMetadata {
-    author: string;
-    date: Date;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: NewsMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.team-member.mdx" {
-  import { ComponentType } from "react";
-
-  interface TeamMemberMetadata {
-    name: string;
-    role: string;
-    image?: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: TeamMemberMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.section.mdx" {
-  import { ComponentType } from "react";
-
-  interface SectionMetadata {
-    title: string;
-    id: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: SectionMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.talk.mdx" {
-  import { ComponentType } from "react";
-
-  interface TalkMetadata {
-    name: string;
-    short: string;
-    poster?: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: TalkMetadata;
-  export default ReactComponent;
-}
-declare module "*.mdx" {
-  import { ComponentType } from "react";
-
-  const ReactComponent: ComponentType;
-
-  export default ReactComponent;
-}
+/// <reference types="next/image-types/global" />

next.config.js

@@ -6,4 +6,5 @@ module.exports = withMDX({
   pageExtensions: ["ts", "tsx", "mdx"],
   trailingSlash: true,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  eslint: { ignoreDuringBuilds: true }
 });

package.json

@@ -12,32 +12,32 @@
   "dependencies": {
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@next/mdx": "^10.1.3",
+    "@next/mdx": "11.0.1",
     "date-fns": "^2.11.1",
-    "next": "^10.0.0",
-    "next-mdx-remote": "^3.0.2",
+    "next": "11.0.1",
+    "next-mdx-remote": "3.0.4",
     "prettier": "^2.3.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "remark": "^12.0.0",
     "remark-html": "^12.0.0"
   },
   "devDependencies": {
     "@types/mdx-js__react": "^1.5.3",
     "@types/node": "^14.14.41",
-    "@types/react": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "eslint": "^7.25.0",
+    "@types/react": "^17.0.14",
+    "@typescript-eslint/eslint-plugin": "4.28.4",
+    "@typescript-eslint/parser": "4.28.4",
+    "eslint": "7.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "gray-matter": "^4.0.3",
     "postcss": "^8.3.0",
     "postcss-calc": "^8.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
-    "typescript": "^4.2.4"
+    "typescript": "4.3.5"
   }
 }

tsconfig.json

@@ -27,6 +27,7 @@
   },
   "include": [
     "next-env.d.ts",
+    "types.d.ts",
     "**/*.ts",
     "**/*.tsx"
   ],

types.d.ts

@@ -0,0 +1,84 @@
+declare module "*.event.mdx" {
+  import { ComponentType } from "react";
+
+  interface EventMetadata {
+    name: string;
+    short: string;
+    date: Date;
+    online: boolean;
+    location: string;
+    poster?: string;
+    registerLink?: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: EventMetadata;
+  export default ReactComponent;
+}
+
+declare module "*.news.mdx" {
+  import { ComponentType } from "react";
+
+  interface NewsMetadata {
+    author: string;
+    date: Date;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: NewsMetadata;
+  export default ReactComponent;
+}
+
+declare module "*.team-member.mdx" {
+  import { ComponentType } from "react";
+
+  interface TeamMemberMetadata {
+    name: string;
+    role: string;
+    image?: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: TeamMemberMetadata;
+  export default ReactComponent;
+}
+
+declare module "*.section.mdx" {
+  import { ComponentType } from "react";
+
+  interface SectionMetadata {
+    title: string;
+    id: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: SectionMetadata;
+  export default ReactComponent;
+}
+
+declare module "*.talk.mdx" {
+  import { ComponentType } from "react";
+
+  interface TalkMetadata {
+    name: string;
+    short: string;
+    poster?: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: TalkMetadata;
+  export default ReactComponent;
+}
+
+declare module "*.mdx" {
+  import { ComponentType } from "react";
+
+  const ReactComponent: ComponentType;
+
+  export default ReactComponent;
+}