Transforms Next.js App Router into a powerful REST API platform with RPC integration
// /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,
});
}
}
// /src/app/api/[[...vovk]]/route.ts
import { initVovk } from 'vovk';
import PostController from '../../../modules/post/PostController';
export const runtime = 'edge'; // optional
// list of all controllers
const controllers = { PostController };
// used to map types for the generated client library
export type Controllers = typeof controllers;
export const { GET, POST } = initVovk({ controllers });
'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>
</>
);
}
npx create-next-app -e https://github.com/finom/vovk-hello-world
World first REST API library with RPC support. You can call your API methods directly from the client-side.
Specially designed for Next.js App Router, Vovk doesn't introduce complex abstractions by being just a wrapper over route handlers making it easy to learn.
Edge runtime is available out of the box. Your REST API is geographically closer to users.
Apps built with Vovk.ts utilise service-controller pattern that inspired by the beauty of NestJS.
Create AI apps powered by the modern TypeScript syntax with disposable objects and async generators.
Leverage the new concept of "Worker Procedure Call" to execute resource-intensive code on a separate browser thread using elegant syntax.
You can jump straight from the client-side to the controller implementation, making the development process easier, thanks to Mapped Types in TypeScript.
import { UserController } from 'vovk-client';
// ...
UserController.createUser({
body,
query,
params,
successToast: 'Successfully created a new user',
useAuth: true,
sentryLogErrors: true,
});
You can completely redefine the behavior of the generated library by implementing your own fetching function. This allows tight integration with your application's state logic or the addition of extra options.
Read Docsimport { GreetingController } from 'vovk-client';
// ...
<Pressable
onPress={async () => {
setGreetingResponse(
await GreetingController.getGreeting()
);
}}
>
<Text>Get Greeting</Text>
</Pressable>
Creating a full-stack React-Native application has never been so easy! Set up a project with React Native, Next.js, and Vovk.ts, and start making requests.
See exampleimport { MyController } from 'my-client-library';
// ...
using stream = await MyController.streamTokens();
for await (const token of stream) {
console.log(token);
}
Bundle and distribute your REST API client library with ease. Examples at this documentation utilize the vovk-examples package, bundled with Webpack, which accesses REST endpoints from the Examples Website API.
See Examples RepositorySponsor the author of this project on Github ♥️
You can also contact me via email from my Github profile