custom <Image /> wrapper now supports static imports too

components/Selfie/Selfie.module.css

@@ -0,0 +1,39 @@
+.link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+}
+
+.link:hover {
+  color: var(--link);
+}
+
+.selfie {
+  width: 50px;
+  height: 50px;
+  line-height: 0;
+  padding: 0;
+}
+
+.selfie img {
+  border: 1px solid var(--light) !important;
+  border-radius: 50%;
+}
+
+.name {
+  margin: 0 0.6em;
+  font-size: 1.2em;
+  font-weight: 500;
+  line-height: 1;
+}
+
+@media screen and (max-width: 768px) {
+  .selfie {
+    width: 70px;
+    height: 70px;
+  }
+
+  .name {
+    display: none;
+  }
+}

components/Selfie/Selfie.tsx

@@ -0,0 +1,25 @@
+import { memo } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import classNames from "classnames";
+
+import styles from "./Selfie.module.css";
+
+import meJpg from "../../public/static/images/me.jpg";
+
+type Props = {
+  className?: string;
+};
+
+const Selfie = ({ className }: Props) => (
+  <Link href="/">
+    <a className={classNames(styles.link, className)}>
+      <div className={styles.selfie}>
+        <Image src={meJpg} alt="Photo of Jake Jarvis" width={70} height={70} quality={60} layout="intrinsic" priority />
+      </div>
+      <span className={styles.name}>Jake Jarvis</span>
+    </a>
+  </Link>
+);
+
+export default memo(Selfie);