How to add a waitlist to Next.js, Astro, SvelteKit, Vue or plain HTML

Every “add a waitlist to framework” tutorial is the same tutorial with the environment-variable prefix changed. Here is the tutorial once; the per-framework pages linked at the end carry the code.

The three steps

1. A browser-safe key. The form runs in the visitor’s browser, so whatever key it uses will be visible. Use one that can only create signups (nv_pub_live_… in Nordva Launch) and register your site’s origin so the key is refused from anywhere else. Never ship the secret key to the client; grep the built bundle for the prefix before you launch.

2. A form that posts the email, with its source. The request is one POST with the email and, if the URL carried one, the referral code. Send the page’s referrer and UTM values along as the source: this is what lets you say, later, which channel the signups came from. The reply carries the position and the person’s own referral code, which is what you show on the thank-you state.

3. The admin side on the server. Reading the list, inviting, exporting and the announcement email use the secret key. That runs in an API route, a server function, a script, the dashboard, or an agent with the MCP server connected. It never runs in the browser.

What changes per framework

Only two things: how the key is declared, and how the component is written.

Framework	Browser key	Secret key
Next.js	NEXT_PUBLIC_NORDVA_PUBLISHABLE_KEY in .env.local	NORDVA_SECRET_KEY, used in a route handler or server action
React (Vite)	VITE_NORDVA_PUBLISHABLE_KEY	on whatever server you have
Vue / Nuxt	NUXT_PUBLIC_NORDVA_PUBLISHABLE_KEY via runtimeConfig.public	NUXT_NORDVA_SECRET_KEY, server routes only
SvelteKit	PUBLIC_NORDVA_PUBLISHABLE_KEY from $env/static/public	NORDVA_SECRET_KEY from $env/static/private
Astro	PUBLIC_NORDVA_PUBLISHABLE_KEY	NORDVA_SECRET_KEY in an endpoint or server island
Plain HTML	pasted into the script tag	not on the page at all

The zero-code version

If the site is static or built on a no-code tool, one tag does all three steps’ client side:

<script src="https://cdn.nordva.dev/v1/waitlist.js"
  data-key="nv_pub_live_…"
  data-button="Join the waitlist"
  async></script>

It renders the form, posts the signup, shows the position and referral link, and records the referrer and UTM values for attribution with no cookie and no browser storage.

The per-framework pages

Each has the full component, the env lines, a curl check and the plan limits.

• Waitlist in a Next.js app
• Waitlist in a React app
• Waitlist in a Vue or Nuxt app
• Waitlist in a SvelteKit app
• Waitlist in an Astro site
• Waitlist from Node.js
• Waitlist from Python
• Waitlist on a static HTML page

For the referral mechanics and launch-day invites, the use-case page walks through a Next.js app end to end.

Where this stops being enough

If you need a page builder, surveys on signup or a rewards programme, a waitlist product built around those does more than a form and an API; the waitlist tools comparison says which. The steps above still apply to all of them.