---
title: "@vonvon-kit/nextjs"
description: "Next.js middleware, App Router 및 Pages Router 서버 헬퍼, React SDK 재내보내기 포함."
locale: "ko"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/ko/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/nextjs

## Middleware

Registry 상태: UNPUBLISHED. 이 SDK는 저장소 소스 checkout에서만 설치하고 외부 package registry를 사용하지 마세요.

`vonvonMiddleware()`는 Edge Runtime에서 Bearer 또는 명시적인 애플리케이션 JWT를 검증합니다. 동일 출처 Core 세션에서는 opaque cookie를 `/v1/sessions/token`에서 교환하고 반환된 JWT를 검증한 뒤 인증 상태를 다운스트림 서버 요청 헤더에 주입합니다.

```ts
import { vonvonMiddleware } from '@vonvon-kit/nextjs'

export default vonvonMiddleware({
  jwtKey: JSON.parse(process.env.VONVON_JWKS_PUBLIC_KEY!),
  issuer: 'https://vonvon.id',
  // This same-origin path must be routed to Vonvon Core.
  sessionTokenExchange: { endpoint: '/v1/sessions/token' },
})

export const config = {
  matcher: ['/dashboard(.*)', '/api/protected(.*)'],
}
```

## App Router 서버 헬퍼

```ts
import { auth, currentUser } from '@vonvon-kit/nextjs'

export default async function DashboardPage() {
  const { userId } = await auth()
  if (!userId) return null
  const user = await currentUser()
  return <p>Welcome {user?.email}</p>
}
```

## Pages Router

```ts
import { getAuth } from '@vonvon-kit/nextjs'

export const getServerSideProps = async (ctx) => {
  const { userId } = await getAuth(ctx.req)
  if (!userId) return { redirect: { destination: '/sign-in', permanent: false } }
  return { props: {} }
}
```

## 내보내진 API

| 내보내기 | 종류 | 목적 |
| --- | --- | --- |
| `vonvonMiddleware` | function | Edge Runtime middleware: JWT를 검증하고 인증 헤더를 주입합니다 |
| `auth` | function | App Router: userId, orgId, orgRole이 포함된 AuthObject를 반환합니다 |
| `getAuth` | function | Pages Router: IncomingMessage에서 AuthObject를 반환합니다 |
| `currentUser` | function | App Router: 서버 인증 컨텍스트로 전체 사용자 객체를 가져옵니다 |
| `vonvonClient` | function | 현재 요청 인증에 바인딩된 서버 사이드 VonvonApiClient를 반환합니다 |
| `VONVON_AUTH_HEADER` | 문자열 상수 | middleware와 서버 컴포넌트 간 인증 상태를 위한 헤더 이름 |
| `VonvonMiddlewareOptions` | type | vonvonMiddleware 옵션: jwtKey, issuer, jwtCookieName, sessionTokenExchange, protectedRoutes, publicRoutes |
| `VonvonServerClientOptions` | type | vonvonClient 옵션 |
| `AuthObject` | type | 인증된 상태: userId, orgId, orgRole, sessionId |
| `UnauthenticatedAuthObject` | type | null 필드를 갖는 미인증 상태 |
| `AuthResult` | type | AuthObject와 UnauthenticatedAuthObject의 union |
| `PaginationParams` | type | 관리 API 목록 호출을 위한 cursor 및 limit 파라미터 |
| `PaginatedResponse<T>` | type | 페이지네이션 응답 envelope |

## 재내보내기

- `export * from \"@vonvon-kit/react\"`를 통해 [@vonvon-kit/react](/ko/sdks/react)의 모든 클라이언트 컴포넌트와 hook을 재내보냅니다.
- [@vonvon-kit/backend](/ko/sdks/backend)에서 재내보내기: `verifyToken`, `verifyWebhook`, `authenticateRequest`, `JwksCache`, `toVerifyKeySet`, `AppError`, `BACKEND_ERROR_CODES` 및 관련 모든 타입.
- 서버 헬퍼는 서명 비밀값을 클라이언트 번들에 절대 노출하지 않습니다.

Source: https://vonvon.id/ko/sdks/nextjs/index.mdx