use Next.js

packages/next/components/Layout.tsx

@@ -0,0 +1,70 @@
+import { THEME } from '~/assets/global'
+import Link from 'next/link'
+import { ReactNode } from 'react'
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <main>
+      <header>
+        <h1>{THEME.title}</h1>
+
+        <nav>
+          <ul>
+            <li>
+              <Link href="/">
+                <a>Home</a>
+              </Link>
+            </li>
+
+            {(THEME.nav || []).map((n) =>
+              n.to ? (
+                <Link href={n.to} key={n.name}>
+                  <a>{n.name}</a>
+                </Link>
+              ) : (
+                <a
+                  href={n.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  key={n.name}
+                >
+                  {n.name}
+                </a>
+              )
+            )}
+          </ul>
+
+          <form>
+            <input name="q" type="search" placeholder="Search..." />
+            <div className="icon">🔎</div>
+          </form>
+        </nav>
+      </header>
+      {children}
+
+      <style jsx>{`
+        nav ul {
+          display: inline-block;
+        }
+
+        form {
+          float: right;
+          max-width: 300px;
+          position: relative;
+        }
+
+        form .icon {
+          position: absolute;
+          right: 5px;
+          top: 5px;
+        }
+
+        input {
+          padding-right: 1.5em;
+        }
+      `}</style>
+    </main>
+  )
+}
+
+export default Layout