Fix playground warning about incorrectly loading stylesheets in Next.js (#1454)

va3y · web-flow · commit 2390615ca0ad · 2022-05-16T11:23:05.000+02:00
diff --git a/packages/playground-react/pages/_app.tsx b/packages/playground-react/pages/_app.tsx
@@ -138,27 +138,6 @@ function KeyCaster() {
 function MyApp({ Component, pageProps }) {
   return (
     <>
-      <Head>
-        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
-
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="https://headlessui.dev/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="https://headlessui.dev/favicon-16x16.png"
-        />
-      </Head>
-
       <div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
         <header className="relative z-10 flex flex-shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8">
           <NextLink href="/">
diff --git a/packages/playground-react/pages/_document.tsx b/packages/playground-react/pages/_document.tsx
@@ -0,0 +1,32 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
+
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="https://headlessui.dev/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="https://headlessui.dev/favicon-16x16.png"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
