<p>実務で作る機会があったので今回書いてみようと思い書いています。誰かの参考になれば幸いです。</p><h2 id="h4e42bd2021">星のレーティング評価とは</h2><p>聞き馴染みがそんなにないとは思いますが (少なくとも筆者は初耳)レビューなどで星で評価するやつです。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/5333feb7cbec4aaab806f7bb71884dfc/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-04-13%2016.21.46.png" alt=""></p><h2 id="hed900658dc">環境</h2><ul><li>next.js : 14.1.4</li><li>react : ^18</li><li>TypeScript : ^5</li><li>TailwindCSS : ^3.3.0</li></ul><h2 id="ha31bd80de1">要件</h2><p>1~5までの数字(小数点含む)をコンポーネントに渡すと、星のレーティング評価を返すものを作る</p><h3 id="h78fd6f2c2c">第一段階・星の配列を表示する</h3><pre><code>const StarRating = () =&gt; {
  const stars = Array.from({ length: 5 }, (_, index) =&gt; {

    // 星のスタイルと描画内容を定義します。
    const starContent = "★";
    let starClassName = "text-gray-400"; 

    // 星を表示します。
    return (
      &lt;span key={index} className={`text-xl ${starClassName}`}&gt;
        {starContent}
      &lt;/span&gt;
    );
  });

  // 星を表示します。
  return &lt;div className="flex"&gt;{stars}&lt;/div&gt;;
};</code></pre><h3 id="he8bc0ed745">第二段階・評価を受け取る</h3><pre><code>import React from "react";

type StarRatingProps = {
  rating: number;
};

const StarRating: React.FC&lt;StarRatingProps&gt; = ({ rating }) =&gt; {
  const stars = Array.from({ length: 5 }, (_, index) =&gt; {
    const starContent = "★";
    let starClassName = "text-gray-400";

    return (
      &lt;span key={index} className={`text-xl ${starClassName}`}&gt;
        {starContent}
      &lt;/span&gt;
    );
  });

  return &lt;div className="flex"&gt;{stars}&lt;/div&gt;;
};

export default StarRating;</code></pre><p>Reactが少しわかる方ならわかるかもしれませんが1~5の評価をプロップスで受け取れるようにしただけです。</p><h3 id="h0e1e7d3646">第三段階・評価の数字分黄色に塗りつぶす</h3><p>ここが少し難しいところではありますがやっていきましょう。<br>まずは、「<strong>評価に基づく塗りつぶしの割合を計算</strong>」します。</p><pre><code> const fillRatio = Math.min(Math.max(rating - index, 0), 1);</code></pre><p>割合が分かったら、下記コードのように星が完全に塗りつぶされている星と一部しか塗りつぶされていない場合の場合分けを行っていきます。</p><pre><code>// 星が完全に塗りつぶされている場合
if (fillRatio === 1) {
  starClassName = "text-yellow-500"; 
}
// 星が半分または一部塗りつぶされている場合
else if (fillRatio &gt; 0) {
  return (
    &lt;span key={index} className="relative text-xl"&gt;
      {/* 塗りつぶされた部分 */}
      &lt;span
        className="absolute text-yellow-500"
        style={{
        width: `${fillRatio * 100}%`, // 塗りつぶしの割合
          overflow: "hidden",
        }}
      &gt;
        ★
      &lt;/span&gt;
      {/* 塗りつぶされていない星 */}
      &lt;span className="text-gray-400"&gt;★&lt;/span&gt;
    &lt;/span&gt;
  );
}</code></pre><p>これで完成となります。<br><br>最後にコードの全体をご覧ください。</p><pre><code>// StarRanking.tsx
import React from "react";

type StarRatingProps = {
  rating: number;
};

const StarRating: React.FC&lt;StarRatingProps&gt; = ({ rating }) =&gt; {
  const stars = Array.from({ length: 5 }, (_, index) =&gt; {
    const starContent = "★";
    let starClassName = "text-gray-400"; 
    
    const fillRatio = Math.min(Math.max(rating - index, 0), 1);

    if (fillRatio === 1) {
      starClassName = "text-yellow-500"; 
    }
    else if (fillRatio &gt; 0) {
      return (
        &lt;span key={index} className="relative text-xl"&gt;
          &lt;span
            className="absolute text-yellow-500"
            style={{
              width: `${fillRatio * 100}%`, 
              overflow: "hidden",
            }}
          &gt;
            ★
          &lt;/span&gt;
          &lt;span className="text-gray-400"&gt;★&lt;/span&gt;
        &lt;/span&gt;
      );
    }

    return (
      &lt;span key={index} className={`text-xl ${starClassName}`}&gt;
        {starContent}
      &lt;/span&gt;
    );
  });

  return &lt;div className="flex"&gt;{stars}&lt;/div&gt;;
};

export default StarRating;</code></pre><p>あとは、このコンポーネントを親で呼んであげます</p><pre><code>&lt;StarRanking ranking={4} /&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/b07bf88201ff49938c7d0f32962fa31c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-04-13%2017.14.33.png" alt=""><br>次にこのコンポーネントに「2.5」を渡すと下記のような表示になります。</p><pre><code>&lt;StarRanking ranking={2.5} /&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/8d7e158834dc44c796961ef9d983c0ac/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-04-13%2017.20.05.png" alt=""><br>うん。いい感じだと思います。<br>お疲れ様でした。<br><br><br><br><br></p>

Next.jsで星のレーティング評価を作ってみた

<p>今回はNext.jsでvcfファイルをダウンロードするボタンを作ってみたので、是非参考にしてみてください。</p><h2 id="hed900658dc">環境</h2><ul><li>next: 14.0.4</li><li>react: ^18</li><li>typescript: ^5</li></ul><h2 id="hacdb522e87">vcfファイルとは</h2><blockquote>連絡先とその関連情報を保存する仮想連絡先ファイルです。 VCF ファイルは vCard ファイルとしても知られ、電話番号、住所、連絡先の写真、Web サイトのアドレス、電子メール ID などの連絡先情報を保存するための設計されたフィールドで構成されます。</blockquote><p><a href="https://www.msoutlooktools.com/jp/open-vcf-file-on-computer/" target="_blank" rel="noopener noreferrer">https://www.msoutlooktools.com/jp/open-vcf-file-on-computer/</a></p><h2 id="h51049a6b64">モジュールをインストールする</h2><p><a href="https://www.npmjs.com/package/vcards-js" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/vcards-js</a></p><pre><code>$ npm i vcards-js</code></pre><h2 id="h1fe54e2a6d">vcfファイルをダウンロードさせるボタンの作成</h2><p>まずは普通のボタンを作ります。</p><pre><code>const VcfDownloadBtn = () =&gt; {
  return (
    &lt;button type="button"&gt;ダウンロード&lt;/button&gt;
  )
}</code></pre><p>ここにダウンロードボタンを押したら、vcfファイルをダウンロードをさせる処理を書いていきます。</p><pre><code>const VcfDownloadBtn = () =&gt; {
  const CreateVCard = (
    firstName = "",
    lastName = "",
    organization = "",
    postalCode = "",
    street = "",
    homePhone = "",
    homeFax = "",
    email?: string,
    url = "",
    note = ""
  ): string =&gt; {
    const vCardsJS = require("vcards-js");
    const vCard = vCardsJS();

    vCard.firstName = firstName;
    vCard.lastName = lastName;
    vCard.organization = organization;
    vCard.homeAddress.postalCode = postalCode;
    vCard.homeAddress.street = street;
    vCard.homePhone = homePhone;
    vCard.homeFax = homeFax;
    vCard.email = email;
    vCard.url = url;
    vCard.note = note;

    return vCard.getFormattedString();
  };

  const handleClick = (vcfText: string) =&gt; {
    const element = document.createElement("a");
    const file = new Blob([vcfText], { type: "text/vcard;charset=utf-8" });
    element.href = URL.createObjectURL(file);
    element.download = "myFile.vcf";
    document.body.appendChild(element);
    element.click();
  };
  return (
    &lt;button 
      type="button"
      onClick={() =&gt;
            handleClick(
              CreateVCard(
                "山田",
                "太郎",
                "WEBエンジニア",
                "999-9999",
                "バーリント西区公園通り128",
                "99-9999-9999",
                "00-0000-0000",
                "hoge@xxx.xx",
                "https://xxxxx.xxxxxx",
                "架空の人物です。"
              )
            )
          }
     &gt;ダウンロード&lt;/button&gt;
  )
}</code></pre><p>以上で完成なのですがこのままだと下記エラーが出ます。</p><pre><code>Module not found: Can't resolve 'fs'</code></pre><p>対処法として、<code>next.config.js</code>に以下を追加してください。</p><pre><code>webpack: (config) =&gt; {
  config.resolve.fallback = { fs: false };
  return config;
},</code></pre><p>これでエラーが無くなり、無事vcfファイルがダウンロードされると思います。<br><br>詳しくはドキュメントをチェックしてください。<br><a href="https://github.com/enesser/vCards-JS" target="_blank" rel="noopener noreferrer">https://github.com/enesser/vCards-JS</a><br><br><br><br><br></p>

Next.jsでvcfファイルダウンロードボタンを作ってみた。(Safari対応)

<h2 id="h2295b759c0">対象者</h2><ul><li>Next.jsで構築したサイトにGoogleアナリティクスを導入したい方。</li><li>または、その方法がわからない方。</li></ul><h2 id="h23ef74d045">書かないこと</h2><p>トラッキングID・gtagの取得の仕方(取得した前提で話を進めます。)</p><h2 id="hed900658dc">環境</h2><ul><li>next: 14.0.4</li><li>react: ^18</li><li>typescript: ^5</li></ul><h2 id="hadcb3d82a0">導入していく</h2><ul><li>トラッキングID・gtagを環境変数で持っておく</li></ul><pre><code>// .env.local
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-****************************"</code></pre><ul><li>ibs/gtag.tsを作成する</li></ul><pre><code>export const GA_TAG_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || "";

export const IS_GATAG = GA_TAG_ID !== "";

export const pageview = (path: string) =&gt; {
  window.gtag("config", GA_TAG_ID, {
    page_path: path,
  });
};</code></pre><p><br></p><pre><code>window.gtag("config", GA_TAG_ID, {
  page_path: path,
});</code></pre><p>上記の箇所に目見線が出ていると思うので下記コマンドで型をインストールします。</p><pre><code>$ npm i -D @types/gtag.js</code></pre><ul><li>GoogleAnalyticsコンポーネントの作成</li></ul><pre><code>// components/GoogleAnalytics.tsx 
"use client";

import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { useEffect } from "react";
import { IS_GATAG, GA_TAG_ID, pageview } from "@/libs/gtag";

const GoogleAnalytics = () =&gt; {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() =&gt; {
    if (!IS_GATAG) {
      return;
    }
    const url = pathname + searchParams.toString();
    pageview(url);
  }, [pathname, searchParams]);

  return (
    &lt;&gt;
      &lt;Script
        strategy="lazyOnload"
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TAG_ID}`}
      /&gt;
      &lt;Script id="gtag-init" strategy="afterInteractive"&gt;
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_TAG_ID}', {
            page_path: window.location.pathname,
          });
        `}
      &lt;/Script&gt;
    &lt;/&gt;
  );
};

export default GoogleAnalytics;</code></pre><ul><li>layout.tsxでGoogleAnalyticsコンポーネントを読み込む</li></ul><pre><code>// layout.tsx

import { Inter } from "next/font/google";
import "./globals.css";
import GoogleAnalytics from "@/components/GoogleAnalytics";
import { Suspense } from "react";
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    &lt;html lang="ja" className="scroll-smooth"&gt;
      &lt;head&gt;
        &lt;Suspense fallback={null}&gt;
          &lt;GoogleAnalytics /&gt;
        &lt;/Suspense&gt;
      &lt;/head&gt;
      &lt;body className={inter.className}&gt;
        {children}
      &lt;/body&gt;
    &lt;/html&gt;
  );
}</code></pre><p>ここで少し注意が必要なんですけど、Next.jsでApp Routerを使用するときに<code>useSearchParams()</code>を使用すると、<code>Entire page deopted into client-side rendering</code>というエラーが出てしまいます。 <br><a href="https://nextjs.org/docs/messages/deopted-into-client-rendering" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/messages/deopted-into-client-rendering</a><br><br>その対処方法として、<code>useSearchParams()</code>を使用しているコンポーネント(今回の場合、GoogleAnalytics.tsx)に<code>&lt;Suspence /&gt;</code>でラップしてやるとエラーが無くなります。<br><br>以上でGoogleアナリティクスを導入できました。</p>

Next.js(App Router)×TypescriptでGoogleアナリティクスを導入する

<p>明けましておめでとうございます。今年もよろしくお願いします！！ってことで今年初めてのブログはChakra UIです。<br><a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/</a><br><br>以下の環境でChakra UIを使用しています。</p><ul><li>Next.js : 14.0.3</li><li>React : 18.0.0</li></ul><h2 id="h2295b759c0">対象者</h2><ul><li>Chakra UIって何？美味しいの？って状態の方。</li><li>Chakra UIを使ったことがない方。</li><li>Chakra UIを使ってみたい方。</li></ul><h2 id="hd8d793506b">インストール</h2><p>Chakra UIを使うためのモジュール群をインストールします。</p><pre><code>$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion</code></pre><p>Chakra UIはemotionとframer-motionに依存しているっぽいのでこれらも併せてインストールします。</p><h2 id="h31d727ccda">準備</h2><p>Chakra UIを使うためには、最も階層が上位（この場合、<code>app/layout.tsx</code>）に<code>&lt;ChakraProvider /&gt;</code> を設置する必要があります。必ずChakra UIを利用する際にはこのProviderを設定するようにしてください。</p><pre><code>// app/layout.tsx
・・・
import { ChakraProvider } from "@chakra-ui/react"; // 追加
・・・

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    &lt;html lang="en"&gt;
      &lt;body className={inter.className}&gt;
        &lt;ChakraProvider&gt;{children}&lt;/ChakraProvider&gt; {/* &lt;ChakraProvider /&gt;でラップする。 */}
      &lt;/body&gt;
    &lt;/html&gt;
  );
}</code></pre><p><br>ここまでくると、Chakra UIが使えますので実際に使っていきたいと思います。</p><pre><code>// app/page.tsx
import { Heading } from "@chakra-ui/react";

export default function Home() {
  return (
    &lt;Heading color={"red"} fontSize={"64px"}&gt;
      Next.js × Chakra UI
    &lt;/Heading&gt;
  )
}</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/2c882a2e02ca4392bd26dc57dacc9528/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-26%2013.02.34.png" alt=""><br>ちなみに、ブラウザ上では<u>&lt;h2&gt;</u>でレンダリングされます。</p><h2 id="hdae3825bce">基本となるスタイルの付け方</h2><p>Chakra UIでは、<a href="https://github.com/styled-system/styled-system" target="_blank" rel="noopener noreferrer">styled-system</a>を基礎としている部分があるという特徴があるので、<u>コンポーネントのpropsに直接style属性を記述することでスタイリング</u>します。</p><pre><code>&lt;Box
  width={"100px"}
  height={"100px"}
  backgroundColor={"blue"}
  borderRadius={"50%"}
  padding={"8px"}
  margin={"8px"}
&gt;&lt;/Box&gt;</code></pre><h3 id="h29c2b42b1d">スタイルのショートハンドラ</h3><p>styleの値にはさまざまなショートハンドラが用意されています。<code>padding</code> なら<code>p</code>、<code>margin</code> なら<code>m</code>です。</p><pre><code>&lt;Box
  w={"100px"}
  h={"100px"} 
  bgColor={"blue"}
  rounded={"50%"}
  p={"8px"} 
  m={"8px"}
&gt;&lt;/Box&gt;</code></pre><p>また、縦方向・横方向をまとめて指定する<code>py(padding-top/padding-bottom)・px(padding-left/padding-right)</code> 、<code>my(margin-top/margin-bottom)・mx(margin-left/margin-right)</code> ことができます。</p><pre><code>&lt;Box px={"10px"} my={"10px"}&gt;・・・&lt;/Box&gt;</code></pre><p>何だかこの辺りは<a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">TailwindCSS</a>に近しい感じがしますね。</p><h2 id="h02e85881c2">Theme</h2><p>Chakra UIにも他のUIライブラリみたいにTheme機能があります。ここでは、デフォルトのTheme機能について解説します。<br><a href="https://chakra-ui.com/docs/styled-system/theme" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme</a></p><h3 id="h6ca073dc9d">色のThemeの使い方</h3><p>色のThemeに関しては<code>色.50、100~900</code> のような指定で、50と100〜900の100刻みで計10段階あり、<u>50が一番薄く900が一番濃い</u>と言う感じです。<a href="https://chakra-ui.com/docs/styled-system/theme#colors" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#colors</a></p><pre><code>&lt;Box backgroundColor={"red.50"} borderColor={"blue.200"} color={"yellow.800"}&gt;・・・&lt;/Box&gt;</code></pre><h3 id="h0111671636">サイズ関連の使い方</h3><ul><li>font-size、letter-spacingなどのフォント系</li></ul><p><a href="https://chakra-ui.com/docs/styled-system/theme#typography" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#typography</a></p><pre><code>// 7xl = 72px
&lt;Heading fontSize={"7xl"}&gt;
  Next.js × Chakra UI
&lt;/Heading&gt;</code></pre><ul><li>margin、padding</li></ul><p><a href="https://chakra-ui.com/docs/styled-system/theme#spacing" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#spacing</a></p><pre><code>// 2=0.5rem=8pxのpaddingが付く。
&lt;Box p={2}&gt;・・・&lt;/Box&gt;

// そのまま2pxのpaddingが付く。
&lt;Box p={"2px"}&gt;・・・&lt;/Box&gt;</code></pre><ul><li>width、height</li></ul><p><a href="unsafe:[object Object]">https://chakra-ui.com/docs/styled-system/theme#sizes</a></p><pre><code>&lt;Box 
  w={"full"} // full=100%
  h={100} // 1=1pxなので、100=100px
&gt;・・・&lt;/Box&gt;</code></pre><h3 id="h0201d4f644">レスポンシブ</h3><p>propsの値に配列またはオブジェクトを渡すだけでレスポンシブすることができます。<br><a href="https://chakra-ui.com/docs/styled-system/responsive-styles#the-object-syntax" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/responsive-styles#the-object-syntax</a></p><pre><code>&lt;Box bg={["red.500", "yellow.500", "green.500", "blue.500"]} &gt;
  ・・・
&lt;/Box&gt;</code></pre><p>このように、配列を渡すことでレスポンシブを指定することができます。<br>配列を渡した場合、左に書いた値が<code>sm</code>その右の値が<code>md</code>、<code>lg</code>そして一番右の値が<code>xl</code>となっています。</p><pre><code>sm: "30em", // 480px 
md: "48em", // 768px
lg: "62em", // 992px
xl: "80em", // 1280px</code></pre><p><a href="https://chakra-ui.com/docs/styled-system/theme#breakpoints" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#breakpoints</a><br><br>また、以下のようにオブジェクトを使って表現することもできます。</p><pre><code>&lt;Box bg={{ base: "red.500", sm: "yellow.500", md: "green.500", lg: "blue.500" }} &gt;
&nbsp; ・・・
&lt;/Box&gt;</code></pre><h2 id="h2d319ccfc7">疑似要素</h2><p>疑似要素を指定する場合、<code>_before</code> 、<code>_after</code> のように指定します。</p><pre><code>&lt;Box _before={{ content: "", ・・・ }}　_after={{ content: "", ・・・ }}&gt;・・・&lt;/Box&gt;</code></pre><p><br>hoverの時も同様に<code>_hover</code>と指定します。</p><pre><code>&lt;Heading color={"red"} fontSize={"7xl"} _hover={{ color: "blue" }}&gt;
  Next.js × Chakra UI
&lt;/Heading&gt;</code></pre><h2 id="h3bcda3e6b0">最後に</h2><p>今回はChakra UIの基本的な使い方についてご紹介しました。<br>大体この辺りを押さえておくといいかんじにChakraライフを過ごせるのではないかと思います。他に足りない部分であったり応用的な使い方などについてはタイミングが合えば、また書きたいと思います。<br><br><br><br><br><br></p>

Next.jsでChakra UIを使ってみる。

Next.js13のApp Routerについて勉強した

<p>このブログサイトで動的OGPを実装しようとしたお話をします。Next.jsを使用しているので<code>@vercel/og</code>で簡単に実装できます。<u>ただし、Next.js 12.2.3以上でないとこのモジュールが動作しません。</u></p><pre><code>$ npm install @vercel/og</code></pre><p>※インストールした<code>@vercel/og</code>のバージョンは<strong>0.5.6</strong>です。<br></p><pre><code>import { ImageResponse } from "@vercel/og";</code></pre><p>また、Next.js 13.3.0から<code>@vercel/og</code>をインストールしなくても、Next.js APIの<code>next/server</code>から<code>ImageResponse</code>をインポートできるようになり動的OGPを生成できるようになりました。</p><pre><code>import { ImageResponse } from "next/server";</code></pre><h2 id="h32ccf42033">画像を生成してみる</h2><pre><code>// pages/api/og.tsx
import { ImageResponse } from '@vercel/og' // Next.js 12.2.3以上13.3.0未満の場合
import { ImageResponse } from 'next/sever' // Next.js 13.3.0以上の場合

export const config = {
&nbsp; runtime: 'experimental-edge',
}

export default function handler() {
&nbsp; return new ImageResponse(
&nbsp; &nbsp; (
&nbsp; &nbsp; &nbsp; &lt;div
&nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: 'flex',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justifyContent: 'center',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alignItems: 'center',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: '100%',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: '100%',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'white',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: '128px',
&nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; Hello world!
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; ),
     {
      width: 1200,
      height: 600,
    }
&nbsp; )
}</code></pre><p><strong>http://localhost:3000/api/og</strong>にアクセスする。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/546bf59648704a65a16949a23af3f1f0/og%20(2).png" alt=""><br>あとは任意のページにmetaタグを挿入すればOGPが出来上がります。</p><pre><code>import Head from 'next/head'

&lt;Head&gt;
  &lt;title&gt;タイトルです&lt;/title&gt;
  &lt;meta
    property="og:image"
    content="https//hogehoge.com/api/og"
  /&gt;
&lt;/Head&gt;</code></pre><h2 id="h0984899113">動的にタイトルを挿入する</h2><p>それでは、次に動的にタイトルを挿入し、動的なOGPっぽくしたいと思います。<br>結論としては、<strong>https://hogehoge.com/api/og?title=タイトル</strong>のようにクエリパラメータを使用して動的にタイトルを挿入します。</p><pre><code>// pages/api/og.tsx
import { NextApiHandler } from "next";
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

const handler: NextApiHandler = async (req) =&gt; {
  if (!req.url) throw Error("not supported.");
  const { searchParams } = new URL(req.url);
  
  const title = searchParams.get("title");
  const postDate = searchParams.get("postDate");
  return new ImageResponse(
    (
      &lt;div
        style={{
          borderWidth: "36px",
          borderColor: "#5bbee5",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
          color: "black",
          position: "relative",
        }}
      &gt;
        &lt;h2
          style={{
            color: "black",
            fontSize: 64,
          }}
        &gt;
          {title}
        &lt;/h2&gt;
        &lt;div
          style={{
            display: "flex",
            position: "absolute",
            width: "100%",
            bottom: 0,
            paddingRight: 32,
            justifyContent: "flex-end",
          }}
        &gt;
          &lt;h2
            style={{
              color: "black",
              fontSize: 40,
            }}
          &gt;
            {postDate}
          &lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ),
    {
      width: 1200,
      height: 600,
    }
  );
};

export default handler;</code></pre><p>これで<strong>http://localhost:3000/api/og?title=Next.jsでSVGを表示する&amp;postDate=2022年02月02日投稿</strong>にアクセスすると画像が表示されるはずですがされません。？？？？？？？<br><br><code>@vercel/og</code>ではデフォルトで日本語での表示をサポートしているのですが、文字列に漢字が含まれているとsatori内でパースできずにエラーになってしまいます。</p><pre><code>error - uncaughtException: Error [ERR_UNHANDLED_ERROR]: Unhandled error. (Error: Unsupported OpenType signature &lt;htm
&nbsp; &nbsp; at Object.parseBuffer [as parse] (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:11455:15)
&nbsp; &nbsp; at vt.addFonts (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:18:19200)
&nbsp; &nbsp; at gu (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:19:29617)
&nbsp; &nbsp; at async Object.start (webpack-internal:///(middleware)/./node_modules/@vercel/og/dist/index.js:10:2912))</code></pre><p>この問題は日本語フォントを適用することで解決できます。</p><h3 id="h0b769a4504">カスタムフォントを適応させる</h3><p><a href="https://fonts.google.com/" target="_blank" rel="noopener noreferrer">Google Fons</a>あたりから好きなフォントをダウンロードして下さい。<br>ダウンロードしたフォントファイルを<code>public/</code>に格納(※今回は<code>public/font</code>配下に格納しました。)し、以下のように書き換えて下さい。</p><pre><code>// pages/api/og.tsx
import { NextApiHandler } from "next";
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

const notoSansJP = fetch(
  new URL("../../public/font/NotoSansJP-Bold.woff", import.meta.url).toString()
).then((res) =&gt; res.arrayBuffer());

const handler: NextApiHandler = async (req) =&gt; {
  if (!req.url) throw Error("not supported.");
  const { searchParams } = new URL(req.url);
  const fontNoto = await notoSansJP;

  const title = searchParams.get("title");
  const postDate = searchParams.get("postDate");
  return new ImageResponse(
    (
      &lt;div
        style={{
          borderWidth: "36px",
          borderColor: "#5bbee5",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
          color: "black",
          position: "relative",
        }}
      &gt;
        &lt;h2
          style={{
            color: "black",
            fontSize: 64,
            fontFamily: '"NotoSansJP"',
          }}
        &gt;
          {title}
        &lt;/h2&gt;
        &lt;div
          style={{
            display: "flex",
            position: "absolute",
            width: "100%",
            bottom: 0,
            paddingRight: 32,
            justifyContent: "flex-end",
          }}
        &gt;
          &lt;h2
            style={{
              color: "black",
              fontSize: 40,
              fontFamily: '"NotoSansJP"',
            }}
          &gt;
            {postDate}
          &lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ),
    {
      width: 1200,
      height: 600,
      fonts: [
        {
          name: "NotoSansJP",
          data: fontNoto,
          style: "normal",
        },
      ],
    }
  );
};

export default handler;</code></pre><p>これで、<strong>http://localhost:3000/api/og?title=Next.jsでSVGを表示する&amp;postDate=2022年02月02日投稿</strong><br>にアクセスすると上手く表示されるはずです。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/de034134fc43492aa7df23d072381e0a/og%20(1)%20(1).png" alt=""><br><br>ですが、vercelにデプロイする際エラーになりました。<br>vercelのhobbyプランではEdge関数は1MB以下ではならなければいけません。日本語フォントは重い・・・<br>フォントファイルはサブセット化し4.7MBから527KBに落としたのですがEdge関数の大きさは1.12MBでした。(筆者調べ)<br>他の日本語フォントを試したりしたのですがEdge関数の大きさは1MB以下になりませんでした。hobbyプラン以上のプラン変更も検討しましたがこのためだけにプランを変更するのは流石に厳しい・・・<br>だから諦めました。<br><br><code>@vercel/og</code>のバージョンによって漢字が含まれていてもエラーが出ないバージョンがありました。全て確認したわけではありませんですがバージョン<strong>0.0.19</strong>では漢字が含まれていてもエラーがでませんでした。文字列中に全角スペースがあったり、<code>！</code>や<code>？</code>のような全角の記号があるとsatori内でパースできずエラーになってしまうようです。ちなみに、なぜか<code>。</code>は大丈夫でした。<br>ですが、この方法ではvercelにはデプロイできましたが、vercelでは上手く動いてくれませんでした。<br></p><h2 id="h7ed021f0e3">Next.js 13.3.0以上だと関係なかった</h2><p>結論としてはこちらの方法を使って実装しました。Next.js13.3.0以上から<code>next/server</code>でできるようになりましたと冒頭で述べさせていただきました。</p><pre><code>// pages/api/og.tsx
import { ImageResponse } from "next/server";
import { NextApiHandler } from "next";

export const config = {
&nbsp; runtime: "edge",
};

const handler: NextApiHandler = async (req) =&gt; {
&nbsp; if (!req.url) throw Error("not supported.");

&nbsp; const { searchParams } = new URL(req.url);
&nbsp; const title = searchParams.get("title");
&nbsp; const postDate = searchParams.get("postDate");

&nbsp; return new ImageResponse(
&nbsp; &nbsp; (
&nbsp; &nbsp; &nbsp; &lt;div
&nbsp; &nbsp; &nbsp; &nbsp; lang="ja-JP"
&nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: "36px",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: "#5bbee5",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: "white",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "100%",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "100%",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: "flex",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textAlign: "center",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alignItems: "center",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justifyContent: "center",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "black",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: "relative",
&nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;h2
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "black",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 64,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {title}
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/h2&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: "flex",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: "absolute",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "100%",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; paddingRight: 32,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justifyContent: "flex-end",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "black",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 40,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {postDate}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/h2&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; ),
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; width: 1200,
&nbsp; &nbsp; &nbsp; height: 600,
&nbsp; &nbsp; }
&nbsp; );
};

export default handler;</code></pre><p>Next.js 13.3.0以上だとフォントファイルとか関係なく1MB以下に収めることができ無事vercelにデプロイすることができました。<br><br>元々このブログサイトはNext.js13では動いてなかったのでNext.js13にバージョンを上げたりとか、結構苦労しましたがその苦労に関してはまた別の機会にw<br>今思えば他のやり方があったのでは？と思う気持ちもあるのですが今回はこの辺りで失礼します。それでは良いNext.jsライフを〜！！</p><h2 id="hb4905a33a8">参照</h2><ul><li><a href="https://www.newt.so/docs/tutorials/nextjs-og-image-generation" target="_blank" rel="noopener noreferrer">https://www.newt.so/docs/tutorials/nextjs-og-image-generation</a></li><li><a href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation" target="_blank" rel="noopener noreferrer">https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation</a></li><li><a href="https://nextjs.org/docs/app/api-reference/functions/image-response" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/app/api-reference/functions/image-response</a></li></ul><p><br><br><br><br></p>

Next.jsで動的OGPを作った時のエピソードを書いてみました

<p>Next.jsでSVGを表示する方法について考える機会があったので、今回書いてみようと思った次第です。このブログサイトにも至る所にSVGを使っていますが全て今記事の表示方法で行なっています。<br><br>WebサイトにSVGを表示する手段は以下の通りです。</p><ul><li>HTMLの<code>&lt;img&gt;</code>で表示する</li><li>CSSの<code>background-image</code>プロパティで表示する</li><li>SVG内のコードをHTMLに埋め込む</li></ul><p><br>上の二つの手段で表示した場合は、SVG内のスタイルをHTMLもしくはCSSで変更できません。<br>一方、最後に書いた手段を使えばスタイルを変更することができ、外部ファイルへのHTTPリクエスト回数を減らせることからもSVGはインラインで埋め込むことをお勧めします。<br><br>ただし、Next.js(React)内にSVG内のコードを埋め込むためにSVG内のコードをJSXに対応させるために修正しないといけません。この作業って意外とめんどくさいんですよねw<br>そこで、今回は<strong>SVGファイルをReactコンポーネントとして直接importできる</strong>ようにしました。</p><h2 id="h6099da804d">SVGファイルをReactコンポーネントとして直接importできるように準備する</h2><p>まずは<code>@svgr/webpack</code>というものをインストールします。</p><pre><code>$ npm install @svgr/webpack</code></pre><p>次に、<code>next.config.js</code>に以下を記述して下さい。</p><pre><code>/** @type {import('next').NextConfig} */
const nextConfig = {
&nbsp; webpack: (config) =&gt; {
&nbsp; &nbsp; config.module.rules.push({
&nbsp; &nbsp; &nbsp; test: /\.svg$/,
&nbsp; &nbsp; &nbsp; use: [
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: "@svgr/webpack",
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; });
&nbsp; &nbsp; return config;
&nbsp; },
};

module.exports = nextConfig;</code></pre><p>以上の設定を行うことによって、SVGファイルをReactコンポーネントとしてimportできるようになります。</p><h3 id="h36f25b84a1">TypeScriptを使っている場合</h3><p>先ほどの<code>next.config.js</code>に以下を追加して下さい。</p><pre><code>/** @type {import('next').NextConfig} */
const nextConfig = {
&nbsp; webpack: (config) =&gt; {
&nbsp; &nbsp; config.module.rules.push({
&nbsp; &nbsp; &nbsp; test: /\.svg$/,
&nbsp; &nbsp; &nbsp; use: [
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: "@svgr/webpack",
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; });
&nbsp; &nbsp; return config;
&nbsp; },
   // -----------------------追加---------------------------
&nbsp; images: {
&nbsp; &nbsp; disableStaticImages: true,
&nbsp; },
   // ---------------------------------------------------------
};

module.exports = nextConfig;</code></pre><p><code>disableStaticImages: true</code>を設定することで、Next.jsでデフォルトで定義されている画像の型定義設定を無効にできます。<br>無効にすることで、次に行うSVGの型定義を有効化できます。<br>任意の場所に<code>index.d.ts</code>を作成して下さい。SVGの型定義を行います。</p><pre><code>declare module '*.svg' {
  const content: React.FC&lt;React.SVGProps&lt;SVGElement&gt;&gt;;
  export default content;
}</code></pre><h2 id="hb8ab4fa7ac">実際にSVGをReactコンポーネントとして読み込む</h2><p>上記の設定が完了したら、実際にSVGをコンポーネントとして呼び出します。</p><pre><code>import Icon from "../public/icon/icon.svg";

const IconViewComponent = () =&gt; {
  return &lt;Icon /&gt;
}

export default IconViewComponent;</code></pre><p>いい感じに表示できていると思います。<br><br><a href="https://www.npmjs.com/package/@svgr/webpack" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/@svgr/webpack</a></p>

Next.jsでSVGの表示方法を調べてみました。

<p>私が運営しているブログサイトにRSSフィードを実装しました。今回はその時の話をしたいと思います。<br><br>このブログサイトには、コンテンツ管理(ブログ記事)をmicroCMSで管理しているので、microCMSで管理しているブログの記事を<br>取得しxmlで吐いていきたいと思います。<br>尚、フロントエンドはNext.jsです。</p><h2 id="hc3cf2129da">ライブラリをインストール</h2><p>動的にRSSフィードを実装をする上で簡単に実装できるライブラリがあるのでそれをインストールします。</p><pre><code>$ npm install rss</code></pre><p>また今回はtypescriptを使うので、合わせてこちらもインストールします。</p><pre><code>$ npm install --save-dev @types/rss</code></pre><h2 id="hedfa5ee1ed">getServerSidePropsで動的にRSSフィードを生成する</h2><p><code>page/feed.tsx</code>を作成する。</p><pre><code>import React from "react";
import { GetServerSidePropsContext } from "next";
import generateFeed from "../functions/genalate-rss-feed";

export const getServerSideProps = async ({ res }: GetServerSidePropsContext) =&gt; {
  const xml = await generateFeed(); // フィードのXMLを生成する（後述）
	  
  res.statusCode = 200;
  res.setHeader("Cache-Control", "s-maxage=86400, stale-while-revalidate"); // 24時間のキャッシュ
  res.setHeader("Content-Type", "text/xml");
  res.end(xml);
	
  return {
	props: {},
  };
};
	
const feed = () =&gt; null;
export default feed;</code></pre><p><code>getServerSideProps</code>を使用してRSSデータを生成し、直接レスポンスを返すことで、余計なレイアウトやメタタグなどが混入しないようにします。Pageコンポーネント内でHTMLやXMLを返しても、<code>_app.tsx</code>や<code>_document.tsx</code>の中に埋め込まれるため、余計なレイアウトやメタタグなどが混じってしまう可能性があるため、直接レスポンスを返すことでそれを防ぎます。<br><br><code>getServerSideProps</code>の引数で<code>res</code>を受け取ることができ、Headerに<code>Content-Type</code>や<code>Cache-Control</code>を付けた上で、<code>res.end(RSSフィードの中身)</code>という形でレスポンスを返します。これにより、生成されたRSSデータが正しい形式でクライアントに返されるようになります。</p><h2 id="ha10a36ae39">RSSフィードを生成する</h2><p><code>src/functions/genalate-rss-feed.ts</code>を作成します。ここで先ほどインストールした<a href="https://www.npmjs.com/package/rss" target="_blank" rel="noopener noreferrer">rss</a>の登場です。</p><pre><code>import RSS from "rss";
import { createClient } from "microcms-js-sdk"; 
	
export const client = createClient({
　　serviceDomain: process.env.NEXT_PUBLIC_SERVICE_DOMAIN as string, 
  apiKey: process.env.NEXT_PUBLIC_API_KEY as string,
});

const SITE_URL = "サイトのURL";

const generateFeed = async (): Promise&lt;string&gt; =&gt; {
  const feed = new RSS({
    title: "タイトルです",
    description: "ディスクリプションです",
    site_url: SITE_URL,
    feed_url: "/feed",
    language: "ja",
  });
  
  const data = await client.get({
    endpoint: "blog",
  	queries: {
  	  limit: 999,
  	},
  });
  data.contents.forEach((post) =&gt; {
  	feed.item({
  	  title: returnTitle(post.title),
  	  description: returnDiscription(post.body),
  	  date: new Date(post.createdAt),
  	  url: `${SITE_URL}/blog/${post.id}`,
  	});
  });
  
  // XML形式の文字列にする
  return feed.xml();
};
  
export default generateFeed;</code></pre><p><br><a href="https://zenn.dev/catnose99/articles/c7754ba6e4adac" target="_blank" rel="noopener noreferrer">https://zenn.dev/catnose99/articles/c7754ba6e4adac</a></p>

microCMSから取得してきたデータをNext.jsを使ってRSSフィードを生成する方法

<p>こんにちは。<br>今回は題名にもありますが、突然Vercelにデプロイできなくなってしまったので私がどのように解決したのかダラダラやっていきます。</p><h2 id="h3a5ddd2120">ログを確認しろ！！</h2><p>当たり前ですが「ログを確認しろ！！」です。<br>ログにはエラーの原因が必ず書いています。(英語なので読む気が失せますが。。。)<br><br>自分の場合も遠回りしましたがログを見ました。<br>その内容がこれです。</p><pre><code>[16:53:54.204] Cloning github.com/watataku8911/watataku-blog (Branch: develop_ver.14, Commit: 7200375) [16:53:54.952] Cloning completed: 748.213ms [16:53:55.338] No Build Cache available [16:53:55.375] Running "vercel build" [16:53:55.851] Vercel CLI 28.2.5 [16:53:56.135] Detected `package-lock.json` generated by npm 7+... [16:53:56.143] Installing dependencies... [16:54:20.016] [16:54:20.016] added 824 packages in 24s [16:54:20.017] [16:54:20.017] 133 packages are looking for funding [16:54:20.017] run `npm fund` for details [16:54:20.044] Detected Next.js version: 12.0.7 [16:54:20.052] Running "npm run build" [16:54:20.346] [16:54:20.347] &gt; build [16:54:20.347] &gt; next build [16:54:20.347] [16:54:22.229] Attention: Next.js now collects completely anonymous telemetry regarding usage. [16:54:22.230] This information is used to shape Next.js' roadmap and prioritize features. [16:54:22.230] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: [16:54:22.230] https://nextjs.org/telemetry [16:54:22.230] [16:54:22.245] Browserslist: caniuse-lite is outdated. Please run: [16:54:22.245] npx browserslist@latest --update-db [16:54:22.245] [16:54:22.245] Why you should do it regularly: [16:54:22.245] https://github.com/browserslist/browserslist#browsers-data-updating [16:54:22.286] info - Checking validity of types... [16:54:27.983] info - Creating an optimized production build... [16:54:28.045] &gt; [PWA] Compile client (static) [16:54:28.045] &gt; [PWA] Auto register service worker with: /vercel/path0/node_modules/next-pwa/register.js [16:54:28.046] &gt; [PWA] Service worker: /vercel/path0/.next/sw.js [16:54:28.046] &gt; [PWA] url: /sw.js [16:54:28.047] &gt; [PWA] scope: / [16:54:28.214] Browserslist: caniuse-lite is outdated. Please run: [16:54:28.215] npx browserslist@latest --update-db [16:54:28.215] [16:54:28.215] Why you should do it regularly: [16:54:28.215] https://github.com/browserslist/browserslist#browsers-data-updating [16:54:28.238] &gt; [PWA] Compile server [16:54:38.048] Failed to compile. [16:54:38.048] [16:54:38.048] Please check your GenerateSW plugin configuration: [16:54:38.048] [WebpackGenerateSW] 'pwa' property is not expected to be here. [16:54:38.048] [16:54:38.048] [16:54:38.048] &gt; Build failed because of webpack errors [16:54:38.075] Error: Command "npm run build" exited with 1</code></pre><p>見てるだけで吐き気を起こしてしまいます。<br>でも、よく見るとエラーの原因が書いてありました。</p><pre><code>Browserslist: caniuse-lite is outdated. Please run: [16:54:28.215] npx browserslist@latest --update-db</code></pre><blockquote>Browserslist: caniuse-lite は古くなっています。npx browserslist@latest --update-dbを実行してください。</blockquote><p>とりあえず指示通りに書きコマンドを実行しました。</p><pre><code>$ npx browserslist@latest --update-db</code></pre><p>実行後、デプロイできました。良かった良かったw</p><h2 id="ha214098e44">まとめ</h2><p>ログを見ろ！！以上。さすれば解決できる。</p><h2 id="h7605dc6208">参考文献</h2><ul><li><a href="https://dev.classmethod.jp/articles/asked-to-update-the-browserslist-when-building-react-app/" target="_blank" rel="noopener noreferrer">アプリのビルド時にBrowserslistの更新を要求されるので対処してみる</a></li><li><a href="https://mutter.monotalk.xyz/posts/0e47ac7712c43f814af104b7161672e7" target="_blank" rel="noopener noreferrer">Browserslistをdbを更新しろというエラー</a></li></ul>

T.W