定年後にWeb開発者目指す

Next.jsでのOGP画像の自動生成

pitang1965 — Wed, 12 Oct 2022 11:39:09 +0000

概要

動的にOpen Graph（OG）画像の生成するための方法について、OG Image Generation – Vercel Docsに書いてあるような内容のメモです。
Vercelの@vercel/ogライブラリとVercel Edge Functionsを使用してソーシャルカード画像を生成します。

インストール

// pnpmの場合
pnpm add @vercle/og

metaタグの変更（その1）

metaタグを設定している箇所で、contentについて変更します。

↓

APIの追加

src/pages/api/og.tsx を追加しました。

// /pages/api/og.tsx

import { ImageResponse } from '@vercel/og';
import { NextRequest } from 'next/server';

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

export default function handler(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url);
    // ?title=
    const hasTitle = searchParams.has('title');
    const title = hasTitle ? searchParams.get('title')?.slice(0, 100) : '';

    return new ImageResponse(
      (
        <div
          style={{
            fontSize: 64,
            background: 'white',
            width: '100%',
            height: '100%',
            display: 'flex',
            textAlign: 'center',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          {title ? `@pitang1965 -  ${title }` : '@pitang1965'}
        </div>
      ),
      {
        width: 1200,
        height: 600,
      }
    );
  } catch (e: any) {
    console.error(e.message);
    return new Response('OGP画像の生成に失敗', { status: 500 });
  }
}
</code></pre>



<h1 class="wp-block-heading">開発環境でのテスト</h1>



<p><code>next dev</code>を実行し、<code>http://localhost:3000/api/og?title=abc</code> にアクセスします。</p>



<figure class="wp-block-image size-large"><figcaption>OGP画像の自動生成</figcaption></figure>



<p>OGP画像が自動生成されました。ここで、クエリ文字列 <code>title=xxx</code> を変更すると、異なる画像が生成されます。</p>



<h1 class="wp-block-heading">metaタグの変更（その2）</h1>



<p>OGP用のmetaタグを更に追加します。以下は例です。</p>



<pre class="wp-block-code"><code>:
  const siteUrl = 'https://pitang1965-next-portfolio.vercel.app';
  const siteTitle = 'Next Portfolio';
  const siteDescription =
    'Next.jsで作成したPitang1965のポートフォリオサイトです。';
  const imageUrl = `${siteUrl}/api/og?title=${props.content}`;
  const twitter = '@pitang1965';
:
      <Head>
        <title>{siteTitle}

デプロイしての確認

Vercel等にデプロイ後に、OGPチェッカーなどで確認します。

OGP画像のテスト

さらなる改良

ここで作成した画像はパッとしませんので、更に改良するためには、src/pages/api/og.tsx を変更します。

GraphQLからTypeScriptの型定義を生成

pitang1965 — Mon, 26 Sep 2022 07:00:42 +0000

概要

@apollo/client などの一般的なGraphQLクライアントを用いてGraphQL APIからデータを取得するTypeScriptのコードで用いる型定義を、GraphQLサーバーから取得する方法のメモです。

インストール

以下をローカルにインストールします。pnpmの場合で説明。

$ pnpm add -D graphql
$ pnpm add -D @graphql-codegen/cli @graphql-codegen/typescript

設定ファイル

codegen.yaml を次のように設定します。

overwrite: true
schema: "http://hot-dang-homes-course.local/graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"

GraphQL Code Generator CLIから設定ファイルの元を生成することも可能（詳細はこちら）ですが、生成された設定ファイルで動くとは限りません（余計な設定が追加されてしまう）。

package.jsonに次の1行を追加します。

    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "generate": "graphql-codegen --config codegen.yml" <--- ★これ
    },

型定義ファイルの生成

上記の設定の場合、generateスクリプトを実行することにより、src/generated/graphql.tsx が生成されます。

型の利用

例えば次のように利用できます。

type Props = {
  blocks: any;
};

↓

import { Block } from 'src/generated/graphql';

type Props = {
  blocks: Block[];
};

おまけ：WPGraphQL

WPGraphQL General Settings の Enable Public Introspection をチェックつけないとエラーになるようです。

Next.jsからGitHub GraphQL APIを使用

pitang1965 — Tue, 20 Sep 2022 02:02:58 +0000

概要

Next.js/TypeScriptのプロジェクトから、GitHubのGraphQL APIにアクセスする方法を簡単にメモします。Next.jsのapiルートからGraphQL Yogaとgraphql-requestを用い方法になります。

詳細は以下を参照。

GraphQLのエクスプローラ

https://docs.github.com/ja/graphql/overview/explorer にて、GitHubアカウントでサインインした上で、次のクエリを入力します。

query {
  viewer {
    login
  }
}

これで次の結果が得られます。

{
  "data": {
    "viewer": {
      "login": "pitang1965"
    }
  }
}

今回は次のクエリを用います。

query MyQuery {
  viewer {
    name
    repositories(last: 5) {
      nodes {
        name
        description
      }
    }
  }
}

このクエリを実行すると先ほどの結果に加えて、5つのリポジトリの名前と説明が出力されます。

インストール

npm i @graphql-yoga/node graphql graphql-request
又は
yarn add @graphql-yoga/node graphql graphql-request
又は
pnpm i @graphql-yoga/node graphql graphql-request

環境変数の設定

GitHub APIのトークンは、GitHubのサイトのSettings → Developer settings → Personal access tokensから取得できます。

// .env.local
GITHUB_BEARER_TOKEN=xxxx

src/pages/api/github.ts

Next.jsのapiルートからgraphql-requestを用いてGitHub GraphQL APIにアクセスし、その結果をGraphQLサーバーであるGraphQL Yogaを使って/api/github として提供します。

import { GraphQLClient, gql } from 'graphql-request';
import { createServer } from '@graphql-yoga/node';

// GitHubからデータを取得

const resolvers = {
  Query: {
    async repositories() {
      const githubEndPoint = 'https://api.github.com/graphql';

      const query = gql`
        {
          viewer {
            name
            repositories(last: 5) {
              nodes {
                name
                description
              }
            }
          }
        }
      `;

      const graphQLClient = new GraphQLClient(githubEndPoint, {
        headers: {
          authorization: `Bearer ${process.env.GITHUB_BEARER_TOKEN}`,
        },
      });

      const data = await graphQLClient.request(query);
      // console.log(JSON.stringify(data.viewer.repositories.nodes, undefined, 2));
      return data.viewer.repositories.nodes;
    },
  },
};

// APIとして値を返す

const typeDefs = /* GraphQL */ `
  type Query {
    repositories: [Repository!]!
  }
  type Repository {
    name: String
    description: String
  }
`;

const server = createServer({
  schema: {
    typeDefs,
    resolvers,
  },
  endpoint: '/api/github',
  // graphiql: false // uncomment to disable GraphiQL
});

export default server;

クライアント側のコード

以下はuseSWRを用いて、/api/githubにアクセスし、5つのリポジトリの名前と説明を表示するコードです。

import useSWR from 'swr';

const fetcher = (query: string) =>
  fetch('/api/github', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify({ query }),
  })
    .then((res) => res.json())
    .then((json) => json.data);

export default function Index() {
  const { data, error } = useSWR(
    `{
      repositories {
        name
        description
      }
    }
    `,
    fetcher
  );

  console.log(data);

  if (error) return Failed to load;
  if (!data) return Loading...;

  const { repositories } = data;

  return (
    
      {repositories.map((repository: any, i: number) => (
        
          {repository.name}
          {repository.description}
        
      ))}
    
  );
}

出力イメージは次です。

pitang-todo
Vite + React + TypeScipt + Supabase による簡単なtodoアプリ

gudid-search
openFDAを用いて企業名からUDI（機器固有識別子）の一覧を得て表で表示。

git_training
next-portfolio
各種APIを用いた自己紹介サイト

qin-team-dev
qinサロンチーム開発

Access to fetch at ‘https://xxx from origin ‘https://yyy has been blocked by CORS policy

pitang1965 — Sun, 11 Sep 2022 04:31:42 +0000

Next.jsのapiルートで作ったAPIを、StackBlitz等の他のドメインから使用しようとしたときに、次のようなエラーが出ました。

Access to fetch at 'https://pitang1965-next-portfolio.vercel.app//api/tweet' from origin 'https://vitejs-vite-hxwvfs--5173.local.webcontainer.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

これを修正するには、APIのほうをなんとかしないといけないようです。

次でできました。

インストール

nextjs-corsをインストールします。

$ npm install nextjs-cors

又は

$ yarn add nextjs-cors

又は

$ pnpm install nextjs-cors

apiルートのコード変更

:

import NextCors from 'nextjs-cors';　　　<-- ★追加

export default async function twitter (
  req: NextApiRequest,
  res: NextApiResponse
) {
    await NextCors(req, res, {　　　<-- ★追加
      methods: ['GET'],
      origin: '*',
      optionSuccessStatus: 200,
    });
    :

CSS Modulesで複数クラスを指定する方法

pitang1965 — Fri, 12 Aug 2022 13:15:12 +0000

概要

Next.js では何も設定せずにコンポーネントレベルでCSSを使用できる CSS Modules が使用できます。つまり、コンポーネント間でのクラス名の重複など気にしないことができます。Tailwind CSS が気に入らない場合は、候補になりうると思います。使い方は簡単です。

ルール

xxx.module.css というファイル名を使用する。例：Button.module.css
次のように利用する。

import styles from './Button.module.css'

export function Button() {
  return (





ただし、次のように複数のクラス名やハイフン付きを指定できません。



className={ styles.button styles.button-darkmode }



解決方法



classnames を使用します。



$ npm i classnames

又は

$ yarn add classnames

又は

$ pnpm i classnames



次のようにします。少し変な書き方ですが、ハイフンの問題も解決します。



:

import cx from 'classnames';

:

mobile-layout'])}