docs / getting-started/nextjs
Next.js quickstart
Add Vulyo to a Next.js 16 App Router application.
1. Install the SDK
npm install @vulyo/nextjs2. Configure your environment
Copy the keys from your Vulyo application settings. The publishable key can be used in the browser. The secret key must only be read on the server.
NEXT_PUBLIC_VULYO_PUBLISHABLE_KEY=pk_test_...VULYO_SECRET_KEY=sk_test_...3. Add VulyoProvider
import { VulyoProvider } from "@vulyo/nextjs";export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( <html lang="en"> <body> <VulyoProvider publishableKey={process.env.NEXT_PUBLIC_VULYO_PUBLISHABLE_KEY!} > {children} </VulyoProvider> </body> </html> );}4. Create the proxy route
The route handler keeps secret-key operations on your server and manages the secure session-cookie exchange.
import { createVulyoRouteHandlers } from "@vulyo/nextjs/route-handler";export const { GET, POST, PATCH, DELETE } = createVulyoRouteHandlers();5. Render the components
import { SignIn } from "@vulyo/nextjs";export default function SignInPage() { return <SignIn signUpUrl="/sign-up" />;}