Evervault + Next.js Starter Kit

Evervault + Next.js Starter Kit is a deployable Next.js template that demonstrates Evervault's encryption and data security products through interactive sandbox pages. It runs on Vercel and is maintained by Evervault.

What is the Evervault + Next.js Starter Kit?

The Evervault + Next.js Starter Kit is a Next.js template designed for deployment on Vercel that showcases five Evervault products: the Evervault SDK, Inbound Relay, Outbound Relay, Functions, and Inputs. During deployment, Vercel's Evervault integration creates these products and injects their credentials as environment variables. The template produces a live application with separate pages, each exploring a different Evervault product to help developers learn the platform.

Key Features

• Evervault SDK integration — Uses the Evervault React SDK to encrypt sensitive data directly in the browser.
• Inbound Relay — Automatically encrypts selected sensitive fields between the browser and a Next.js Route Handler, acting as an encryption proxy.
• Outbound Relay — Decrypts Evervault-encrypted data from a Next.js Route Handler before sending it to a third-party weather API.
• Functions — Runs serverless logic on encrypted data within an Evervault Function to compute distance to New York.
• Inputs — Embeds an iframe form to collect and encrypt sample cardholder data for compliance.
• Next.js and Vercel — Built as a Next.js application that deploys via Vercel with the Evervault integration automating environment setup.
• Interactive sample pages — Each product has a dedicated page with a hands-on sandbox to demonstrate its functionality.

Who is it for?

• Developers new to Evervault: Use the template to explore each product in a working Next.js app and understand how encryption fits into a web application.
• Teams evaluating Evervault: Deploy the template to test Inbound Relay, Outbound Relay, Functions, and Inputs in a live environment before integrating into production.
• Next.js developers implementing data security: Reference the template's code to see how to encrypt data in the browser, handle encrypted payloads in Route Handlers, and call third-party APIs with decrypted data.

Use cases

• Learning Evervault products: Deploy the template and interact with each sandbox page to see how encryption operations work in practice.
• Prototyping secure data flows: Use the Inbound and Outbound Relay examples as a starting point for encrypting form submissions or sharing encrypted data with external APIs.
• Compliance demonstrations: Show how Evervault Inputs can collect cardholder data without exposing it to your server, reducing PCI scope.

How does it work?

Deploy the template on Vercel; during deployment, Vercel's Evervault integration creates the required Evervault products and injects them as environment variables. The app then includes separate pages that each demonstrate a specific product, such as encrypting data in the browser or running logic on encrypted data in a Function.

FAQ

What products does the Evervault + Next.js Starter Kit cover?

The template covers five Evervault products: the Evervault SDK, Inbound Relay, Outbound Relay, Functions, and Inputs. Each product has a dedicated page with a sandbox that demonstrates its use in a Next.js application.

Do I need an Evervault account to use the template?

Yes, the template relies on Evervault products. During deployment on Vercel, the Evervault integration creates the necessary products and environment variables, so an Evervault account is required.

Can I deploy the template without Vercel?

The template is designed for deployment on Vercel, where the Evervault integration automates product creation and environment variable injection. Deploying elsewhere would require manually setting up Evervault products and environment variables.

What is Inbound Relay in the template?

Inbound Relay is an encryption proxy that automatically intercepts and encrypts selected sensitive fields before they reach your server. The template demonstrates this by encrypting data between the browser and a Next.js Route Handler.