[docs] Fix more SEO issues

GOVERNANCE.md

@@ -5,7 +5,7 @@
 ## Overview
 
 Mui-Org houses projects related to [Material-UI](https://material-ui.com/), a set of [React](https://reactjs.org/) components
-that implement [Google's Material Design](https://material.io/guidelines/material-design/introduction.html)
+that implement [Google's Material Design](https://material.io/design/introduction)
 specification. Our mission is to create a customizable Material Design implementation
 for anyone to use. We value an open, collaborative, and diverse community where anyone can join in
 discussions, learn from one another, and contribute to the project. This document describes how

docs/src/modules/components/Head.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import NextHead from 'next/head';
-import { withRouter } from 'next/router';
+import { _rewriteUrlForNextExport, withRouter } from 'next/router';
 import PropTypes from 'prop-types';
 
 function Head(props) {
@@ -19,7 +19,10 @@ function Head(props) {
       {/* Facebook */}
       <meta property="og:type" content="website" />
       <meta property="og:title" content={title} />
-      <meta property="og:url" content={`https://material-ui.com${router.asPath}`} />
+      <meta
+        property="og:url"
+        content={`https://material-ui.com${_rewriteUrlForNextExport(router.asPath)}`}
+      />
       <meta property="og:description" content={description} />
       <meta property="og:image" content="https://material-ui.com/static/brand.png" />
       <meta property="og:locale" content="en_US" />

docs/src/modules/components/Tidelift.js

@@ -41,7 +41,7 @@ function Tidelift(props) {
     <Link
       className={classes.root}
       variant="button"
-      href="https://tidelift.com/subscription/npm/material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage"
+      href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage"
       target="_blank"
       rel="noopener"
     >

docs/src/modules/utils/generateMarkdown.js

@@ -271,7 +271,7 @@ This property accepts the following keys:
 
 ${text}
 
-Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
+Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](${SOURCE_CODE_ROOT_URL}${normalizePath(
     reactAPI.filename,
   )})
@@ -308,9 +308,9 @@ function generateInheritance(reactAPI) {
 
   return `## Inheritance
 
-The properties of the [${inheritance.component}](${
-    inheritance.pathname
-  }) component${suffix} are also available.
+The properties of the [${inheritance.component}](${_rewriteUrlForNextExport(
+    inheritance.pathname,
+  )}) component${suffix} are also available.
 You can take advantage of this behavior to [target nested components](/guides/api/#spread).
 
 `;

docs/src/pages/customization/css-in-js/css-in-js.md

@@ -4,7 +4,7 @@
 
 Material-UI aims to provide strong foundations for building dynamic UIs.
 For the sake of simplicity, **we expose our styling solution to users**.
-You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability) all the other major solutions.
+You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions.
 
 ## Material-UI's styling solution
 
@@ -39,7 +39,7 @@ Check the jss-rtl [readme](https://github.com/alitaheri/jss-rtl#simple-usage) to
 
 When rendering on the server, you will need to get all rendered styles as a CSS string.
 The `SheetsRegistry` class allows you to manually aggregate and stringify them.
-Read more about [Server Rendering](/guides/server-rendering).
+Read more about [Server Rendering](/guides/server-rendering/).
 
 {{"demo": "pages/customization/css-in-js/JssRegistry.js", "hideEditButton": true}}
 
@@ -206,8 +206,8 @@ export default App;
 react-jss exposes a `JssProvider` component to configure JSS for the underlying child components.
 There are different use cases:
 - Providing a class name generator.
-- [Providing a Sheets registry.](/customization/css-in-js#sheets-registry)
-- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left) or changing the [CSS injection order](/customization/css-in-js#css-injection-order).
+- [Providing a Sheets registry.](/customization/css-in-js/#sheets-registry)
+- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left/) or changing the [CSS injection order](/customization/css-in-js/#css-injection-order).
 Read [the JSS documentation](http://cssinjs.org/js-api/) to learn more about the options available.
 Here is an example:
 
@@ -295,7 +295,7 @@ class MyComponent extends React.Component {
 export default withStyles(styles)(MyComponent);
 ```
 
-Also, you can use as [decorators](https://babeljs.io/docs/plugins/transform-decorators/) like so:
+Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-transform-decorators/) like so:
 
 ```jsx
 import { withStyles } from '@material-ui/core/styles';
@@ -318,7 +318,7 @@ export default MyComponent
 
 ### `createGenerateClassName([options]) => class name generator`
 
-A function which returns [a class name generator function](http://cssinjs.org/js-api#generate-your-own-class-names).
+A function which returns [a class name generator function](http://cssinjs.org/js-api/#generate-your-own-class-names).
 
 #### Arguments
 

docs/src/pages/customization/overrides/overrides.md

@@ -17,10 +17,10 @@ You might need to change the style of a component in some very specific situatio
 The first way to override the style of a component is to use **class names**.
 Every component provides a `className` property which is always applied to the root element.
 
-In this example, we are using the [`withStyles()`](/customization/css-in-js#withstyles-styles-options-higher-order-component) higher-order
+In this example, we are using the [`withStyles()`](/customization/css-in-js/#withstyles-styles-options-higher-order-component) higher-order
 component to inject custom styles into the DOM, and to pass the class name to the `ClassNames` component via
 its `classes` prop. You can choose any other styling solution, or even plain CSS to create the styles, but be sure to
-consider the [CSS injection order](/customization/css-in-js#css-injection-order), as the CSS injected into the DOM
+consider the [CSS injection order](/customization/css-in-js/#css-injection-order), as the CSS injected into the DOM
 by Material-UI to style a component has the highest specificity possible since the `<link>` is injected at the bottom
 of the `<head />` to ensure the components always render correctly.
 
@@ -131,7 +131,7 @@ You don't have to worry about CSS specificity as the inline-style takes preceden
 
 {{"demo": "pages/customization/overrides/InlineStyle.js"}}
 
-[When should I use inline-style vs classes?](/getting-started/faq#when-should-i-use-inline-style-vs-classes-)
+[When should I use inline-style vs classes?](/getting-started/faq/#when-should-i-use-inline-style-vs-classes-)
 
 ## 2. Dynamic variation for a one-time situation
 
@@ -180,7 +180,7 @@ The best approach is to follow option 1 and then take advantage of the compositi
 
 The Material Design specification documents different variations of certain components, such as how buttons come in different shapes: [text](https://material.io/design/components/buttons.html#text-button) (AKA "flat"), [contained](https://material.io/design/components/buttons.html#contained-button) (AKA "raised"), [FAB](https://material.io/design/components/buttons-floating-action-button.html) and more.
 
-Material-UI attempts to implement all of these variations. Please refer to the [Supported Components](/getting-started/supported-components) documentation to find out the current status of all supported Material Design components.
+Material-UI attempts to implement all of these variations. Please refer to the [Supported Components](/getting-started/supported-components/) documentation to find out the current status of all supported Material Design components.
 
 ## 5. Global theme variation
 
@@ -200,4 +200,4 @@ Learn more about it in the [themes section](/customization/themes#customizing-al
 
 You can also customize all instances of a component with CSS.
 We expose a `dangerouslyUseGlobalCSS` option to do so.
-Learn more about it in the [CSS in JS section](/customization/css-in-js#global-css) of the documentation. It's very similar to how you would customize Bootstrap.
+Learn more about it in the [CSS in JS section](/customization/css-in-js/#global-css) of the documentation. It's very similar to how you would customize Bootstrap.

docs/src/pages/customization/themes/themes.md

@@ -49,9 +49,9 @@ If you want to learn more about color, you can check out [the color section](/st
 
 You may override the default palette values by including a `palette` object as part of your theme.
 
-If any of the [`palette.primary`](/customization/default-theme?expend-path=$.palette.primary),
-[`palette.secondary`](/customization/default-theme?expend-path=$.palette.secondary) or
-[`palette.error`](/customization/default-theme?expend-path=$.palette.error)
+If any of the [`palette.primary`](/customization/default-theme/?expend-path=$.palette.primary),
+[`palette.secondary`](/customization/default-theme/?expend-path=$.palette.secondary) or
+[`palette.error`](/customization/default-theme/?expend-path=$.palette.error)
 'intention' objects are provided, they will replace the defaults.
 
 The intention value can either be a [color](/style/color) object, or an object with one or more of the following keys:
@@ -210,7 +210,7 @@ The theme provides a **limited set of type sizes** that work well together along
 These sizes are used across the components.
 
 Have a look at the following example regarding changing the default values, such as the font family.
-If you want to learn more about typography, you can check out [the typography section](/style/typography).
+If you want to learn more about typography, you can check out [the typography section](/style/typography/).
 
 {{"demo": "pages/customization/themes/TypographyTheme.js"}}
 
@@ -290,11 +290,11 @@ html {
 ### Other variables
 
 In addition to the palette, dark and light types, and typography, the theme normalizes implementation by providing many more default values, such as breakpoints, shadows, transitions, etc.
-You can check out the [default theme section](/customization/default-theme) to view the default theme in full.
+You can check out the [default theme section](/customization/default-theme/) to view the default theme in full.
 
 ### Custom variables
 
-When using Material-UI's [styling solution](/customization/css-in-js) with your own components,
+When using Material-UI's [styling solution](/customization/css-in-js/) with your own components,
 you can also take advantage of the theme.
 It can be convenient to add additional variables to the theme so you can use them everywhere.
 For instance:

docs/src/pages/demos/dialogs/dialogs.md

@@ -67,7 +67,7 @@ For example, if your site prompts for potential subscribers to fill in their ema
 
 ## Responsive full-screen
 
-You may make a `Dialog` responsively full screen the dialog using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens *at or below* the `sm` [screen size](/layout/basics). You can choose your own breakpoint for example `xs` by passing the `breakpoint` argument: `withMobileDialog({breakpoint: 'xs'})(Dialog)`.
+You may make a `Dialog` responsively full screen the dialog using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens *at or below* the `sm` [screen size](/layout/basics/). You can choose your own breakpoint for example `xs` by passing the `breakpoint` argument: `withMobileDialog({breakpoint: 'xs'})(Dialog)`.
 
 {{"demo": "pages/demos/dialogs/ResponsiveDialog.js"}}
 

docs/src/pages/discover-more/team/team.md

@@ -10,4 +10,4 @@ The development of the project and its ecosystem is guided by an international t
 Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request.
 Read our [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
 
-[Join the Material-UI Community!](/discover-more/community)
+[Join the Material-UI Community!](/discover-more/community/)

docs/src/pages/getting-started/comparison/comparison.md

@@ -78,7 +78,7 @@ We removed one important friction in the installation process. (**simpler**)
 Eventually, we reached the limitations of inline-styles and moved toward a CSS-in-JS
 solution. This transition was made without losing the enhancements the first migration introduced 💅.
 **We strongly think that CSS-in-JS is the future of the web platform**.
-You can [learn more about our new styling solution](/customization/css-in-js) in the documentation.
+You can [learn more about our new styling solution](/customization/css-in-js/) in the documentation.
 
 MDC-web relies on SCSS as Bootstrap v4. The SCSS architecture is pretty close to LESS -
 a technology we replaced for its limitations.
@@ -117,7 +117,7 @@ The **less** time you spend on a single contribution, the **more** contributions
 ### Browser support
 
 Materialize supports a wider range of browsers than Material-UI does, for instance,
-they support IE 10 while [we only support IE 11](/getting-started/supported-platforms).
+they support IE 10 while [we only support IE 11](/getting-started/supported-platforms/).
 Only supporting IE 11 allows us to take full advantage of the flexbox layout.
 IE 10 has many issues with flexbox.
 

docs/src/pages/getting-started/faq/faq.md

@@ -48,7 +48,7 @@ It's highly recommended:
 
 However perhaps you're adding some Material-UI components to an app that already uses another styling solution,
 or are already familiar with a different API, and don't want to learn a new one? In that case, head over to the
-[Style Library Interoperability](/guides/interoperability) section,
+[Style Library Interoperability](/guides/interoperability/) section,
 where we show how simple it is to restyle Material-UI components with alternative style libraries.
 
 ## When should I use inline-style vs classes?

docs/src/pages/getting-started/installation/installation.md

@@ -17,7 +17,7 @@ Please note that [react](https://www.npmjs.com/package/react) >= 16.3.0 and [rea
 ## Roboto Font
 
 Material-UI was designed with the [Roboto](https://fonts.google.com/specimen/Roboto)
-font in mind. So be sure to follow [these instructions](/style/typography#general).
+font in mind. So be sure to follow [these instructions](/style/typography/#general).
 For instance, via Google Web Fonts:
 ```html
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
@@ -26,7 +26,7 @@ For instance, via Google Web Fonts:
 ## Font Icons
 
 In order to use the font `Icon` component you must first add the [Material icons](https://material.io/tools/icons/) font.
-Here are [some instructions](/style/icons#font-icons)
+Here are [some instructions](/style/icons/#font-icons)
 on how to do so.
 For instance, via Google Web Fonts:
 ```html

docs/src/pages/getting-started/supported-components/supported-components.md

@@ -23,7 +23,7 @@ to discuss the approach before submitting a pull request.
 - **[Buttons: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html) ✓**
   - Transitions:
     - **[Speed dial](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) ~
-     **([Lab](/lab/about))
+     **([Lab](/lab/about/))
     - [Menu](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions)
     - [Morph](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions)
     - [Full screen](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions)
@@ -80,7 +80,7 @@ to discuss the approach before submitting a pull request.
   - **[Radio button](https://material.io/design/components/selection-controls.html#radio-buttons) ✓**
   - **[Switch](https://material.io/design/components/selection-controls.html#switches) ✓**
 - **[Sliders](https://material.io/design/components/sliders.html) ~
-     **([Lab](/lab/about))
+     **([Lab](/lab/about/))
   - **[Continuous](https://material.io/design/components/sliders.html#continuous-slider) ✓**
   - **[Discrete](https://material.io/design/components/sliders.html#discrete-slider) ~** (WIP)
 - **[Snackbars](https://material.io/design/components/snackbars.html) ✓** (*Legacy Material v1*)

docs/src/pages/getting-started/usage/usage.md

@@ -51,7 +51,7 @@ To ensure proper rendering and touch zooming for all devices, add the responsive
 
 ### CssBaseline
 
-Material-UI provides an optional [CssBaseline](/style/css-baseline) component.
+Material-UI provides an optional [CssBaseline](/style/css-baseline/) component.
 It's fixing some inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
 
 ## Versioned Documentation
@@ -62,6 +62,6 @@ You can find older versions of the documentation on a [separate page](/versions/
 ## Next steps
 
 Now that you have an idea of the basic setup, it's time to learn more about:
-- How to provide [the Material Design font and typography](/style/typography).
+- How to provide [the Material Design font and typography](/style/typography/).
 - How to take advantage of the [theming solution](/customization/themes).
 - How to [override](/customization/overrides) the look and feel of the components.

docs/src/pages/guides/api/api.md

@@ -37,11 +37,11 @@ The `disableRipple` property will flow this way: [`MenuItem`](/api/menu-item/) >
 
 ### Native properties
 
-We avoid documenting native properties supported by the DOM like [`className`](/customization/overrides#overriding-with-class-names).
+We avoid documenting native properties supported by the DOM like [`className`](/customization/overrides/#overriding-with-class-names).
 
 ### CSS Classes
 
-All the components accept a [`classes`](/customization/overrides#overriding-with-classes) property to customize the styles.
+All the components accept a [`classes`](/customization/overrides/#overriding-with-classes) property to customize the styles.
 The classes design answers two constraints:
 to make the classes structure as simple as possible, while sufficient to implement the Material Design specification.
 - The class applied to the root element is always called `root`.
@@ -81,7 +81,7 @@ Nested components inside a component have:
 - their own `xxxComponent` property for performing component injection.
 - their own `xxxRef` property when user might need to perform imperative actions,
   for instance, exposing a `inputRef` property to access the native `input` on the `Input` component.
-  This helps answer the  question ["How can I access the DOM element?"](/getting-started/faq#how-can-i-access-the-dom-element-)
+  This helps answer the  question ["How can I access the DOM element?"](/getting-started/faq/#how-can-i-access-the-dom-element-)
 
 ### Property naming
 

docs/src/pages/guides/migration-v0x/migration-v0x.md

@@ -16,12 +16,12 @@ Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/com
 The ecosystem has evolved a lot since then, we have also learned a lot.
 [@nathanmarks](https://github.com/nathanmarks/) started an ambitious task, rebuilding Material-UI from the **ground-up**
 taking advantage of this knowledge to address long-standing issues. To name some of the major changes:
-- New styling solution using CSS-in-JS (better [customization](/customization/overrides) power, better performance)
-- New [theme handling](/customization/themes) (nesting, self-supporting, etc.)
+- New styling solution using CSS-in-JS (better [customization](/customization/overrides/) power, better performance)
+- New [theme handling](/customization/themes/) (nesting, self-supporting, etc.)
 - Blazing fast documentation thanks to [Next.js](https://github.com/zeit/next.js)
-- Way better [test coverage](/guides/testing) (99%+, run on all the major browsers, [visual regression tests](https://www.argos-ci.com/mui-org/material-ui))
-- Full [server-side rendering](/guides/server-rendering) support
-- Wide range of [supported browsers](/getting-started/supported-platforms)
+- Way better [test coverage](/guides/testing/) (99%+, run on all the major browsers, [visual regression tests](https://www.argos-ci.com/mui-org/material-ui))
+- Full [server-side rendering](/guides/server-rendering/) support
+- Wide range of [supported browsers](/getting-started/supported-platforms/)
 
 ### Where should I start in a migration?