Initial commit from Create Next App

components/CustomLink.js

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+export default function CustomLink({ as, href, ...otherProps }) {
+  return (
+    <>
+      <Link as={as} href={href}>
+        <a {...otherProps} />
+      </Link>
+      <style jsx>{`
+        a {
+          color: tomato;
+        }
+      `}</style>
+    </>
+  )
+}

components/Layout.js

@@ -0,0 +1,49 @@
+export default function Layout({ children }) {
+  return (
+    <>
+      <div className="wrapper">{children}</div>
+      <style jsx>{`
+        .wrapper {
+          max-width: 36rem;
+          margin: 0 auto;
+          padding: 1.5rem;
+        }
+      `}</style>
+      <style jsx global>{`
+        * {
+          margin: 0;
+          padding: 0;
+        }
+
+        :root {
+          --site-color: royalblue;
+          --divider-color: rgba(0, 0, 0, 0.4);
+        }
+
+        html {
+          font: 100%/1.5 system-ui;
+        }
+
+        a {
+          color: inherit;
+          text-decoration-color: var(--divider-color);
+          text-decoration-thickness: 2px;
+        }
+
+        a:hover {
+          color: var(--site-color);
+          text-decoration-color: currentcolor;
+        }
+
+        h1,
+        p {
+          margin-bottom: 1.5rem;
+        }
+
+        code {
+          font-family: 'Menlo';
+        }
+      `}</style>
+    </>
+  )
+}

components/TestComponent.js

@@ -0,0 +1,16 @@
+export default function TestComponent({ name = 'world' }) {
+  return (
+    <>
+      <div>Hello, {name}!</div>
+      <style jsx>{`
+        div {
+          background-color: #111;
+          border-radius: 0.5em;
+          color: #fff;
+          margin-bottom: 1.5em;
+          padding: 0.5em 0.75em;
+        }
+      `}</style>
+    </>
+  )
+}