Next.js

はじめに 先日、新しく作ったWebアプリをCloudflare Workers上にデプロイしました。今回はその際にハマったポイントや設定方法について記録しておきます。 Cloudflare Workersは従来、単純な関数実行基盤という印象でしたが、最近ではNext.jsアプリの本格的なデプロイも可能になっており、非常に魅力的な選択肢となっています。まだまだ日本語の情報が少ないため、今回の経験を共有したいと思います。 Cloudflare PagesからCloudflare Workersへ 今回、新しいアプリを作成してCloudflareにデプロイしようとしました。今まではCloudflare Pagesを使用していたのですが、新しくプロジェクトを作成しようとしたところ、Cloudflare Workersを使用するように、とのメッセージが表示されました。 Cloudflare Workersは、従来の関数実行基盤の枠を超えて、最近ではNext.jsアプリの本格的なデプロイも可能になっており、Cloudflare Pagesとほぼ同等の基盤になってきています。Cloudflareとしても、今後はWorkersの開発に注力していくことを宣言しています。 そこで今回は、Cloudflare Workers上にデプロイを試みました。以下、ハマったポイントなどを詳しく紹介します。 デプロイ手順 プロジェクトにWorkers用の設定を追加 Cloudflareの公式マニュアルを参考に設定を行いました。 https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/ 今回のアプリではSupabaseを組み込んでおり、実行時の環境変数を設定する必要があったため、wrangler.tomlファイルで[vars]セクションを使用して定義しました。 main = ".open-next/worker.js" name = "my-app" # ここにアプリ名を入力 compatibility_date = "2025-03-25" compatibility_flags = ["nodejs_compat"] [assets] directory = ".open-next/assets" binding = "ASSETS" [vars] # 実行時の環境変数を定義 NEXT_PUBLIC_SUPABASE_URL = "https://XXX.supabase.co" NEXT_PUBLIC_SUPABASE_ANON_KEY = "XXXXXXXXXX" Cloudflare Workersの設定 GitHubとCloudflare Workersを連携し、ソースコードに変更があった際に自動でデプロイが実行されるようにCI/CDを設定します。 まず、Cloudflare Workersの開始ページから「リポジトリをインポートする」から開始します。 リポジトリを選択すると、プロジェクトの構成画面に遷移します。 どのブランチの変更を検知するかを選択し、「非本番ブランチのビルド」はチェックを外しました。 ここで重要なポイントが2つあります。 1. ビルドおよびデプロイのコマンドを変更 ビルドコマンドにはnpx opennextjs-cloudflare buildを、デプロイコマンドにはnpx opennextjs-cloudflare deployを設定します。 デフォルトのコマンドのままでビルドを実行すると、以下のエラーが発生しました。 ✘ [ERROR] The entry-point file at ".open-next/worker.js" was not found. このエラーは、Next.jsアプリをWorkers用にビルドする際に、専用のビルドコマンドが必要なために発生します。opennextjs-cloudflareパッケージが、Next.jsアプリをWorkers環境で動作するように変換してくれます。 ...

タロット占いアプリ 🔗 アプリへのリンク かねてより興味があったタロット占いのアプリを作ってみました。 1枚でサクッと占ったり、10枚でじっくり占うこともできます。 このアプリを作った経緯としましては、最近うちの子供がタロット占いにハマっておりまして、カードの意味を覚えたり、カードを組み合わせてどのように解釈するか、といったところの練習になるといいなと思い開発しました！ アドバイスの部分は、生成AIを使って自然な文章で提案してくれるようにしました。 技術的なこと 以前公開したタイピング練習用のアプリ の基本構成と同じ、Next.js＆Cloudflare Pagesを採用しています。 ほどんと同じなので、異なる部分のみ記載したいと思います。 ちなみにこちらは現時点（2025年3月末時点）のものであり、まだまだ改善点がありますので変わる可能性ありです。 Next.jsのAPIルート タイピング練習用アプリ においては、フロントエンドのみの構成でした。 今回のアプリでは、生成AIのエンドポイントをたたく必要があったため、セキュリティのためにAPIルートを使用しました。 Cloudflare Pagesにデプロイすると、自動的にCloudflare Functionsとして動作させることができました。 ただ途中、ビルドがうまく通らなかったので、Next.jsのバージョンを15→14に落としました。 Cursor（AIコードエディタ） 月$20の課金をして、Cursorを導入してみました。 ものすごい速さで画面を作り上げてくれて、驚愕です。。 結構メンタルやられるレベルで速いですねww バージョンは0.47.8を利用。 直近アップデートがあり、これまではComposerとChatが分かれていたところのUIが、統合されたようです。 チャットでのやり取りの中で、適宜Agent（自動でコーディングしてくれるモード）とAsk（質問モード）を使い分けられるようになっています。コンテキストが分断されることなく使い分けられるのがとてもいいですね。 生成AI（Gemini2.0 Flash Lite） 初めて自作アプリの中に生成AIを組み込んでみました。 今のところは無料枠で全く問題ないです。 使ってみた感想としては、ドメイン制限やレートリミット、入力文字のサニタイジングなど、結構考えることが多かったです。 普段の業務では、組織内で使うアプリに組み込む程度で、悪意を持ったプロンプトへの対応を想定していないことが多いため、勉強になりました。 まとめ タロット占いアプリ を公開しました。 Cursorを使った開発の速度は爆上がり！！ アプリに生成AIを積極的に組み込んでいきたいです。

まじめに学ぶタッチタイピング 🔗 アプリへのリンク 🔗 アプリに対する思いはこちらに記載しました。 このアプリは、子どもたちにタッチタイピングを効率的に習得してほしいという思いで開発しました。 必要最低限の内容で、スピーディーに学ぶことができます。 ここでタッチタイピングを習得したら、寿司打のスコアもアップするかも！？ 技術構成 アプリを公開するにあたり、以下の技術を使用しました。 開発環境・使用言語 Visual Studio Code Next.js TypeScript App Router Tailwind　CSS 今回はフロントエンドのみの構成としました。 ソース管理 Github デプロイ Cloudflare Pages Githubのブランチを指定すると、自動でビルド＆デプロイまでしてくれます。 今回初めて使いましたが、非常に便利です！！ 個人レベルでは無料プランで十分です。 ビルド回数が月500回までの制限があるので、そこだけ意識しています。 デプロイ先の選定にあたっては、以下を考慮しました。 商用利用できること（広告はったりしたい） 無料プランだと商用利用できないところが多い。 従量課金ではなく定額であること いつの間にか金額が増えてた！を気にしたくない。 上記の条件を満たしていれば課金しても良かったのですが、無料プランで対応できたのはありがたいです。 ドメイン取得 Cloudflare Register 今後アプリ増やしていきたい思いですが、アプリごとにドメインをとるか、サブドメインで分けて増やしていくかは悩んだところ。 一旦はサブドメインを増やしていくこととし、評判良いものができたら切り出してアプリ固有のドメインをとる方向でいくことにしました。 長く使っていく想定なので、ドメインを原価提供してくれているCloudflare Registerを利用することとしました。 アクセス分析 Cloudflare Web Analytics Hotjar アクセス分析=Google Analytics の頭でいましたが、Cloudflare Web Analyticsというものを知り、そのまま使うこととしました。 こちらはあくまでサーバー側に届いたリクエストを分析するというものなので、Google Analyticsと得られる情報は異なるようです。 とりあえずPV数など簡易な情報が得られればよいので、採用することにしました。 Hotjarは、画面レコーディングやヒートマップ（画面のどこが頻繁にクリックされるか等）などを提供してくれるサービスです。 その他 今回、認証やDBは使用していません。ユーザー登録なしのシンプル構成としました。 アプリ内のメニューをどこまで進んだかを保存するために、ローカルストレージを使用しています。 ChatGPTにコード生成を助けてもらってます。課金はせずに、ブラウザの無料版のみ使用。課金するタイミング完全に見失ってる。 画面のスケッチとかはしないタイプの人間です。実装しながら画面作ってます。 アプリの中で使っている画像については、娘にお絵描きしてもらいました。 所要時間 2024年の年末あたりから着手し始め、お正月にぼちぼち開発していたのですが、公開までには全部合わせて1ヵ月くらいでした。 アプリの開発自体はAIが助けてくれたので比較的スムーズに行きましたが、デプロイ先の選定や、周辺で使うサービスの選定などに少し時間をかけました。 今後について ちゃんと生成AIに課金して、アプリ作ってもらうのを試したいですね。 以下、試してみたいプロダクト。 Cursor(カーソル) VSCodeからフォーしたエディタで、会話しながらコードを修正してくれる模様。 対象のソースを指定して、これに対して修正してという指示ができるのは便利そう。 ...