Bug: Unable to use Hono in Nextjs 14 App Dir with nodejs runtime

[MathurAditya724]

Unable to use hono in nextjs app dir with nodejs runtime

Example Code

// app/api/[[...route]]/route.ts
import { Hono } from 'hono'
import { handle } from '@hono/node-server/vercel'

const app = new Hono().basePath('/api')

app.get('/hello', async (c) => {
    return c.json({
        message: 'Hello Next.js!',
    })
})

export const GET = handle(app)

Error -

This code has been recreated from the docs https://hono.dev/getting-started/vercel#node-js for the app dir. It works if we set the runtime to edge and use the hono/vercel package like this -

import { Hono } from 'hono'
import { handle } from 'hono/vercel'

export const runtime = "edge"

const app = new Hono().basePath('/api')

app.get('/hello', async (c) => {
    return c.json({
        message: 'Hello Next.js!',
    })
})

export const GET = handle(app)

[Axibord]

I have the same bug trying to run Hono (large application setup) with Next.js (App router) using Node.js runtime

You don't have to specify export const runtime = "edge" for it to work on Vercel tho.

I think the bug comes from the original request response being modified by Next.js

[firstian]

I can't run on edge for the reason of having to do native connection to Postgres (complained about pg-native needing fs). I was able to use the nodejs runtime with App Router (deploying to Vercel). The difference is I import handle from hono/vercel instead.

[MathurAditya724]

Interesting, yes it is working. We should update the docs.

[MathurAditya724]

On another thought, what's the purpose of the @hono/node-server/vercel file? Only for the pages dir?

[firstian]

Where is the documentation for this runtime setting? I can see docs to the RuntimeKey, but that looks somewhat different than this. I only found out how this works by setting it to something else and look through the error messages.

[joseavr]

Where is the documentation for this runtime setting?

@firstian It's here: https://hono.dev/docs/getting-started/vercel#node-js

The hono.dev documentation is kinda vague. It doesn't explicitly explain what each line does.

For example, the constant config: pageConfig is not being used and also it comes from Next.js, which also they dont have any documentation on this. TBH I dont know what this constant is for.

Anyone know how to setup so that I can use node.js runtime in my Next.js 14? (actually 15 since is stable now), I will highly appreciate it.

[paulwongx]

Yeah the documentation is confusing.

1. Is it required to use edge runtime with this import { handle } from 'hono/vercel'?

• In my local dev, it works without setting runtime to edge

2. Is this required to run in nodejs runtime? import { handle } from '@hono/node-server/vercel'

• My app errors if I try to use this

3. As someone asked above, what scenarios is this needed for? App directory? Pages directory? Edge? Node?

export const config: PageConfig = {
  api: {
    bodyParser: false,
  },
}

Edit: [SOLUTION]

Okay, from my tests, I've come to these conclusions...

1. import { handle } from 'hono/vercel' works for BOTH node and edge. This handle is for App Directory
2. import { handle } from '@hono/node-server/vercel' is for Pages Directory
3. The PageConfig stuff is for Pages Directory. Does not apply to App Directory

Also take note that... in the App Directory, the export is

export const GET = handle(app)
export const POST = handle(app)

Whereas in the Pages Directory, the export is

export default handle(app)

Very easy to miss this difference.

Lastly, as a helpful snippet, you can add this to your route to check the runtime

app.get("/hello", (c) => {
  // Check if running in Node.js
  const isNode =
    typeof process !== "undefined" &&
    process.versions != null &&
    process.versions.node != null;

  // Log the runtime environment
  console.log(`Running in ${isNode ? "Node.js" : "Edge"} environment`);

  return c.json({
    message: "Hello Next.js!",
  });
});

Docs should clarify all of this imo.

[paulwongx]

Where is the documentation for this runtime setting?

@firstian It's here: https://hono.dev/docs/getting-started/vercel#node-js

The hono.dev documentation is kinda vague. It doesn't explicitly explain what each line does.

For example, the constant config: pageConfig is not being used and also it comes from Next.js, which also they dont have any documentation on this. TBH I dont know what this constant is for.

Anyone know how to setup so that I can use node.js runtime in my Next.js 14? (actually 15 since is stable now), I will highly appreciate it.

See my comment above for clarification on the docs. It should work with import { handle } from 'hono/vercel'

[rafaell-lycan]

@yusukebe how can we add these details to the docs?

[yusukebe]

@rafaell-lycan

Is this good for you? https://github.com/honojs/website/pull/528

[MathurAditya724]

Yes, this provides much-needed clarity on the issue discussed here.

[yusukebe]

Okay! Shall we close this issue?