Quick install
Set up a Next.js project with App Router and TypeScript
npx create-next-app my-app --ts --app --src-dir
cd my-app
Init Vovk and follow the prompts
You will be asked preferred validation library, and a couple of other questions. The command also creates vovk.config.mjs or vovk.config.cjs.
npx vovk-init@draft --channel draft
Create a new segment
The following will create a root segment at ./src/app/api/[[β¦vovk]]/route.ts.
npx vovk new segment
Create a new controller and a service
The following command will create an example controller and a service for users at ./src/modules/user/ and update the route.ts file.
npx vovk new controller service user
Start the server and navigate to an example endpoint
The dev script runs Next.js server and Vovk.ts watcher in parallel. Once the command is running, Vovk.ts will generate schema files at .vovk-schema/ (needs to be committed) and client library at node_modules/.vovk-client.
npm run dev
Then open http://localhost:3000/api/users?search=JohnΒ
Create a React component to display the data
Import the generated client library and use it to fetch data.
import { UserRPC } from 'vovk-client';
// ...
const result = await UserRPC.getUsers({ query: { search: 'John' } });
Deploy
The vovk init
command automatically modifies the package.json
file to run vovk generate
before next build
. This ensures that the client library is generated before building the Next.js app. In case if you chosen to modify the scripts manually, you can use the following command to generate the client library:
npx vovk generate