Firestore


<p>今回は、以下の3つをNext.js 13で実装するためのメモです。</p>



<ul>
<li><strong>Googleアカウントでログイン</strong>できる</li>



<li>アカウント、セッション情報を<strong>Firestoreに保存する</strong></li>



<li>サーバーサイドとクライアントサイドからセッション情報を取得できる</li>
</ul>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">0）パッケージをインストール</a></li><li><a href="#1GCP_Firebase">1）GCP &amp; Firebaseのプロジェクトを作成する</a><ul><li><a href="#Google_Cloud_Platform">「Google Cloud Platform」のプロジェクトを作成する</a></li><li><a href="#Firebase">「Firebase」のプロジェクトを作成する</a></li></ul></li><li><a href="#2NextAuth">2）NextAuthに必要なファイルを作る</a><ul><li><a href="#i-2">環境変数に必要な情報を追加する</a></li></ul></li><li><a href="#3">3）ログイン情報の取得方法</a><ul><li><a href="#i-3">「サーバーサイド」から取得する</a></li><li><a href="#i-4">「クライアントサイド」から取得する</a></li></ul></li><li><a href="#i-5">おまけ）権限ごとに表示コンテンツを分ける</a></li><li><a href="#i-6">まとめ</a></li></ul></div>
<h2><span id="i">0）パッケージをインストール</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install next-auth
$ npm install firebase-admin
$ npm install @next-auth/firebase-adapter</code></pre></div>



<h2><span id="1GCP_Firebase">1）GCP &amp; Firebaseのプロジェクトを作成する</span></h2>



<h3><span id="Google_Cloud_Platform">「Google Cloud Platform」のプロジェクトを作成する</span></h3>



<p>※今回は省略します。（手順は下記記事でメモしています。）</p>



<ul>
<li><a href="https://craftime.net/posts/nextjs-google-login-using-nextauth">【Next.js】Googleアカウントでのログイン機能を実装する方法 &#8211; CRAFT TIME</a></li>
</ul>



<h3><span id="Firebase">「Firebase」のプロジェクトを作成する</span></h3>



<p>※今回は省略します。（手順は下記記事でメモしています。）</p>



<ul>
<li><a href="https://craftime.net/posts/nextjs-google-login-using-nextauth">【Next.js】Googleアカウントでのログイン機能を実装する方法 &#8211; CRAFT TIME</a></li>
</ul>



<h2><span id="2NextAuth">2）NextAuthに必要なファイルを作る</span></h2>



<ul>
<li>app/api/auth/[…nextauth]/route.ts</li>



<li>lib/options.ts</li>
</ul>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="app/api/auth/[...nextauth]/route.ts" data-lang="TypeScript"><code>import { authOptions } from &quot;@/lib/options&quot;;
import NextAuth from &quot;next-auth&quot;;

const handler = NextAuth(authOptions);
export {handler as GET,handler as POST}</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="lib/options.ts" data-lang="TypeScript"><code>import NextAuth, {Session, User} from &quot;next-auth&quot;
import GoogleProvider from &#39;next-auth/providers/google&#39;;
import { FirestoreAdapter } from &quot;@next-auth/firebase-adapter&quot;
import { JWT } from &quot;next-auth/jwt/types&quot;;
import { cert } from &quot;firebase-admin/app&quot;;


export const authOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID ?? &quot;&quot;,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? &quot;&quot;,
        }),
    ],
    adapter: FirestoreAdapter({
        credential: cert({
          projectId: process.env.FIREBASE_PROJECT_ID,
          clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
          privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/gm, &quot;\n&quot;),
        }),
    }),
    secret: process.env.NEXTAUTH_SECRET,
    // debug: true,
}
export default NextAuth(authOptions)</code></pre></div>



<h3><span id="i-2">環境変数に必要な情報を追加する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file=".env.local"><code>FIREBASE_PROJECT_ID=
FIREBASE_PRIVATE_KEY=
FIREBASE_CLIENT_EMAIL=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

NEXTAUTH_SECRET=</code></pre></div>



<p>※「NEXTAUTH_SECRET」には<code>$ openssl rand -base64 32</code>で生成したランダムな文字列を設定すればOK。</p>



<h2><span id="3">3）ログイン情報の取得方法</span></h2>



<h3><span id="i-3">「サーバーサイド」から取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-lang="TSX" data-line="1,2,5"><code>import { getServerSession } from &quot;next-auth&quot;;
import { authOptions } from &quot;../lib/authOptions&quot;;

export default async function Home() {
    const session = await getServerSession(authOptions);  // セッション情報を取得

    return (
        &lt;&gt;
            { session && 
                &lt;div&gt;...&lt;/div&gt;
            }
        &lt;/&gt;
    );
}</code></pre></div>



<h3><span id="i-4">「クライアントサイド」から取得する</span></h3>



<p>クライアントサイドからセッション情報を取得するには、<code>SessionProvider</code>で囲う必要があります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="components/NextAuthProvider" data-lang="TSX"><code>&quot;use client&quot;;

import { SessionProvider } from &quot;next-auth/react&quot;;

export const NextAuthProvider = ({ children }: {children?: React.ReactNode}) =&gt; {
    return &lt;SessionProvider&gt;{children}&lt;/SessionProvider&gt;;
};</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="app/layout.tsx" data-lang="TSX"><code>import { NextAuthProvider } from &quot;@/components/NextAuthProvider&quot;;

export default function RootLayout({children,}: {children: React.ReactNode;}) {
    return (
        &lt;NextAuthProvider&gt;
            &lt;html lang=&quot;ja&quot;&gt;
                &lt;body&gt;{chidren}&lt;/body&gt;
            &lt;/html&gt;
        &lt;/NextAuthProvider&gt;
    );
}</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="components/EditButton.tsx" data-lang="TSX"><code>&#39;use client&#39;;

import React from &quot;react&quot;;
import {useSession} from &quot;next-auth/react&quot;;

export default function EditButton() {
    const { data: session, status } = useSession();  // セッション情報を取得

    return (
        &lt;&gt;
            {status === &quot;loading&quot;
            ? // 0）読み込み中
                &lt;div&gt;Loading...&lt;/div&gt;
                
            : status === &quot;authenticated&quot;
                ? //  1）ログイン済み
                &lt;div&gt;Welcome, {session.user.name}!&lt;/div&gt;

                : //  2）未ログイン
                &lt;div&gt;ログインしてください。&lt;/div&gt;
            }
        &lt;/&gt;
    )
}</code></pre></div>



<h2><span id="i-5">おまけ）権限ごとに表示コンテンツを分ける</span></h2>



<p>Firestoreのセッション情報に管理権限のデータがある場合、それを使って権限ごとに表示コンテンツを分けるような処理ができました。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="lib/options.ts" data-lang="TypeScript" data-line="23,24,25,26,27,28,29"><code>import NextAuth, {Session, User} from &quot;next-auth&quot;
import GoogleProvider from &#39;next-auth/providers/google&#39;;
import { FirestoreAdapter } from &quot;@next-auth/firebase-adapter&quot;
import { JWT } from &quot;next-auth/jwt/types&quot;;
import { cert } from &quot;firebase-admin/app&quot;;


export const authOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID ?? &quot;&quot;,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? &quot;&quot;,
        }),
    ],
    adapter: FirestoreAdapter({
        credential: cert({
          projectId: process.env.FIREBASE_PROJECT_ID,
          clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
          privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/gm, &quot;\n&quot;),
        }),
    }),
    secret: process.env.NEXTAUTH_SECRET,
    callbacks: {
        session({ session, token, user }: { session: Session, token: JWT, user: User }) {
            session.user_id = user.id      // ユーザーIDをセッション情報に追加
            session.user_role = user.role  // ユーザー権限をセッション情報に追加
            return session
        }
    },
    // debug: true,
}
export default NextAuth(authOptions)</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="app/pages.tsx" data-lang="TSX"><code>export default async function Home() {
    const session = await getServerSession(authOptions);

    return (
        &lt;&gt;
            { session?.user_role === &quot;Administrator&quot; 
                ? &lt;div&gt;管理者だけ見れています&lt;/div&gt;
                : &lt;div&gt;閲覧権限がありません&lt;/div&gt;
            }
        &lt;/&gt;
    );
}</code></pre></div>



<h2><span id="i-6">まとめ</span></h2>



<p>細かい部分で理解できていないところはありますが、一応動くところまでは今回のコードでできました！</p>



<ul class="references">
<li><a href="https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/">Setup and Use NextAuth.js in Next.js 13 App Directory 2023</a></li>



<li><a href="https://zenn.dev/hayato94087/articles/91179fbbe1cad4">NextAuth.jsでNext.js13にGoogle認証機能を実装</a></li>
</ul>


【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。


<p>Next.js 13でWEBサイトを作成している時に、<strong>OGP画像を生成してFirestore + CloudStorageに保存する処理</strong>を調べたので、今回はそのメモをします。</p>



<p>※今回は「ひとまず動く」という内容なので、不要な部分などあるかもしれません。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#1">1）今回使うパッケージをインストール</a></li><li><a href="#2Firebase">2）Firebaseでプロジェクトを作成する</a><ul><li><a href="#Firestore_Database">Firestore Databaseを作成する</a></li><li><a href="#Storage">Storageを作成する</a></li><li><a href="#i">秘密鍵を取得する</a></li></ul></li><li><a href="#3NextjsFirebase">3）Next.jsでFirebaseのセットアップをする</a></li><li><a href="#4URLAPI">4）画像URLを取得&amp;生成するAPIを作成する</a><ul><li><a href="#APIapiogp">API作成（/api/ogp）</a></li><li><a href="#canvas">canvasで画像生成処理</a></li></ul></li><li><a href="#5OGP">5）ページにOGPを設定する</a></li><li><a href="#i-2">おまけ：今回起きたエラー</a><ul><li><a href="#canvas-2">「canvas」がインストールできない</a></li><li><a href="#canvasVercel">「canvas」が容量制限によってVercelで使えない</a></li><li><a href="#httpsxxxapiogp">https://xxx/api/ogpが上手く機能しない</a></li></ul></li><li><a href="#OGP">おまけ：OGP画像の描画デザインを変える</a></li></ul></div>
<h2><span id="1">1）今回使うパッケージをインストール</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install firebase
$ npm install firebase-admin
$ npm install @napi-rs/canvas</code></pre></div>



<p>今回Vercelにデプロイしたので「canvas」の代わりに「<strong>@napi-rs/canvas</strong>」を使いました。後述の「今回発生したエラー」で詳しい理由を紹介しています。</p>



<h2><span id="2Firebase">2）Firebaseでプロジェクトを作成する</span></h2>


<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/06/image-1024x477.png" alt="" class="wp-image-3792" width="512" height="239" srcset="https://craft-time.jp/wp-content/uploads/2023/06/image-1024x477.png 1024w, https://craft-time.jp/wp-content/uploads/2023/06/image-300x140.png 300w, https://craft-time.jp/wp-content/uploads/2023/06/image-768x358.png 768w, https://craft-time.jp/wp-content/uploads/2023/06/image-304x142.png 304w, https://craft-time.jp/wp-content/uploads/2023/06/image-282x131.png 282w, https://craft-time.jp/wp-content/uploads/2023/06/image.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /></figure></div>


<p>「<a href="https://firebase.google.com/?hl=ja">Firebase</a>」で新しくプロジェクトを作成します。</p>



<h3><span id="Firestore_Database">Firestore Databaseを作成する</span></h3>



<h3><span id="Storage">Storageを作成する</span></h3>



<h3><span id="i">秘密鍵を取得する</span></h3>



<p>「設定」→「サービスアカウント」→「新しい秘密鍵を生成」をしてJsonファイルを取得します。</p>



<p>このJsonファイルのデータは後ほどセットアップの環境変数で使用します。</p>



<h2><span id="3NextjsFirebase">3）Next.jsでFirebaseのセットアップをする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="firebase/client.ts" data-lang="TypeScript"><code>import { initializeApp, getApps } from &quot;firebase/app&quot;;

// 必要な機能をインポート
import { getAnalytics } from &quot;firebase/analytics&quot;;
import { getFirestore } from &quot;firebase/firestore&quot;;
import { getStorage } from &quot;firebase/storage&quot;;
import { getAuth } from &quot;firebase/auth&quot;;
import { getFunctions } from &quot;firebase/functions&quot;;

const firebaseConfig = {
    // TODO:認証情報を設置
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};

if (!getApps()?.length) {
    // Firebaseアプリの初期化
    initializeApp(firebaseConfig);
}

// 他ファイルで使うために機能をエクスポート
export const analytics = getAnalytics();
export const db = getFirestore();
export const storage = getStorage();
export const auth = getAuth();
export const funcions = getFunctions();</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="firebase/firebaseAdmin.ts" data-lang="TypeScript"><code>import * as admin from &quot;firebase-admin&quot;;

if (!admin.apps.length) {
    admin.initializeApp({
        credential: admin.credential.cert({
            projectId: process.env.FIREBASE_PROJECT_ID!,
            clientEmail: process.env.FIREBASE_CLIENT_EMAIL!,
            privateKey: process.env.FIREBASE_PRIVATE_KEY!.replace(/\\n/g, &quot;\n&quot;),
        }),
        storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    });
}

const db = admin.firestore();
const storage = admin.storage();

export { db, storage };</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file=".env.local"><code>FIREBASE_API_KEY=xxx
FIREBASE_AUTH_DOMAIN=xxx
FIREBASE_PROJECT_ID=xxx
FIREBASE_STORAGE_BUCKET=xxx
FIREBASE_MESSAGING_SENDER_ID=xxx
FIREBASE_APP_ID=xxx
FIREBASE_MEASUREMENT_ID=xxx
FIREBASE_CLIENT_EMAIL=xxx
FIREBASE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\nxxx</code></pre></div>



<h2><span id="4URLAPI">4）画像URLを取得&amp;生成するAPIを作成する</span></h2>



<h3><span id="APIapiogp">API作成（/api/ogp）</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="pages/api/ogp.ts" data-lang="TypeScript"><code>import { NextApiRequest, NextApiResponse } from &quot;next&quot;;
import { db, storage } from &quot;@/lib/firebase/firebaseAdmin&quot;;
import { createOGPImage } from &quot;@/utils/ogpGenerator&quot;;


export default async function GenerateOGP(req: NextApiRequest, res: NextApiResponse) {
    // 1) Cloud Storage: 画像を保存する「ストレージ」
    // 2) Firestore:     Cloud Storageに保存された画像のパスをまとめた「データベース」

    // ============================================
    // リクエスト元から「URL」と「診断タイトル」を取得
    // ============================================
    const pageUrl = req.query.url as string;      // URLを取得
    const pageId = encodeURIComponent(pageUrl);   // URLをエンコード（Firestoreに保存するID用）
    const text = req.query.text as string         // OGPに描画するテキストを取得

    // ============================================
    // FirestoreからOGP画像のURLを取得
    // ============================================
    const doc = await db.collection(&quot;ogps&quot;).doc(pageId).get();

    // ============================================
    // FirestoreにあればURL取得、なければ画像生成してからURL取得
    // ============================================
    if (doc.exists) {  // ===== OGP画像が既にある場合 =====
        res.status(200).json({ imageUrl: doc.data()?.imageUrl }); // 200: 画像URLを返す
    } else {           // ===== OGP画像がない場合 =====
        // OGP画像を生成
        const ogpImage = await createOneOGPImage(text);   // 画像を生成する
        const fileName = `${pageId}.png`;                         // ファイル名を設定

        // Cloud Storageに画像を保存
        const file = storage.bucket().file(fileName);             // Cloud Storageにファイルオブジェクトを作成（画像保存先の確保）
        await file.save(ogpImage, { contentType: &quot;image/png&quot; });  // Cloud Storageのファイルオブジェクトに生成画像を保存

        // OGP画像のURLを取得
        const imageUrl = await file.getSignedUrl({                // getSignedUrlメソッド: 読み取り専用のURLを生成
            action: &quot;read&quot;,
            expires: &quot;03-09-2491&quot;,
        });

        await db.collection(&quot;ogps&quot;).doc(pageId).set({imageUrl: imageUrl[0]});  // FirestoreにOGP画像のURLを保存

        res.status(200).json({ imageUrl: imageUrl[0] });          // 200: 画像URLを返す
    }
};
</code></pre></div>



<p>このコードでは、Firestoreに<strong>既に生成画像があればその画像URLを取得</strong>し、<strong>なければ新しく画像を生成する処理をして画像URLを取得</strong>します。</p>



<h3><span id="canvas">canvasで画像生成処理</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="utils/ogpGenerator.ts" data-lang="TypeScript"><code>import { createCanvas, loadImage, GlobalFonts } from &quot;@napi-rs/canvas&quot;;


export async function createOGPImage(text: string): Promise&lt;Buffer&gt; {
    const baseImagePath = &quot;public/images/ogps/ogpBase.png&quot;; // OGP画像のベースURL
    const baseImage = await loadImage(baseImagePath);       // ベース画像を読み込み

    const canvas = createCanvas(baseImage.width, baseImage.height);          // キャンバスを作成（ベース画像と同じサイズ）
    GlobalFonts.registerFromPath(&#39;public/fonts/NotoSansJP-Bold.ttf&#39;, &#39;Noto&#39;) // 日本語フォントを指定
    const ctx = canvas.getContext(&quot;2d&quot;);                                     // 2Dキャンバスを指定

    ctx.drawImage(baseImage, 0, 0, baseImage.width, baseImage.height);   // ベース画像をキャンバスに描画

    // フォントと色を設定
    ctx.font = &quot;40px &#39;Noto&#39;&quot;;
    ctx.fillStyle = &quot;black&quot;;

    // テキストの描画
    ctx.fillText(text, 50, 50)

    return canvas.toBuffer(&quot;image/png&quot;);
}</code></pre></div>



<p>このコードでは、実際に<strong>どんな画像を生成するか</strong>を記載しています。具体的には下記のような内容を指定しています。</p>



<ul>
<li>ベースになる画像を指定（背景画像）</li>



<li>日本語フォント（今回の使用フォント：<a href="https://fonts.google.com/noto/specimen/Noto+Sans+JP">Noto Sans Japanese &#8211; Google Fonts</a>）</li>



<li>描画位置</li>
</ul>



<h2><span id="5OGP">5）ページにOGPを設定する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="/app/page.tsx" data-lang="TSX" data-line="4,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24"><code>// メタデータを生成する関数
export async function generateMetadata() {
    const url = `https://${YOUR_SITE_DOMAIN}`;
    const ogpUrl = `https://${YOUR_SITE_DOMAIN}/api/ogp?text=${&#39;描画するテキスト&#39;}`;

    const metadata = {
        title: &#39;YOUR_TITLE&#39;,
        description: &#39;YOUR_DESCRIPTION&#39;,
        openGraph: {
            title: &#39;YOUR_TITLE&#39;,
            description: &#39;YOUR_DESCRIPTION&#39;,
            url: url,
            images: [
                { url: ogpUrl, width: 1200, height: 630, alt: &#39;YOUR_TITLE&#39;}
            ],
            locale: &#39;ja_JP&#39;,
            type: &#39;website&#39;,
        },
        twitter: {
            card: &#39;summary_large_image&#39;,
            title: &#39;YOUR_TITLE&#39;,
            description: &#39;YOUR_DESCRIPTION&#39;,
            images: [ogpUrl]
        },
    }
    return metadata;
}

export default function Home() {
    return (...)
}</code></pre></div>



<h2><span id="i-2">おまけ：今回起きたエラー</span></h2>



<h3><span id="canvas-2">「canvas」がインストールできない</span></h3>



<p>「canvas」を使う場合には依存関係のあるライブラリをインストールする必要があります。Dockerを使用する場合にはDockerfileに下記を追記してライブラリをインストールします。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="Dockerfile"><code># 依存関係のあるライブラリのインストール
RUN apt-get update && apt-get install -y \
    build-essential \
    libcairo2-dev \
    libpango1.0-dev \
    libjpeg-dev \
    libgif-dev \
    librsvg2-dev</code></pre></div>



<h3><span id="canvasVercel">「canvas」が容量制限によってVercelで使えない</span></h3>



<p class="error">Error: The Serverless Function &#8220;api/ogp&#8221; is 54.9mb which exceeds the maximum size limit of 50mb</p>



<p>「canvas」ではVercelへのデプロイ時にエラーが起きました。「<a href="https://www.npmjs.com/package/@napi-rs/canvas">@napi-rs/canvas</a>」を使用することで容量を減らして同じ機能のままデプロイすることができました。</p>



<p>（参考：<a href="https://stackoverflow.com/questions/73841881/node-canvas-on-vercel-serverless-function-the-serverless-function-exceeds-the">next.js &#8211; Node Canvas on Vercel Serverless Function &#8211; The Serverless Function exceeds the maximum size limit of 50mb &#8211; Stack Overflow</a>）</p>



<h3><span id="httpsxxxapiogp">https://xxx/api/ogpが上手く機能しない</span></h3>



<p>最初は<code>/app</code>ディレクトリ下に<code>/api/ogp</code>を作成していました。ただしNext.js 13では<strong><code>/api</code>は、<code>/app</code>下ではなく<code>/pages</code>下に置かなければいけない</strong>ようでした。</p>



<p>新しくトップディレクトリに<code>/pages</code>ディレクトリを作成して、<code>/pages/api/ogp.ts</code>を作成することで、https://xxx/api/ogpで処理を進められるようになりました。</p>



<ul>
<li><a href="https://www.youtube.com/watch?v=varePWkGi8Y">Next.js 13 API Routes Tutorial &#8211; YouTube</a></li>
</ul>



<h2><span id="OGP">おまけ：OGP画像の描画デザインを変える</span></h2>


<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/06/グループ-3-1024x576.png" alt="" class="wp-image-3798" width="512" height="288" srcset="https://craft-time.jp/wp-content/uploads/2023/06/グループ-3-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2023/06/グループ-3-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2023/06/グループ-3-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2023/06/グループ-3-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2023/06/グループ-3-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2023/06/グループ-3.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /></figure></div>


<ul>
<li>テキストの高さ・幅の中央揃え</li>



<li>指定テキスト描画範囲を超えたら改行</li>
</ul>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="utils/ogpGenerator.ts" data-lang="TypeScript"><code>import { createCanvas, loadImage, GlobalFonts } from &quot;@napi-rs/canvas&quot;;


export async function createOGPImage(text: string): Promise&lt;Buffer&gt; {
    // console.log(text)
    const baseImagePath = &quot;public/images/ogps/ogpBase.png&quot;; // OGP画像のベースURL
    const baseImage = await loadImage(baseImagePath);       // ベース画像を読み込み

    const canvas = createCanvas(baseImage.width, baseImage.height);          // キャンバスを作成（ベース画像と同じサイズ）
    GlobalFonts.registerFromPath(&#39;public/fonts/NotoSansJP-Bold.ttf&#39;, &#39;Noto&#39;) // 日本語フォントを指定
    const ctx = canvas.getContext(&quot;2d&quot;);                                     // 2Dキャンバスを指定

    ctx.drawImage(baseImage, 0, 0, baseImage.width, baseImage.height);   // ベース画像をキャンバスに描画

    // フォントと色を設定
    ctx.font = &quot;40px &#39;Noto&#39;&quot;;
    ctx.fillStyle = &quot;black&quot;;

    const drawWidth = 950;   // 描画範囲の幅
    const drawHeight = 380;  // 描画範囲の高さ
    const drawStartX = (canvas.width - drawWidth) / 2;   // 描画範囲の開始X座標
    const drawStartY = (canvas.height - drawHeight) / 2; // 描画範囲の開始Y座標

    const textWidth = ctx.measureText(text).width;       // テキストの描画幅を計算
    const textHeight = 40;                               // フォントサイズからテキストの高さを決定（実際の高さはフォントにより異なる可能性があります）

    // const textX = drawStartX + (drawWidth - textWidth) / 2;   // 描画範囲中央揃えにするためのX座標を計算
    // const textY = drawStartY + (drawHeight + textHeight) / 2; // 描画範囲中央揃えにするためのY座標を計算
    // ctx.fillText(text, textX, textY);  // テキストを描画

    const lineHeight = 50; // 行の高さ
    const words = text.split(&#39;&#39;);  // 単語単位に分割する
    let lines = [&#39;&#39;];
    let lineIndex = 0;

    // 一文字ずつループ処理
    for (let n = 0; n &lt; words.length; n++) {
        // console.log(words[n])
        const testLine = lines[lineIndex] + words[n];  // 現在の行に文字を追加して仮テキストを作成
        const metrics = ctx.measureText(testLine);     // 仮テキストの幅を計測
        const testWidth = metrics.width;

        // 仮テキストの幅が描画範囲を超えていたら、新しい行を作成
        if (testWidth &gt; drawWidth && n &gt; 0) {
            lineIndex++;
            lines[lineIndex] = &quot;&quot;;     // 新しい行を空文字列で初期化
        }
        lines[lineIndex] += words[n];  // 現在の行に文字を追加
        // 「。」と「！」の場合は改行する
        if ((words[n] === &quot;。&quot; || words[n] === &quot;！&quot;) && n !== words.length - 1) {
            lineIndex++;
            lines[lineIndex] = &quot;&quot;;     // 新しい行を空文字列で初期化
        }
    }

    const totalTextHeight = lineIndex * lineHeight;                     // テキストの高さ合計を計算
    const textStartY = drawStartY + (drawHeight - totalTextHeight) / 2; // テキストの開始Y座標を計算

    // 一行ずつ描画
    for (let i = 0; i &lt;= lineIndex; i++) {
        const lineWidth = ctx.measureText(lines[i]).width;
        ctx.fillText(lines[i], drawStartX + (drawWidth - lineWidth) / 2, textStartY + i * lineHeight + lineHeight/2);
    }

    return canvas.toBuffer(&quot;image/png&quot;);
}</code></pre></div>



<ul class="references">
<li><a href="https://www.youtube.com/watch?v=varePWkGi8Y">Next.js 13 API Routes Tutorial &#8211; YouTube</a></li>



<li><a href="https://nextjs.org/docs/app/api-reference/functions/generate-metadata">Functions: generateMetadata | Next.js</a></li>



<li><a href="https://www.npmjs.com/package/@napi-rs/canvas">@napi-rs/canvas &#8211; npm</a></li>
</ul>


「Firestore」の記事一覧