[docs] Improve Next.js usage (#19075)

chrisweb · oliviertassinari · commit 157404d9164a · 2020-01-05T00:35:08.000+01:00
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -35,11 +35,6 @@ export default class MyDocument extends Document {
     return (
       <html lang={userLanguage}>
         <Head>
-          {/* Use minimum-scale=1 to enable GPU rasterization. */}
-          <meta
-            name="viewport"
-            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-          />
           {/*
             manifest.json provides metadata used when your web app is added to the
             homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js
@@ -12,6 +12,11 @@ export default function Head(props) {
 
   return (
     <NextHead>
+      {/* Use minimum-scale=1 to enable GPU rasterization. */}
+      <meta
+        name="viewport"
+        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+      />
       <title>{title}</title>
       <meta name="description" content={description} />
       {/* Twitter */}
diff --git a/examples/create-react-app-with-typescript/public/index.html b/examples/create-react-app-with-typescript/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/examples/create-react-app/public/index.html b/examples/create-react-app/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/examples/nextjs-with-typescript/pages/_app.tsx b/examples/nextjs-with-typescript/pages/_app.tsx
@@ -21,6 +21,10 @@ export default class MyApp extends App {
       <React.Fragment>
         <Head>
           <title>My page</title>
+          <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+          />
         </Head>
         <ThemeProvider theme={theme}>
           {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
diff --git a/examples/nextjs-with-typescript/pages/_document.tsx b/examples/nextjs-with-typescript/pages/_document.tsx
@@ -8,11 +8,6 @@ export default class MyDocument extends Document {
     return (
       <html lang="en">
         <Head>
-          <meta charSet="utf-8" />
-          <meta
-            name="viewport"
-            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-          />
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
           <link
diff --git a/examples/nextjs/pages/_app.js b/examples/nextjs/pages/_app.js
@@ -21,6 +21,10 @@ export default class MyApp extends App {
       <React.Fragment>
         <Head>
           <title>My page</title>
+          <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+          />
         </Head>
         <ThemeProvider theme={theme}>
           {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js
@@ -8,11 +8,6 @@ export default class MyDocument extends Document {
     return (
       <html lang="en">
         <Head>
-          <meta charSet="utf-8" />
-          <meta
-            name="viewport"
-            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-          />
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
           <link
diff --git a/examples/preact/public/index.html b/examples/preact/public/index.html
@@ -5,7 +5,7 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
     <!--
diff --git a/examples/ssr/server.js b/examples/ssr/server.js
@@ -13,8 +13,7 @@ function renderFullPage(html, css) {
       <head>
         <title>My page</title>
         <style id="jss-server-side">${css}</style>
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-        <!-- Fonts to support Material Design -->
+        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
       </head>
       <body>
