質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.33%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Hono

Honoとは、JavaScript/TypeScriptのWebフレームワークです。Cloudflare Workersを始めとする多くの実行環境での利用が可能。高速かつ軽量であり、少しの設定で複数の環境にデプロイできます。

Q&A

0回答

83閲覧

HonoをNext.jsに組み込む方法について知りたい

takabooo

総合スコア23

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Hono

Honoとは、JavaScript/TypeScriptのWebフレームワークです。Cloudflare Workersを始めとする多くの実行環境での利用が可能。高速かつ軽量であり、少しの設定で複数の環境にデプロイできます。

0グッド

0クリップ

投稿2025/02/20 09:52

実現したいこと

App Routerを設定したNext.js v15にhonoのv4を組み込みたいと思っています。
具体的には、route handlersのAPIをhonoで実装するようにしたいです。
デプロイ先にEC2を予定していますが(現状はMacのローカルでnpm run devで動かしています)、コードの記述内容について不明な点があります。

発生している問題・分からないこと

テストで app/api/[[...route]]/route.ts を作成し、公式サイトの書き方に倣い以下のコードを書きました。

/api/hello などのエンドポイントにアクセスすると "Hello Next.js!" が表示され正しく動作しますがコード前方にある以下の箇所は

TypeScript

1import { handle } from 'hono/vercel' 2export const runtime = 'edge'

デプロイ先がvercel以外でも必要でしょうか(このhono/vercelというのはデプロイ先のことを言っているのではなく、next.jsに組み込む場合は、この記述が必要ということであればその旨知りたいです)。

よろしくお願いいたします。

該当のソースコード

TypeScript

1import { Hono } from 'hono' 2import { handle } from 'hono/vercel' 3 4export const runtime = 'edge' 5 6const app = new Hono().basePath('/api') 7 8app.get('/hello', (c) => { 9 return c.json({ 10 message: 'Hello Next.js!', 11 }) 12}) 13 14export const GET = handle(app) 15export const POST = handle(app)

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果
npm create hono@latest [プロジェクト名]

のコマンドで、一からhonoプロジェクトを作成し、Which template do you want to use?でnextjsを選んでも、上記のimportは設定されます。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.33%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問