[Docs] Upgrade Next.js to 12.1.0 (#6722)

* [Docs] Upgrade Next.js to 12.1.0
* Fix React `validateDOMNesting()` errors

docs/next/.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+*.tsbuildinfo

docs/next/components/mdx/MDXComponents.tsx

@@ -315,9 +315,9 @@ export default {
     );
   },
   img: ({ children, ...props }) => (
-    <div className="mx-auto">
+    <span className="block mx-auto">
       <img {...(props as any)} />
-    </div>
+    </span>
   ),
   Image: ({ children, ...props }) => {
     /* Only version images when all conditions meet:
@@ -329,10 +329,10 @@ export default {
     const { src } = props;
     if (version === "master" || !src.startsWith("/images/")) {
       return (
-      <Zoom>
-        <div className="mx-auto">
+      <Zoom wrapElement="span" wrapStyle={{display: 'block'}}>
+        <span className="block mx-auto">
           <Image {...(props as any)} />
-        </div>
+        </span>
       </Zoom>
       );
     }
@@ -343,15 +343,15 @@ export default {
     ).href;
 
     return (
-      <Zoom>
-        <div className="mx-auto">
+      <Zoom wrapElement="span" wrapStyle={{display: 'block'}}>
+        <span className="block mx-auto">
           <Image
             src={resolvedPath}
             width={props.width}
             height={props.height}
             alt={props.alt}
           />
-        </div>
+        </span>
       </Zoom>
     );
   },

docs/next/global.d.ts

@@ -0,0 +1 @@
+declare const __VERSIONING_DISABLED__: boolean;

docs/next/jest.config.js

@@ -0,0 +1,13 @@
+// https://nextjs.org/docs/testing
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  dir: __dirname,
+});
+
+const customJestConfig = {
+  moduleDirectories: ["node_modules", "<rootDir>/"],
+  testEnvironment: "node",
+};
+
+module.exports = createJestConfig(customJestConfig);

docs/next/next-env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
 
-declare const __VERSIONING_DISABLED__: boolean;
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

docs/next/package.json

@@ -9,6 +9,7 @@
     "start": "next start",
     "snapshot": "ts-node -O '{\"module\": \"commonjs\"}' scripts/snapshot.ts && yarn format",
     "test": "jest",
+    "typecheck": "tsc",
     "format": "prettier --config ./.prettierrc.js --write \"../content/**/*.mdx\" --loglevel warn && remark --rc-path ./.remarkrc.js \"../content/**/*.mdx\" --output --silent"
   },
   "dependencies": {
@@ -32,7 +33,7 @@
     "image-size": "^0.9.7",
     "mdast-util-toc": "^5.1.0",
     "new-github-issue-url": "^0.2.1",
-    "next": "^10.0.9",
+    "next": "^12.1.0",
     "next-mdx-remote": "^2.1.3",
     "next-remote-watch": "git+https://github.com/hashicorp/next-remote-watch.git#405c803c6b9b19eb8307d66cf5c93fc3a66a1c5",
     "next-seo": "^4.17.0",
@@ -60,10 +61,10 @@
   "devDependencies": {
     "@tailwindcss/jit": "^0.1.1",
     "@types/classnames": "^2.2.11",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.4.0",
     "@types/node": "^14.14.22",
     "@types/react": "^17.0.0",
-    "jest": "^26.6.3",
+    "jest": "^27.5.1",
     "prettier": "^2.2.1",
     "remark-cli": "^9.0.0",
     "remark-gfm": "^1.0.0",

docs/next/tsconfig.json

@@ -14,8 +14,9 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "baseUrl": ".",
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "global.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

docs/next/util/bolt.ts

@@ -92,6 +92,7 @@ export default function (receiver) {
         dryRun: event.text.includes("--skip-issue"),
       });
 
+      // @ts-expect-error
       await say({ text: `Created issue at: ${issue}`, thread_ts });
     }
   });