next-mdx-remote v4 (#737)

components/Title/Title.module.css

@@ -0,0 +1,18 @@
+.title {
+  margin-top: 0;
+  margin-bottom: 0.6em;
+  font-size: 2em;
+  text-align: center;
+}
+
+.title a {
+  background: none;
+  padding-bottom: 0;
+  color: var(--text);
+}
+
+@media screen and (max-width: 768px) {
+  .title {
+    font-size: 1.8em;
+  }
+}

components/Title/Title.tsx

@@ -0,0 +1,24 @@
+import { memo } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+import styles from "./Title.module.css";
+
+type Props = {
+  children: ReactNode;
+};
+
+const Title = ({ children }: Props) => {
+  const router = useRouter();
+
+  return (
+    <h1 className={styles.title}>
+      <Link href={router.asPath}>
+        <a>{children}</a>
+      </Link>
+    </h1>
+  );
+};
+
+export default memo(Title);