Zenn
🐣

Next.jsで作ったポートフォリオにLAPRASのプレビューを追加

2023/09/28に公開
Next.js
GitHub Actions
LAPRAS
#
App Router
#
linkpreview
tech

モチベーション

  • 最近LAPRASに登録したが、そのポートフォリオがスコアで表現されるためわかりやすくていい感じ
  • これまでも自分で作成したポートフォリオサイトにLAPRASのページのリンクを貼っていたが、目に付きやすいようにLAPRASのページのプレビューを自分のサイトに埋め込みたくなった

https://lapras.com/public/shoji9x9

環境

  • Node: 18.17.1
  • Next.js: 13.4.13
    • App Routerを利用
  • React: 18.2.0
  • TypeScript: 5.1.6

プレビューの実現方法

LinkPreview APIを利用しました。使い方は非常に簡単で、

  • サインアップするとAPI Keyが発行される
  • APIに対してAPI Keyとプレビュー表示したいサイトのURLをクエリーパラメーターとして渡すと、プレビュー画像などがレスポンスとして返ってくる
  • そのプレビュー画像を自分のサイトに埋め込む

という感じです。詳しい使い方はJavaScriptやNoCodeからリンクのプレビュー機能を開発できる「LinkPreview」を使ってみた！が参考になると思います。

API呼び出しの実装

今回、App Routerを利用していてページは1つだけ（/app/page.tsx）です。なので、このファイルに次のような処理を追加しプレビューを取得しました。

async function getPreview() {
  const key = process.env.LINK_PREVIEW_API_KEY;

  const res = await fetch(
    `http://api.linkpreview.net/?key=${key}&q=https://lapras.com/public/shoji9x9`,
  );
  const preview = await res.json();
  return preview;
}

そしてページコンポーネント側で次のように呼び出し利用しています。

export default async function Home() {
  const preview = await getPreview();

  // 以下でpreview.image（プレビュー画像のURL）などを利用

Page Routerの場合はgetStaticPropsなどを利用していたと思いますが、App Routerでは廃止されたんですね。そうとは知らずしっかりエラーを経験しました。Page RouterとApp Routerの違いはざっくりApp Router入門【Next.js】がわかりやすかったです。

はまったところ

LinkPreview APIの使い方は簡単ですが、問題はAPI Keyの管理方法・・・。GitHubのリポジトリーにアップロードすると悪用される可能性があるのでNG、ということで今回初めてGitHubのシークレットを利用しました。

はまったのはここからで、実はGitHubのシークレットにはEnvironment SecretとRepository Secretの2種類があり、GitHub Actionsのワークフロー内で environment を指定しない場合は後者のRepository Secretを利用する必要があります。このことに気付かずシークレットが取得できず調査に1～2時間費やしました。

詳細はGitHub Actionsで機密情報を扱う方法を参照下さい。

妥協したところ

LAPRASのスコアは日々変わるので、本当はリクエストがある度にプレビューを取得する処理を動かしたいです。ですが、GitHub Pagesでは静的サイトのホスティングとなってしまい、サーバーサイドレンダリングが使えません。クライアントサイドレンダリングは設定により実現可能なようですが、そうするとAPI Keyが漏れてしまうということで、今回はビルドの中でプレビューを取得することで妥協しました（なのでプレビューが結構古い可能性がある）。

ポートフォリオサイト

https://shoji9x9.github.io/

リポジトリー

https://github.com/shoji9x9/shoji9x9.github.io

Discussion