enable experimental next/future/image (#973)

2025-04-26 09:45:22 -04:00 · 2022-06-27 20:45:02 -04:00 · 2022-06-27 20:45:02 -04:00 · f826f59fcc
commit f826f59fcc
parent a4602335a1
14 changed files with 183 additions and 184 deletions
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@ -1,4 +1,4 @@
-import NextLink from "next/link";
+import Link from "../Link";
 import { HeartIcon, NextjsLogo } from "../Icons";
 import { keyframes, styled } from "../../lib/styles/stitches.config";
 import * as config from "../../lib/config";
@ -35,18 +35,17 @@ const Row = styled("div", {
  },
 });

-const Link = styled(NextLink, {
+const PlainLink = styled(Link, {
  color: "$mediumDark",
-  textDecoration: "none",
 });

-const NextjsLink = styled(Link, {
+const NextjsLink = styled(PlainLink, {
  "&:hover": {
    color: "$medium",
  },
 });

-const ViewSourceLink = styled(Link, {
+const ViewSourceLink = styled(PlainLink, {
  paddingBottom: "2px",
  borderBottom: "1px solid $light",

@ -89,13 +88,18 @@ const Footer = ({ ...rest }: FooterProps) => {
      <Row>
        <div>
          Content{" "}
-          <Link href="/license/" prefetch={false} title="Creative Commons Attribution 4.0 International">
+          <PlainLink
+            href="/license/"
+            prefetch={false}
+            title="Creative Commons Attribution 4.0 International"
+            underline={false}
+          >
            licensed under CC-BY-4.0
-          </Link>
+          </PlainLink>
          ,{" "}
-          <Link href="/previously/" prefetch={false} title="Previously on...">
+          <PlainLink href="/previously/" prefetch={false} title="Previously on..." underline={false}>
            2001
-          </Link>{" "}
+          </PlainLink>{" "}
          – {new Date(process.env.NEXT_PUBLIC_RELEASE_DATE || Date.now()).getUTCFullYear()}.
        </div>

@ -105,21 +109,14 @@ const Footer = ({ ...rest }: FooterProps) => {
            <Icon as={HeartIcon} />
          </Heart>{" "}
          and{" "}
-          <NextjsLink
-            href="https://nextjs.org/"
-            title="Powered by Next.js"
-            aria-label="Next.js"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <NextjsLink href="https://nextjs.org/" title="Powered by Next.js" aria-label="Next.js" underline={false}>
            <Icon as={NextjsLogo} />
          </NextjsLink>
          .{" "}
          <ViewSourceLink
            href={`https://github.com/${config.githubRepo}`}
            title="View Source on GitHub"
-            target="_blank"
-            rel="noopener noreferrer"
+            underline={false}
          >
            View source.
          </ViewSourceLink>
--- a/components/HeadingAnchor/HeadingAnchor.tsx
+++ b/components/HeadingAnchor/HeadingAnchor.tsx
@ -1,9 +1,9 @@
+import Link from "../Link";
 import { LinkIcon } from "../Icons";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

-const AnchorLink = styled("a", {
-  textDecoration: "none",
+const AnchorLink = styled(Link, {
  lineHeight: 1,
 });

@ -12,14 +12,14 @@ const Icon = styled(LinkIcon, {
  height: "0.8em",
 });

-export type HeadingAnchorProps = ComponentProps<typeof AnchorLink> & {
+export type HeadingAnchorProps = Omit<ComponentProps<typeof AnchorLink>, "href"> & {
  id: string;
  title: string;
 };

 const HeadingAnchor = ({ id, title, ...rest }: HeadingAnchorProps) => {
  return (
-    <AnchorLink href={`#${id}`} title={`Jump to "${title}"`} aria-hidden={true} {...rest}>
+    <AnchorLink href={`#${id}`} title={`Jump to "${title}"`} aria-hidden={true} underline={false} {...rest}>
      <Icon />
    </AnchorLink>
  );
--- a/components/Image/Image.tsx
+++ b/components/Image/Image.tsx
@ -1,14 +1,11 @@
-import NextImage from "next/image";
+import NextImage from "next/future/image";
 import Link from "../Link";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
-import type { ImageProps as NextImageProps, StaticImageData } from "next/image";
+import type { ImageProps as NextImageProps, StaticImageData } from "next/future/image";

-// https://nextjs.org/docs/api-reference/next/image#optional-props
-const DEFAULT_QUALITY = 60;
-const DEFAULT_LAYOUT = "intrinsic";
-
-const Wrapper = styled("div", {
+const Block = styled("div", {
+  display: "block",
  lineHeight: 0,

  // default to centering all images
@ -16,30 +13,24 @@ const Wrapper = styled("div", {
  textAlign: "center",
 });

-const RoundedImage = styled(NextImage, {
+const StyledImage = styled(NextImage, {
+  height: "auto",
+  maxWidth: "100%",
  borderRadius: "$rounded",
 });

-export type ImageProps = ComponentProps<typeof RoundedImage> & {
+export type ImageProps = ComponentProps<typeof StyledImage> & {
  href?: string; // optionally wrap image in a link
+  inline?: boolean; // don't wrap everything in a `<div>` block
 };

-const Image = ({
-  src,
-  width,
-  height,
-  quality = DEFAULT_QUALITY,
-  layout = DEFAULT_LAYOUT,
-  placeholder,
-  href,
-  ...rest
-}: ImageProps) => {
-  const imageProps: Partial<NextImageProps> = {
+const Image = ({ src, width, height, quality = 60, placeholder, href, inline, ...rest }: ImageProps) => {
+  const imageProps: NextImageProps = {
    // strip "px" from dimensions: https://stackoverflow.com/a/4860249/1438024
    width: typeof width === "string" ? Number.parseInt(width, 10) : width,
    height: typeof height === "string" ? Number.parseInt(height, 10) : height,
    quality,
-    layout,
+    src,
    placeholder,
    ...rest,
  };
@ -53,8 +44,8 @@ const Image = ({
    imageProps.placeholder = placeholder || (staticImg.blurDataURL !== undefined ? "blur" : "empty");
  } else if (typeof src === "string") {
    // regular path to a file was passed in, which makes explicit width and height required.
-    // https://nextjs.org/docs/api-reference/next/image#width
-    if (layout !== "fill" && (!width || !height)) {
+    // https://nextjs.org/docs/api-reference/next/future/image#width
+    if (!(width && height)) {
      throw new Error("'width' and 'height' are required for non-statically imported images.");
    }

@ -64,18 +55,20 @@ const Image = ({
    throw new TypeError("'src' should be a string or a valid StaticImageData object.");
  }

-  const img = <RoundedImage {...(imageProps as NextImageProps)} />;
+  const StyledImageWithProps = <StyledImage {...imageProps} />;

-  return (
-    <Wrapper>
+  return inline ? (
+    StyledImageWithProps
+  ) : (
+    <Block>
      {href ? (
        <Link href={href} underline={false}>
-          {img}
+          {StyledImageWithProps}
        </Link>
      ) : (
-        <>{img}</>
+        StyledImageWithProps
      )}
-    </Wrapper>
+    </Block>
  );
 };

--- a/components/Link/Link.tsx
+++ b/components/Link/Link.tsx
@ -43,7 +43,8 @@ export type LinkProps = ComponentProps<typeof StyledLink> & {
 const Link = ({ href, rel, target, prefetch = false, underline = true, openInNewTab, ...rest }: LinkProps) => {
  // This component auto-detects whether or not this link should open in the same window (the default for internal
  // links) or a new tab (the default for external links). Defaults can be overridden with `openInNewTab={true}`.
-  const isExternal = typeof href === "string" && !href.startsWith("/") && !href.startsWith(baseUrl);
+  const isExternal =
+    typeof href === "string" && !(href.startsWith("/") || href.startsWith("#") || href.startsWith(baseUrl));

  if (openInNewTab || isExternal) {
    return (
--- a/components/MenuItem/MenuItem.tsx
+++ b/components/MenuItem/MenuItem.tsx
@ -1,10 +1,9 @@
-import NextLink from "next/link";
+import Link from "../Link";
 import { styled } from "../../lib/styles/stitches.config";

-const Link = styled(NextLink, {
+const MenuLink = styled(Link, {
  display: "inline-block",
  color: "$mediumDark",
-  textDecoration: "none",
  padding: "0.6em",

  variants: {
@ -67,9 +66,17 @@ const MenuItem = ({ icon: ItemIcon, href, text, current, className }: MenuItemPr
  // allow both navigational links and/or other interactive react components (e.g. the theme toggle)
  if (href) {
    return (
-      <Link href={href} prefetch={false} className={className} current={current} title={text} aria-label={text}>
+      <MenuLink
+        href={href}
+        prefetch={false}
+        className={className}
+        current={current}
+        title={text}
+        underline={false}
+        aria-label={text}
+      >
        {linkContent}
-      </Link>
+      </MenuLink>
    );
  }

--- a/components/NoteMeta/NoteMeta.tsx
+++ b/components/NoteMeta/NoteMeta.tsx
@ -1,4 +1,4 @@
-import NextLink from "next/link";
+import Link from "../Link";
 import Time from "../Time";
 import HitCounter from "../HitCounter";
 import NoteTitle from "../NoteTitle";
@ -21,9 +21,8 @@ const MetaItem = styled("div", {
  whiteSpace: "nowrap",
 });

-const MetaLink = styled(NextLink, {
+const MetaLink = styled(Link, {
  color: "inherit",
-  textDecoration: "none",
 });

 const Icon = styled("svg", {
@ -67,6 +66,7 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
              pathname: "/notes/[slug]/",
              query: { slug },
            }}
+            underline={false}
          >
            <span>
              <Icon as={DateIcon} />
@ -93,9 +93,8 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
        <MetaItem>
          <MetaLink
            href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
-            target="_blank"
-            rel="noopener noreferrer"
            title={`Edit "${title}" on GitHub`}
+            underline={false}
          >
            <span>
              <Icon as={EditIcon} />
--- a/components/NoteTitle/NoteTitle.tsx
+++ b/components/NoteTitle/NoteTitle.tsx
@ -1,4 +1,4 @@
-import NextLink from "next/link";
+import Link from "../Link";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 import type { NoteFrontMatter } from "../../types";
@ -18,9 +18,8 @@ const Title = styled("h1", {
  },
 });

-const Link = styled(NextLink, {
+const TitleLink = styled(Link, {
  color: "$text",
-  textDecoration: "none",
 });

 export type NoteTitleProps = Pick<NoteFrontMatter, "slug" | "title" | "htmlTitle"> & ComponentProps<typeof Title>;
@ -28,12 +27,13 @@ export type NoteTitleProps = Pick<NoteFrontMatter, "slug" | "title" | "htmlTitle
 const NoteTitle = ({ slug, title, htmlTitle, ...rest }: NoteTitleProps) => {
  return (
    <Title {...rest}>
-      <Link
+      <TitleLink
        href={{
          pathname: "/notes/[slug]/",
          query: { slug },
        }}
        dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
+        underline={false}
      />
    </Title>
  );
--- a/components/OctocatLink/OctocatLink.tsx
+++ b/components/OctocatLink/OctocatLink.tsx
@ -1,11 +1,11 @@
+import Link from "../Link";
 import { OctocatOcticon } from "../Icons";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

-const Link = styled("a", {
+const GitHubLink = styled(Link, {
  margin: "0 0.4em",
  color: "$text",
-  textDecoration: "none",

  "&:hover": {
    color: "$link",
@ -19,15 +19,15 @@ const Octocat = styled(OctocatOcticon, {
  fill: "currentColor",
 });

-export type OctocatLinkProps = ComponentProps<typeof Link> & {
+export type OctocatLinkProps = Omit<ComponentProps<typeof GitHubLink>, "href"> & {
  repo: string;
 };

 const OctocatLink = ({ repo, className, ...rest }: OctocatLinkProps) => {
  return (
-    <Link href={`https://github.com/${repo}`} target="_blank" rel="noopener noreferrer" {...rest}>
+    <GitHubLink href={`https://github.com/${repo}`} underline={false} {...rest}>
      <Octocat className={className} />
-    </Link>
+    </GitHubLink>
  );
 };

--- a/components/PageTitle/PageTitle.tsx
+++ b/components/PageTitle/PageTitle.tsx
@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import NextLink from "next/link";
+import Link from "../Link";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";

@ -14,9 +14,8 @@ const Title = styled("h1", {
  },
 });

-const Link = styled(NextLink, {
+const TitleLink = styled(Link, {
  color: "$text",
-  textDecoration: "none",
 });

 export type PageTitleProps = ComponentProps<typeof Title>;
@ -26,7 +25,9 @@ const PageTitle = ({ children, ...rest }: PageTitleProps) => {

  return (
    <Title {...rest}>
-      <Link href={router.pathname}>{children}</Link>
+      <TitleLink href={router.pathname} underline={false}>
+        {children}
+      </TitleLink>
    </Title>
  );
 };
--- a/components/RepositoryCard/RepositoryCard.tsx
+++ b/components/RepositoryCard/RepositoryCard.tsx
@ -41,9 +41,8 @@ const MetaItem = styled("div", {
  color: "$medium",
 });

-const MetaLink = styled("a", {
+const MetaLink = styled(Link, {
  color: "inherit",
-  textDecoration: "none",

  "&:hover": {
    color: "$link",
@ -101,8 +100,7 @@ const RepositoryCard = ({
            <MetaLink
              href={`${url}/stargazers`}
              title={`${commaNumber(stars)} ${stars === 1 ? "star" : "stars"}`}
-              target="_blank"
-              rel="noopener noreferrer"
+              underline={false}
            >
              <MetaIcon as={StarOcticon} />
              {commaNumber(stars)}
@ -115,8 +113,7 @@ const RepositoryCard = ({
            <MetaLink
              href={`${url}/network/members`}
              title={`${commaNumber(forks)} ${forks === 1 ? "fork" : "forks"}`}
-              target="_blank"
-              rel="noopener noreferrer"
+              underline={false}
            >
              <MetaIcon as={ForkOcticon} />
              {commaNumber(forks)}
--- a/components/Selfie/Selfie.tsx
+++ b/components/Selfie/Selfie.tsx
@ -1,13 +1,12 @@
-import NextLink from "next/link";
-import NextImage from "next/image";
+import Link from "../Link";
+import Image from "../Image";
 import { styled } from "../../lib/styles/stitches.config";
 import { authorName } from "../../lib/config";
 import type { ComponentProps } from "react";

 import selfieJpg from "../../public/static/images/selfie.jpg";

-const Image = styled(NextImage, {
-  display: "block",
+const RoundedImage = styled(Image, {
  width: "50px",
  height: "50px",
  border: "1px solid $light",
@ -20,17 +19,16 @@ const Image = styled(NextImage, {
  },
 });

-const Link = styled(NextLink, {
+const SelfieLink = styled(Link, {
  display: "inline-flex",
  alignItems: "center",
  color: "$mediumDark",
-  textDecoration: "none",

  "&:hover": {
    color: "$link",

    "@medium": {
-      [`${Image}`]: {
+      [`${RoundedImage}`]: {
        borderColor: "$linkUnderline",
      },
    },
@ -52,10 +50,18 @@ export type SelfieProps = Omit<ComponentProps<typeof Link>, "href">;

 const Selfie = ({ ...rest }: SelfieProps) => {
  return (
-    <Link href="/" rel="author" title={authorName} {...rest}>
-      <Image src={selfieJpg} alt={`Photo of ${authorName}`} width={50} height={50} quality={60} layout="raw" priority />
+    <SelfieLink href="/" rel="author" title={authorName} underline={false} {...rest}>
+      <RoundedImage
+        src={selfieJpg}
+        alt={`Photo of ${authorName}`}
+        width={50}
+        height={50}
+        quality={60}
+        inline
+        priority
+      />
      <Name>{authorName}</Name>
-    </Link>
+    </SelfieLink>
  );
 };

--- a/next.config.js
+++ b/next.config.js
@ -34,12 +34,10 @@ module.exports = (phase, { defaultConfig }) => {
    images: {
      deviceSizes: [640, 750, 828, 1080, 1200, 1920],
      formats: ["image/avif", "image/webp"],
-      minimumCacheTTL: 43200,
    },
    experimental: {
      images: {
-        // allow forgoing the mess of `<span>`s around statically imported images
-        layoutRaw: true,
+        allowFutureImage: true, // https://github.com/vercel/next.js/pull/37927
      },
      newNextLinkBehavior: true, // https://github.com/vercel/next.js/pull/36436
    },
--- a/package.json
+++ b/package.json
@ -43,7 +43,7 @@
    "gray-matter": "^4.0.3",
    "hex-to-rgba": "^2.0.1",
    "marked": "^4.0.17",
-    "next": "12.1.7-canary.46",
+    "next": "12.1.7-canary.50",
    "next-compose-plugins": "^2.2.1",
    "next-mdx-remote": "^4.0.3",
    "next-seo": "^5.4.0",
@ -75,7 +75,7 @@
  },
  "devDependencies": {
    "@jakejarvis/eslint-config": "*",
-    "@next/bundle-analyzer": "12.1.7-canary.46",
+    "@next/bundle-analyzer": "12.1.7-canary.50",
    "@svgr/webpack": "^6.2.1",
    "@types/comma-number": "^2.1.0",
    "@types/marked": "^4.0.3",
@ -91,7 +91,7 @@
    "@typescript-eslint/parser": "^5.30.0",
    "cross-env": "^7.0.3",
    "eslint": "~8.18.0",
-    "eslint-config-next": "12.1.7-canary.46",
+    "eslint-config-next": "12.1.7-canary.50",
    "eslint-config-prettier": "~8.5.0",
    "eslint-plugin-prettier": "~4.1.0",
    "lint-staged": "^13.0.3",
--- a/yarn.lock
+++ b/yarn.lock
@ -1129,89 +1129,89 @@
    "@types/mdx" "^2.0.0"
    "@types/react" ">=16"

-"@next/bundle-analyzer@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-12.1.7-canary.46.tgz#b4f4ba5b43ebcb7ebcfe8eb0df58fe7761ed363a"
-  integrity sha512-rkVyNMYZ4USzcDJJp4Wb773zenxHvZEq4YknMnHQ3lx4cCwn5P1QTXaSgN9ik+gWL22MCJ8mePdQNAlqrZWLag==
+"@next/bundle-analyzer@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-12.1.7-canary.50.tgz#315e4e6403a60a85da7c777e6517b02fc9343b80"
+  integrity sha512-Ztry5BOsK6LrDVkaiCivMv63W4+Nz4pNzrX8dGMX0cBzrFvv+F90NzMg6bPhO3Jbo2EmpGnrCuBOIOJkgDFw8Q==
  dependencies:
    webpack-bundle-analyzer "4.3.0"

-"@next/env@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.7-canary.46.tgz#436c37f294b4c9da6f8a59803d873cabc5d3d461"
-  integrity sha512-S8uMGEL6ewqaXcBGXK7U7CfQX/Q+TK2cDdCrI7riMYyFUSrj4IunDZbxZtooC8wJWo/hvFT8H8jqxk4BbMo/Ig==
+"@next/env@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.7-canary.50.tgz#5929798aa0e483a3b9e254dd6e016dacb3aa5277"
+  integrity sha512-8P4z2xZ20seOQVmsZNp9IuQs6uO+E6Y4b+RYqvh7cPUffhMxwhESpbt1kJn4E4U1DyZDsdlhgrIQ976P9dTroA==

-"@next/eslint-plugin-next@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.7-canary.46.tgz#60f879f8e66d334cf350884bd3f5d450c42ae763"
-  integrity sha512-YtcOzHmqqsmuTCe38abJ4FPgRVxwyPDm7We54u/W3Bk5vXJEpDJc8q8R/OAZDpSHHI38lr8kZ4ZOHRghDtLGMw==
+"@next/eslint-plugin-next@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.7-canary.50.tgz#29bff900b0743b2a0afd73ad3db111cd9f20aac6"
+  integrity sha512-6VKOHn+NvLzPpcSu0k5AC175wWHSIO8RNVFi/wurUMSBzXKfG1zr8Aa7KbuWTtDZt6jZdIglLm4QzUm1LYEwnw==
  dependencies:
    glob "7.1.7"

-"@next/swc-android-arm-eabi@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.7-canary.46.tgz#e6783b623e86ed545887ef5939fdfdf4819f1411"
-  integrity sha512-WvLjwRsMY1EshFksclgTMsETb6Ab4IRbYTam6Uk/1cOESv1XCzPRE+RptL535/Mwtn+ymGxfOyGpP/YbwkBAJA==
+"@next/swc-android-arm-eabi@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.7-canary.50.tgz#a0d0788038266c2ea8933a658d60bcfa744bd8ba"
+  integrity sha512-EJALtQRiL5d1ypA72MAKAipGqE8NT1AZA4Q7OL7zrNzXgnunPnMG33FZThwU6WMUbDmgYZ9yielZ//U2aEP28g==

-"@next/swc-android-arm64@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.7-canary.46.tgz#2ea89998712fd8a3c9947ca237ea10479c34a397"
-  integrity sha512-rDXwTNuBrmGycG+sE0jO1XC+mPZRApoM6ltGyn89a7qJPnbKY0aw3zyayul4de/Evt4jQTJzd9g+aubMu4lUkA==
+"@next/swc-android-arm64@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.7-canary.50.tgz#72b8062fc01a701a9a929492cd998cd7fad16e0c"
+  integrity sha512-EWOCgeIxbQGEYdSv8K7RKaVppcmq+2w6p/xzRjAiJKPPWxK1RTbAaOLB7lfpLc+E5n/ckDbBggsd7h71HOQwrQ==

-"@next/swc-darwin-arm64@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.7-canary.46.tgz#a4c946cbe6362ad20d00f7fd68f409b6600b6d2e"
-  integrity sha512-dS5blLvzAhqlCvGaHa/dgFjj66pB5vDUPWifWNqcv6b1P0/axdqsKQBmiGFFTN2iPltg2mtSh3eui0OzmPxv2g==
+"@next/swc-darwin-arm64@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.7-canary.50.tgz#9c45ff6706f1ec9da046848c3676d608a0166e2c"
+  integrity sha512-cB+t5+A/ZMD1s+C3T+10ORAQoX8iIhPmNwIAfSqt4sM3X3LAHoHIDqxazyUJS+JmOZsGuO4tbc0dXeVHXmIubQ==

-"@next/swc-darwin-x64@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.7-canary.46.tgz#d3b4bee2e4ae13578ff818788f99b07912f962dc"
-  integrity sha512-r7Tk7gQEIgDBPnUMm6fAJPJuALcpO6hDmxuhaFkOtglDFs7efzwClt1GzPTjMyMlyZtSYj9g96aQGC0sU/kkzQ==
+"@next/swc-darwin-x64@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.7-canary.50.tgz#9ffedd59fec033dc5f8c717c6d1d9bb3cc5a13c6"
+  integrity sha512-Yo2BVrnDOXHHPA2GjyM2ZzR7ojyhftyYunG/DRE+niFXtKr7+9KLXXnNcmVAgPhSrn8KRUdvYQVsK5Sd95MUsA==

-"@next/swc-freebsd-x64@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.1.7-canary.46.tgz#0693c67501fa185f0a85f8daff5318414eaaf779"
-  integrity sha512-yezetlW8N31cSZzUjpPwz+OOC8y7UbDc1pv2aKpBGtOn/teZlFGxPNjvjrXGIEcqhsX+fKw6Al5MfJr1CerTfA==
+"@next/swc-freebsd-x64@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.1.7-canary.50.tgz#4275befd48a206e008e4f92582c66f424ca88954"
+  integrity sha512-ARWG/1F7mTTq/NXpfwbBA1xGwJ9VHyBtFh8Zophbut2MMc8omQ0qHi6+HjLrdSXQO8ToDRIo3itePJZCnkx5Yw==

-"@next/swc-linux-arm-gnueabihf@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.7-canary.46.tgz#53c8d282ab1e82e986c1cc96b497f8cbc525f375"
-  integrity sha512-kE0TmyAX2VJww9t8AvUv4OmdKxknU1QOZ2GeONJXb6fgBt0UzGhcqYn7yZCPJITYTsZA2EnaWOjBjfSLxS7Org==
+"@next/swc-linux-arm-gnueabihf@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.7-canary.50.tgz#f47a228e1f549e409504bc5bcd6934f1d4c516f8"
+  integrity sha512-BWYMRdJdoWQ0bvhadAmxlgxW3gVHUaWJXNkd5/lfmBJ0IbCZfnMGAHHcSHD9yAkLlbrd9LQsziIAQC7JUAdB3g==

-"@next/swc-linux-arm64-gnu@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.7-canary.46.tgz#754b6570423a0d98628ef5a5c4546038269a807d"
-  integrity sha512-l121bby+rcxTZ0PomUlCCb7MURw67QbPMqTrmgpZh61I7Lf2lC+0KrFxxV+WnWSTxcThMVqQ+gve6nYyhROv0Q==
+"@next/swc-linux-arm64-gnu@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.7-canary.50.tgz#ea03411358c444dbd1efbde3fc70442b1bb93eb4"
+  integrity sha512-mVIuH+bPru1PmJyt8NK7E48mS0Bt6LBZqSYFKCqRsWikKUt7XxnJ7IJ+Or6oJbWTSYb8Ar9Z98XQQP8zFCxMXQ==

-"@next/swc-linux-arm64-musl@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.7-canary.46.tgz#517e4c668e22a150973de86f48d826bb9f575e4f"
-  integrity sha512-Qw9BSQpm6FjuH9Z8BdrD3hTxvorC2tIilwsLLOCtQlRpnvh5IUEvjzBPMN/QjMlXF1O06IKZdciYB+Gk7a0JMg==
+"@next/swc-linux-arm64-musl@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.7-canary.50.tgz#3c9dc08ad6bdca5350f501ef11ad2e1fb83476bd"
+  integrity sha512-yu33e6Px6ITWK6QzuENbDzWkI3o7K57LIdVkDJCfCxpDqSgsa+Blrkrp2J5V9eZNdXuhs/EEdhtxg0+6Q0m7jA==

-"@next/swc-linux-x64-gnu@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.7-canary.46.tgz#a18a44b4dbe9030e066fc7b929e72958923646fb"
-  integrity sha512-9Y3s4T0PrNeheCIBRUznM4BmXHD72Ls3r5nITI/UMc6RPyAvkRzOBiaDVp2+kbDaUm/EXCk6CvBzyvTYrMEVEA==
+"@next/swc-linux-x64-gnu@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.7-canary.50.tgz#473bcf78d80ffe7a2c7cbe0dc9f495c445b1efe1"
+  integrity sha512-3wFbsghFyBV5zixYbbKheNBSvyHwuKKiHu1gOr2dRFqNEmKrJ/cgNIdxuLmRUjAz/+YnXROmgl9fQOZdWTE5Pg==

-"@next/swc-linux-x64-musl@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.7-canary.46.tgz#08b497f6f0f283c2e6ab1cb31cccb654be25dbc8"
-  integrity sha512-uf4RTaaTjK8iixMNtej2k7aQr9JLKwLDdsnmiOCZgMo438dGhMmSUZqzyKMAUBbDBIytV6sONJm96AvIvbUScw==
+"@next/swc-linux-x64-musl@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.7-canary.50.tgz#c617f4df7c9dfddbac280870f2fc772ec431668b"
+  integrity sha512-ah3mhiMleZa3x3ax5KzPf3lpGYqgOc/CaLCVhYDshCaKiKw6sMOMQVRf/pcDZxV9pOgob8cEx3bYr/B8S8trOw==

-"@next/swc-win32-arm64-msvc@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.7-canary.46.tgz#c02e7eb763ab37df5f97d13f2fb9fe678b5bcb06"
-  integrity sha512-ERuuBhbnIUorGZrHzL1tliAH921e00zqy1jM7M9fY0QWwgVDzX9BNXGuPzKIVzxoal2H0ldDx2bjq8FeiBlvdA==
+"@next/swc-win32-arm64-msvc@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.7-canary.50.tgz#6d5eade55af081216605eeaafbdd828457276cd9"
+  integrity sha512-9uAszGwjPTkvRrL5Rd4yAfNZG4ZasDLFyb6myX+fWaIfEjnOW59qIRS+nNH4V3c5gSqSzsGSsO3m1Slz0u0EwA==

-"@next/swc-win32-ia32-msvc@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.7-canary.46.tgz#233efc51e522c1e66177894ed35328e07d1193ae"
-  integrity sha512-v3kYqKoYgyhLLzK0p8zdBPE4GimCXT1nbaFeHyvpRQvTvluFSOBcq9GJBR2Mvf5EGGT+PcO2vWci6qFEFKo8qA==
+"@next/swc-win32-ia32-msvc@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.7-canary.50.tgz#3aca13fbbd2dabf8200ae3fc34abfed7dd5d53f8"
+  integrity sha512-3zK5y6fm/MLnj87RVQChiU0A6mpPH2P9ayVNwyxqWcVvZ/YIsg+/Yz0fhuqT2WSz8R7TX5Ymc37fJKrHszqi/w==

-"@next/swc-win32-x64-msvc@12.1.7-canary.46":
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.7-canary.46.tgz#6491ea18ad0f7443dffe2845215d447f5c9c151b"
-  integrity sha512-AIRh+RM45Fb6ZNOZnKzoUuDSPSitsU25N1NjZTWhT2iT8mDisZb91Zdd5RaWaYP9cnkQJc0X3Dmy2PaHM5sSjQ==
+"@next/swc-win32-x64-msvc@12.1.7-canary.50":
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.7-canary.50.tgz#509f94f1b1f59e0b8de848a22c2601f90c8afb27"
+  integrity sha512-vmHHbalYbqVvEUxuBiwpqmoaKMZAMY1EPOs30jnQ6/NdlaVG/ZLUiSNHOpxNjfWwovkrF71QAvswd0l6fI1E4Q==

 "@nodelib/fs.scandir@2.1.5":
  version "2.1.5"
@ -2600,12 +2600,12 @@ escape-string-regexp@^4.0.0:
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==

-eslint-config-next@12.1.7-canary.46:
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.1.7-canary.46.tgz#f05ae333da6dc56917283b68133da2732ace30e8"
-  integrity sha512-B/BCD/crdpbNqReFoOrYMZmNRxi5l1JNrSOVmxN5/m/LvGy7LBEXRO4adnNVbi8AgLd74wG4FwjfU6a1iKGHDA==
+eslint-config-next@12.1.7-canary.50:
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.1.7-canary.50.tgz#5890764cd40b01ee290483dc9ef815ad4d9e7d16"
+  integrity sha512-r3yr3C8uDqHGBEeX65IOV+DtGyRr7/uYZGZedaZlORVISLWcuAGA0TZ/LHpaU2VbwMY8mgrTgzAhZrhR3JUb0Q==
  dependencies:
-    "@next/eslint-plugin-next" "12.1.7-canary.46"
+    "@next/eslint-plugin-next" "12.1.7-canary.50"
    "@rushstack/eslint-patch" "^1.1.3"
    "@typescript-eslint/parser" "^5.21.0"
    eslint-import-resolver-node "^0.3.6"
@ -4488,31 +4488,31 @@ next-transpile-modules@^9.0.0:
    enhanced-resolve "^5.7.0"
    escalade "^3.1.1"

-next@12.1.7-canary.46:
-  version "12.1.7-canary.46"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.1.7-canary.46.tgz#fd68d9572770575570b438f8d9b3a9dab6b78efa"
-  integrity sha512-tpsDqC6WHpEAlSgkVFEoYzlhFwfUGVk2I8rYswOvDxKVqoKoJ/sygoUKomcdRW++23PPN+3/dXYhL49Yv8jXig==
+next@12.1.7-canary.50:
+  version "12.1.7-canary.50"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.1.7-canary.50.tgz#131cef5e3b6fa619a8bb278b33d9a20d583cdb58"
+  integrity sha512-y6EjQHfAa9B9FX+vLlzCJDgaAu1Th59orK8/FDtmwkxXDnaHo1s2rWg2CvjVvq6XAEQ0F4qocTHyU6dSNoQ5Nw==
  dependencies:
-    "@next/env" "12.1.7-canary.46"
+    "@next/env" "12.1.7-canary.50"
    "@swc/helpers" "0.4.2"
    caniuse-lite "^1.0.30001332"
    postcss "8.4.5"
    styled-jsx "5.0.2"
    use-sync-external-store "1.1.0"
  optionalDependencies:
-    "@next/swc-android-arm-eabi" "12.1.7-canary.46"
-    "@next/swc-android-arm64" "12.1.7-canary.46"
-    "@next/swc-darwin-arm64" "12.1.7-canary.46"
-    "@next/swc-darwin-x64" "12.1.7-canary.46"
-    "@next/swc-freebsd-x64" "12.1.7-canary.46"
-    "@next/swc-linux-arm-gnueabihf" "12.1.7-canary.46"
-    "@next/swc-linux-arm64-gnu" "12.1.7-canary.46"
-    "@next/swc-linux-arm64-musl" "12.1.7-canary.46"
-    "@next/swc-linux-x64-gnu" "12.1.7-canary.46"
-    "@next/swc-linux-x64-musl" "12.1.7-canary.46"
-    "@next/swc-win32-arm64-msvc" "12.1.7-canary.46"
-    "@next/swc-win32-ia32-msvc" "12.1.7-canary.46"
-    "@next/swc-win32-x64-msvc" "12.1.7-canary.46"
+    "@next/swc-android-arm-eabi" "12.1.7-canary.50"
+    "@next/swc-android-arm64" "12.1.7-canary.50"
+    "@next/swc-darwin-arm64" "12.1.7-canary.50"
+    "@next/swc-darwin-x64" "12.1.7-canary.50"
+    "@next/swc-freebsd-x64" "12.1.7-canary.50"
+    "@next/swc-linux-arm-gnueabihf" "12.1.7-canary.50"
+    "@next/swc-linux-arm64-gnu" "12.1.7-canary.50"
+    "@next/swc-linux-arm64-musl" "12.1.7-canary.50"
+    "@next/swc-linux-x64-gnu" "12.1.7-canary.50"
+    "@next/swc-linux-x64-musl" "12.1.7-canary.50"
+    "@next/swc-win32-arm64-msvc" "12.1.7-canary.50"
+    "@next/swc-win32-ia32-msvc" "12.1.7-canary.50"
+    "@next/swc-win32-x64-msvc" "12.1.7-canary.50"

 nlcst-to-string@^2.0.0:
  version "2.0.4"