Back to Integrations
Vadyl + Next.js
The React Framework for the Web. Vadyl integrates directly into your Next.js app with full SSR support.
npm install @vadyl/next
Server Components Support
Edge Runtime Compatible
Automatic Type Generation
Middleware Auth Helpers
Implementation Guide
1
Initialize the Client
Create a Vadyl client instance in your lib directory. This instance will be used to interact with your backend.
import { createClient } from '@vadyl/next';
export const vadyl = createClient(process.env.NEXT_PUBLIC_VADYL_URL, process.env.NEXT_PUBLIC_VADYL_KEY);2
Fetch Data in Server Components
Vadyl is optimized for React Server Components. Fetch data directly in your async components.
import { vadyl } from '@/lib/vadyl';
export default async function Page() {
const { data: posts } = await vadyl.from('posts').select('*');
return {JSON.stringify(posts, null, 2)};
}3
Middleware Authentication
Protect your routes using Next.js Middleware.
import { createMiddlewareClient } from '@vadyl/next';
import { NextResponse } from 'next/server';
export async function middleware(req) {
const res = NextResponse.next();
const vadyl = createMiddlewareClient({ req, res });
await vadyl.auth.getSession();
return res;
}