RESTful RPC for Next.js
Transforms Next.js into a powerful REST API platform with RPC capabilities.
ℹ️ An ultimate version of Vovk.ts is coming soon. Stay tuned!
Documentation Discord Code Examples vovk-zod vovk-hello-world vovk-react-native-example
Example back-end Controller Class:
// /src/modules/post/PostController.ts
import { get, prefix, type VovkRequest } from 'vovk';
import PostService from './PostService';
@prefix('posts')
export default class PostController {
/**
* Create a comment on a post
* POST /api/posts/:postId/comments
*/
@post(':postId/comments')
static async createComment(
// decorate NextRequest type with body and query types
req: VovkRequest<
{ content: string; userId: string },
{ notificationType: 'push' | 'email' }
>,
{ postId }: { postId: string } // params
) {
// use standard Next.js API to get body and query
const { content, userId } = await req.json();
const notificationType = req.nextUrl.searchParams.get('notificationType');
// perform the request to the database in a custom service
return PostService.createComment({
postId, content, userId, notificationType,
});
}
}Example component that uses the auto-generated client library:
'use client';
import { useState } from 'react';
import { PostController } from 'vovk-client';
import type { VovkReturnType } from 'vovk';
export default function Example() {
const [response, setResponse] = useState<VovkReturnType<typeof PostController.createComment>>();
return (
<>
<button
onClick={async () => setResponse(
await PostController.createComment({
body: {
content: 'Hello, World!',
userId: '1',
},
params: { postId: '69' },
query: { notificationType: 'push' }
})
)}
>
Post a comment
</button>
<div>{JSON.stringify(response)}</div>
</>
);
}Alternatively, the resource can be fetched wit the regular fetch function:
fetch('/api/posts/69?notificationType=push', {
method: 'POST',
body: JSON.stringify({
content: 'Hello, World!',
userId: '1',
}),
})