[docs] Upgrade to next 9 (mui#18441)

docs/babel.config.js

@@ -31,7 +31,6 @@ module.exports = {
   presets: [
     // backport of https://github.com/zeit/next.js/pull/9511
     ['next/babel', { 'transform-runtime': { corejs: 2, version: transformRuntimeVersion } }],
-    '@zeit/next-typescript/babel',
   ],
   plugins: [
     'babel-plugin-optimize-clsx',

docs/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

docs/next.config.js

@@ -1,10 +1,9 @@
 const webpack = require('webpack');
 const path = require('path');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const withTypescript = require('@zeit/next-typescript');
 const pkg = require('../package.json');
 const { findPages } = require('./src/modules/utils/find');
-const { LANGUAGES_SSR } = require('./src/modules/constants');
+const { LANGUAGES, LANGUAGES_SSR } = require('./src/modules/constants');
 
 const workspaceRoot = path.join(__dirname, '../');
 
@@ -13,7 +12,7 @@ const workspaceRoot = path.join(__dirname, '../');
  */
 const reactMode = 'legacy';
 
-module.exports = withTypescript({
+module.exports = {
   webpack: (config, options) => {
     const plugins = config.plugins.concat([
       new webpack.DefinePlugin({
@@ -138,7 +137,7 @@ module.exports = withTypescript({
 
       pages2.forEach(page => {
         if (!page.children) {
-          map[`${prefix}${page.pathname}`] = {
+          map[`${prefix}${page.pathname.replace(/^\/api-docs\/(.*)/, '/api/$1')}`] = {
             page: page.pathname,
             query: {
               userLanguage,
@@ -153,19 +152,25 @@ module.exports = withTypescript({
 
     // We want to speed-up the build of pull requests.
     if (process.env.PULL_REQUEST === 'true') {
+      // eslint-disable-next-line no-console
+      console.log('Considering only English for SSR');
       traverse(pages, 'en');
     } else {
+      // eslint-disable-next-line no-console
+      console.log('Considering various locales for SSR');
       LANGUAGES_SSR.forEach(userLanguage => {
         traverse(pages, userLanguage);
       });
     }
 
     return map;
   },
-  onDemandEntries: {
-    // Period (in ms) where the server will keep pages in the buffer
-    maxInactiveAge: 120 * 1e3, // default 25s
-    // Number of pages that should be kept simultaneously without being disposed
-    pagesBufferLength: 3, // default 2
+  experimental: {
+    async rewrites() {
+      return [
+        { source: `/:lang(${LANGUAGES.join('|')})?/:rest`, destination: '/:rest' },
+        { source: '/api/:rest*', destination: '/api-docs/:rest*' },
+      ];
+    },
   },
-});
+};

docs/package.json

@@ -7,10 +7,10 @@
   "scripts": {
     "build": "rimraf .next && cross-env NODE_ENV=production next build",
     "build-sw": "node ./scripts/buildServiceWorker.js",
-    "dev": "rimraf ./node_modules/.cache/babel-loader && cross-env NODE_ENV=development node src/server.js",
+    "dev": "rimraf ./node_modules/.cache/babel-loader && next dev",
     "deploy": "git push material-ui-docs master:latest",
-    "export": "rimraf docs/export && next export --threads=3 --concurrency=5 -o export && yarn build-sw && cpy \"cdn/*\" export",
-    "icons": "rimraf static/icons/* && node ./scripts/buildIcons.js",
+    "export": "rimraf docs/export && next export --threads=3 -o export && yarn build-sw",
+    "icons": "rimraf public/static/icons/* && node ./scripts/buildIcons.js",
     "start": "next start",
     "typescript": "tsc -p tsconfig.json",
     "typescript:transpile": "node scripts/formattedTSDemos",
@@ -45,7 +45,6 @@
     "@types/react-virtualized": "^9.21.4",
     "@types/react-window": "^1.7.0",
     "@types/styled-components": "5.0.1",
-    "@zeit/next-typescript": "^1.1.1",
     "accept-language": "^3.0.18",
     "address": "^1.0.3",
     "ast-types": "^0.13.2",
@@ -84,7 +83,7 @@
     "marked": "^0.8.0",
     "material-table": "^1.50.0",
     "material-ui-popup-state": "^1.4.1",
-    "next": "8.1.0",
+    "next": "9.1.4",
     "notistack": "^0.9.3",
     "nprogress": "^0.2.0",
     "postcss": "^7.0.18",

docs/pages/_app.js

@@ -2,7 +2,7 @@
 import 'docs/src/modules/components/bootstrap';
 // --- Post bootstrap -----
 import React from 'react';
-import App, { Container } from 'next/app';
+import App from 'next/app';
 import find from 'lodash/find';
 import { Provider as ReduxProvider, useDispatch, useSelector } from 'react-redux';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
@@ -292,7 +292,6 @@ function AppWrapper(props) {
     // See `_rewriteUrlForNextExport` on Next.js side.
     pathname = pathname.replace(/\/$/, '');
   }
-  // console.log(pages, { ...router, pathname })
   const activePage = findActivePage(pages, pathname);
 
   let fonts = ['https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'];
@@ -304,22 +303,20 @@ function AppWrapper(props) {
 
   return (
     <ReactMode>
-      <Container>
-        <NextHead>
-          {fonts.map(font => (
-            <link rel="stylesheet" href={font} key={font} />
-          ))}
-        </NextHead>
-        <ReduxProvider store={redux}>
-          <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
-            <StylesProvider jss={jss}>
-              <ThemeProvider>{children}</ThemeProvider>
-            </StylesProvider>
-          </PageContext.Provider>
-          <PersistState />
-          <LanguageNegotiation />
-        </ReduxProvider>
-      </Container>
+      <NextHead>
+        {fonts.map(font => (
+          <link rel="stylesheet" href={font} key={font} />
+        ))}
+      </NextHead>
+      <ReduxProvider store={redux}>
+        <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
+          <StylesProvider jss={jss}>
+            <ThemeProvider>{children}</ThemeProvider>
+          </StylesProvider>
+        </PageContext.Provider>
+        <PersistState />
+        <LanguageNegotiation />
+      </ReduxProvider>
       <GoogleAnalytics key={router.route} />
     </ReactMode>
   );

docs/pages/index.js

@@ -95,7 +95,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const GettingStartedLink = React.forwardRef((props, ref) => {
-  return <Link href="/getting-started/installation" naked prefetch ref={ref} {...props} />;
+  return <Link href="/getting-started/installation" naked ref={ref} {...props} />;
 });
 
 export default function HomePage() {