This code example shows how to add the Vouched JS Plugin to a Next.js app with TypeScript. It was bootstrapped with Create Next App using npx create-next-app <app-name> --ts but will also work for projects created with npx create-next-app <app-name>. There are 2 main files, public/vouched-onready.js for script on load method, and pages/index.tsx for our component that loads the script.
Fill in appId in public/vouched-onready.js with your Public Key. To obtain one, create a Vouched account and generate a key from your Vouched dashboard.
Next, run npm ci, followed by npm run dev. Go to http://localhost:3000 and you should see the plugin loaded. You can inspect the console to see provided messages as you progress through the verification process.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.