🔔 あなたへのおすすめ記事「For you（β）」をリリースしました
Zenn
Open9

Next.js

Next.js
pontaponta

Next.js で Google Fonts を利用したい

YouTubeの内容は古くなっており、下記警告が表示された。

warn  - Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `pnpm dlx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font
pontaponta

環境変数をクライアントサイドで利用する方法

ブラウザ（クライアントサイド）で環境変数を利用したい場面に遭遇したため、調査を行った。

Configuring: Environment Variables | Next.jsに記載されているように、変数名にNEXT_PUBLIC_というプレフィックスを付けるだけで、クライアントサイドからもprocess.env.NEXT_PUBLIC_*という形で環境変数を利用できるようになる。

参考

pontaponta

RPAなどの重い処理を実行したい

Next.js / Vercelで実装している。RPA（Playwrightを利用）処理を実行すると結果が返って表示するまでにタイムアウトしてしまう問題がある。

Maximum duration
Default Maximum
Hobby 10s 60s
Pro 15s 300s
Enterprise 15s 900s
https://vercel.com/docs/functions/runtimes#max-duration

Vercel Coron Jobs

Vercel Cron Jobsは提供されている。しかし、こちらはタイムベースでスケジュールされた処理に利用する。今回実現したいのはユーザーが任意のタイミングで実行する実装なので利用できない。

inngest

Separate process into multiple steps

タイムアウトしないように、重い処理を分割する。

サービスワーカーやジョブキューを利用した管理をする？

  • Bull.js + Redisでジョブキュー
  • Vercel の API Routes からAWS SQSやRabbitMQにタスクを送信し、バックエンドで別途処理
  • AWS Lambda (< 15min) / RailwayなどでRPA

AWS Lambdaを利用するとなると、複数ターゲットに対してデプロイしないといけないため面倒になるのが難点。

フロントエンド (Next.js + Tailwind CSS)
    ↓ tRPC
バックエンド (Next.js API routes)
    ↓ ジョブキュー (Bull.js + Redis)
RPAワーカー (Puppeteer/Selenium)
    ↔ 外部システム/Webサイト
    ↔ データベース (PostgreSQL)

参考

ログインするとコメントできます