はてなブックマーク

おはこんにちばんは。今回は Next.js で OGP画像 の動的生成をしてみました！ 自作したブログなどをどうせなら Twitter や SNS 等の SNS にシェアした際に、OGP 用画像を表示して視覚的にもアピールしたいですよね！分かります。私もそうでした。でも、どうやってページ毎に OGP画像 を生成すればいいのか分からんですよね。 そこで、今回は Next.js で Vercel にデプロイ時のOGP画像を動的に生成する方法を解説しようと思います。 サンプルコードはこちら。 実行環境Next.js 10.0.0React 17.0.1Canves 2.6.1 必要なライブラリをインストール今回は Next.js のサーバーサイド の処理で画像生成していくので、 node-canvas というライブラリを利用します。サーバサイドで Canvas が利用できるライブラリです。

おはこんばんは。最近、 Next.js × microCMS で自作したこのサイトにブログの検索機能を実装してみました。 ブログでは、サイト内検索のフォームをよく見かけますよね。ただ、全文検索の機能等を実装する必要があり、意外と面倒だったりします。 そんな面倒なことも、microCMS のAPIは全文検索機能を備えているので、簡単に実装出来てしまいます。今回はその全文検索機能を用いたブログの検索機能の実装方法をご紹介します。 実行環境Next.js 10.0.4React 17.0.1 グローバルなStateの管理まずは、複数のドメインでキーワードを扱うことを想定し、グローバルなStateで管理するようにします。今回は、React Context を用いた方法でご紹介します。 createContext で以下のように Context を定義します。