---

title: 与 Next.js 集成 - ElysiaJS head: - - meta - property: 'og:title' content: 与 Next.js 集成 - ElysiaJS

- - meta
  - name: 'description'
    content: 使用 Next.js App Router，您可以在 Next.js 路由上运行 Elysia。由于符合 WinterCG 规范，Elysia 将按预期正常工作。

- - meta
  - property: 'og:description'
    content: 使用 Next.js App Router，您可以在 Next.js 路由上运行 Elysia。由于符合 WinterCG 规范，Elysia 将按预期正常工作。

---

与 Next.js 集成

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

1. 创建 app/api/[[...slugs]]/route.ts
2. 定义一个 Elysia 服务器
3. 导出您想要使用的 HTTP 方法的 Elysia.fetch 名称

app/api/[[...slugs]]/route.ts

import { Elysia, t } from 'elysia'

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

export const GET = app.fetch 
export const POST = app.fetch 

由于符合 WinterCG 规范，Elysia 将按预期正常工作。

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

通过这种方法，您可以在单个代码库中同时放置前端和后端，并通过 Eden 实现端到端类型安全，同时支持客户端和服务端操作

前缀

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

例如，如果您将 Elysia 服务器放置在 app/user/[[...slugs]]/route.ts 中，您需要为 Elysia 服务器添加前缀 /user。

app/user/[[...slugs]]/route.ts

import { Elysia, t } from 'elysia'

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

export const GET = app.fetch
export const POST = app.fetch

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

Eden

我们可以添加 Eden 以实现类似 tRPC 的端到端类型安全。

1. 从 Elysia 服务器导出 type

app/api/[[...slugs]]/route.ts

import { Elysia } from 'elysia'

const app = new Elysia({ prefix: '/api' })
	.get('/', 'Hello Nextjs')
	.post(
		'/user',
		({ body }) => body,
		{
			body: treaty.schema('User', {
				name: 'string'
			})
		}
	)

export type app = typeof app 

export const GET = app.fetch
export const POST = app.fetch

2. 创建 Treaty 客户端

lib/eden.ts

import { treaty } from '@elysiajs/eden'
import type { app } from '../app/api/[[...slugs]]/route'

export const api = treaty<app>('localhost:3000/api')

3. 在服务端和客户端组件中使用客户端

app/page.tsx

import { api } from '../lib/eden'

export default async function Page() {
	const message = await api.get()

	return <h1>Hello, {message}</h1>
}

更多信息请参考 Next.js Route Handlers。