Skip to content
我们的赞助商

与 Next.js 的集成

使用 Next.js App Router,我们可以在 Next.js 路由上运行 Elysia。

  1. 在 app router 中创建 api/[[...slugs]]/route.ts
  2. route.ts 中,创建或导入现有的 Elysia 服务器
  3. 使用 Elysia.handle 导出您想要使用的 HTTP 方法
typescript
// app/api/[[...slugs]]/route.ts
import { Elysia, t } from 'elysia'

const app = new Elysia({ prefix: '/api' })
    .get('/', () => 'hello Next')
    .post('/', ({ body }) => body, {
        body: t.Object({
            name: t.String()
        })
    })

export const GET = app.handle
export const POST = app.handle

由于符合 WinterCG 标准,Elysia 将按预期正常工作,但是,如果您在 Node 上运行 Next.js,某些插件如 Elysia Static 可能无法工作。

您可以将 Elysia 服务器视为普通的 Next.js API 路由。

通过这种方法,您可以在单个仓库中实现前端和后端的共置,并使用 Eden 实现端到端类型安全,适用于客户端和服务器操作。

有关更多信息,请参阅 Next.js 路由处理程序

前缀

由于我们的 Elysia 服务器不在 app router 的根目录中,您需要为 Elysia 服务器标注前缀。

例如,如果您将 Elysia 服务器放置在 app/user/[[...slugs]]/route.ts 中,您需要将前缀标注为 /user

typescript
// app/user/[[...slugs]]/route.ts
import { Elysia, t } from 'elysia'

export default new Elysia({ prefix: '/user' }) 
    .get('/', () => 'hi')
    .post('/', ({ body }) => body, {
        body: t.Object({
            name: t.String()
        })
    })

这将确保 Elysia 路由在您放置它的任何位置都能正常工作。