upgraded to next11, replaced eslint config with eslint-next-config-next, fixed eslint errors

.eslintrc.js

@@ -1,55 +0,0 @@
-module.exports = {
-  // root: true,
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2020, // Allows for ES8+
-    ecmaFeatures: { jsx: true },
-  },
-  env: {
-    browser: true,
-    node: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:jsx-a11y/recommended',
-    // Prettier plugin and recommended rules
-    'prettier/@typescript-eslint',
-    'plugin:prettier/recommended',
-  ],
-  rules: {
-    // Include .prettierrc.js rules
-    'prettier/prettier': ['error', {}, { usePrettierrc: true }],
-    'react/prop-types': 'off',
-    'react/react-in-jsx-scope': 'off',
-    'react/no-unescaped-entities': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    'jsx-a11y/anchor-is-valid': 'off',
-    'jsx-a11y/anchor-has-content': 'off',
-    'jsx-a11y/iframe-has-title': 'off',
-    'jsx-a11y/click-events-have-key-events': 'off',
-    'jsx-a11y/alt-text': 'off',
-    'jsx-a11y/img-redundant-alt': 'off',
-    'jsx-a11y/no-static-element-interactions': 'off',
-    'jsx-a11y/label-has-associated-control': [
-      'error',
-      {
-        labelComponents: [],
-        labelAttributes: [],
-        controlComponents: [],
-        assert: 'either',
-        depth: 25,
-      },
-    ],
-    '@typescript-eslint/no-explicit-any': 'off',
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-};

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

components/EmailSignup.tsx

@@ -64,7 +64,7 @@ export default function EmailSignup(props: Props): ReactElement {
           'desktop:text-4xl desktop:mb-3',
         )}
       >
-        You've got mail!
+        You've got mail!
       </h3>
       <p
         className={classNames(

components/Input.tsx

@@ -96,7 +96,7 @@ export function Input(props: InputProps) {
   } = props;
 
   // Focus
-  const inputRef = props.ref ?? useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const setInputFocus = () => {
     if (typeof inputRef !== 'string') {
       inputRef?.current?.focus();

components/navigation/SideMenuInner.tsx

@@ -2,6 +2,7 @@
 import { useContext } from 'react';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
+import Link from 'next/link';
 import { useDispatch, useSelector } from 'react-redux';
 import { v4 as uuid } from 'uuid';
 import classNames from 'classnames';
@@ -86,13 +87,14 @@ export function SideMenuInner() {
           <SocialsRow />
 
           <div className="flex items-center justify-between px-3 font-medium whitespace-nowrap">
-            <a
+            <Link href="/downloads/oxen-media-kit.zip">
-              href="/downloads/oxen-media-kit.zip"
+              <a
-              target="_blank"
+                target="_blank"
-              className="flex items-center space-x-1 hover:underline hover:text-secondary"
+                className="flex items-center space-x-1 hover:underline hover:text-secondary"
-            >
+              >
-              <span>Media Kit</span>
+                <span>Media Kit</span>
-            </a>
+              </a>
+            </Link>
             <a
               href="https://coinmarketcap.com/currencies/oxen/"
               target="_blank"
@@ -177,9 +179,11 @@ const SocialsRow = () => {
       <a href="https://sessiongroups.com/" target="_blank" rel="noreferrer">
         <SessionSVG className="h-10 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current hover:bg-primary hover:text-secondary border-primary" />
       </a>
-      <a href="/feed" target="_self" rel="noreferrer">
+      <Link href="/feed">
-        <RssSVG className="h-10 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current hover:bg-primary hover:text-secondary border-primary" />
+        <a target="_self" rel="noreferrer">
-      </a>
+          <RssSVG className="h-10 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current hover:bg-primary hover:text-secondary border-primary" />
+        </a>
+      </Link>
     </div>
   );
 };

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <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.

package.json

@@ -8,8 +8,8 @@
     "build:staging": "NEXT_PUBLIC_SITE_ENV=development NODE_ENV=production next build",
     "start": "NEXT_PUBLIC_SITE_ENV=production NODE_ENV=production next start",
     "start:staging": "NEXT_PUBLIC_SITE_ENV=development NODE_ENV=production next start",
-    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
+    "lint": "next lint --quiet",
-    "lint:fix": "npm run lint -- --fix"
+    "lint:fix": "npm run lint --fix"
   },
   "dependencies": {
     "@ant-design/icons": "^4.2.2",
@@ -22,11 +22,10 @@
     "date-fns": "^2.23.0",
     "feed": "^4.2.2",
     "himalaya": "^1.1.0",
-    "next": "^10.0.6",
+    "next": "^11.1.2",
-    "next-compose-plugins": "^2.2.0",
+    "next-compose-plugins": "^2.2.1",
-    "next-fonts": "^1.4.0",
+    "next-fonts": "^1.5.1",
     "next-svgr": "^0.0.2",
-    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-paginate": "^7.1.0",
@@ -34,7 +33,7 @@
     "react-scripts": "^4.0.2",
     "react-use": "^17.1.1",
     "redux": "^4.0.5",
-    "sharp": "^0.29.0",
+    "sharp": "^0.29.1",
     "uuid": "^8.3.2",
     "xss": "^1.0.9"
   },
@@ -49,16 +48,11 @@
     "@types/react": "^17.0.2",
     "@types/react-redux": "^7.1.9",
     "@types/redux": "^3.6.0",
-    "@typescript-eslint/eslint-plugin": "^3.9.0",
-    "@typescript-eslint/parser": "^3.9.0",
     "autoprefixer": "^10.2.4",
     "contentful-cli": "^1.8.17",
     "cssnano": "^4.1.11",
-    "eslint": "^7.7.0",
+    "eslint": "7.32.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-next": "11.1.2",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
     "husky": "^4.2.5",
     "jest": "^26.6.3",
     "lint-staged": "^10.2.11",

pages/404.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, ReactElement } from 'react';
 import classNames from 'classnames';
 
 // import _404 from '../assets/svgs/404.svg';
@@ -7,7 +7,7 @@ import { ScreenContext } from '../contexts/screen';
 
 import CustomHead from '../components/CustomHead';
 
-function oxen404() {
+export default function Custom404(): ReactElement {
   const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext);
 
   const wrapperStyles = {
@@ -115,5 +115,3 @@ function oxen404() {
     </div>
   );
 }
-
-export default oxen404;

pages/api/feed/atom.ts

@@ -1,8 +1,11 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { readFileSync } from 'fs';
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
   res.statusCode = 200;
   res.setHeader('content-type', 'application/atom+xml');
   res.end(readFileSync('./public/rss/atom.xml'));
-};
+}

pages/api/feed/json.ts

@@ -1,8 +1,11 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { readFileSync } from 'fs';
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
   res.statusCode = 200;
   res.setHeader('content-type', 'application/feed+json');
   res.end(readFileSync('./public/rss/feed.json'));
-};
+}

pages/api/feed/rss.ts

@@ -1,8 +1,11 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { readFileSync } from 'fs';
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
   res.statusCode = 200;
   res.setHeader('content-type', 'application/xml');
   res.end(readFileSync('./public/rss/feed.xml'));
-};
+}