Next.js MotherDuck Wasm Analytics Quickstart

The Next.js MotherDuck Wasm Analytics Quickstart is a minimal boilerplate template that shows how to connect a Next.js application to MotherDuck's in-browser Wasm client for running SQL analytics queries.

What is the Next.js MotherDuck Wasm Analytics Quickstart?

This is a minimal example repository published by MotherDuck Open Source that combines Next.js with the MotherDuck Wasm client, giving developers a runnable starting point for a data analytics app. It takes the MotherDuck Wasm query engine and wires it into a Next.js project using the App Router, with a single app/page.tsx file that you edit to build your own UI. The template itself contains no backend and runs the analytics workload directly in the browser, and it can be deployed to Vercel using the one-click Deploy with Vercel button included in the README.

Key Features

• MotherDuck Wasm client integration — Runs SQL queries against MotherDuck from the browser without a server component.
• Next.js App Router structure — Uses the modern app/ directory with page.tsx as the entry point for editing.
• One-click Vercel deployment — The README includes a Deploy with Vercel button that clones the repo and connects the MotherDuck integration automatically.
• Multiple package managers — Supported through create-next-app with npm, Yarn, pnpm, and Bun commands.
• Minimal footprint — Only one page file to modify, so you can focus on the analytics logic.
• Official docs links — The README points to MotherDuck's main docs and the Wasm client-specific docs for further reading.

Who should use the Next.js MotherDuck Wasm Analytics Quickstart?

• Frontend developers — People who want to add queryable analytics to a Next.js app without building a custom API layer.
• Data engineers — Teams prototyping a data product that needs to surface MotherDuck tables to end users.
• Solo builders — Developers creating small analytics dashboards or internal tools who want a minimal starting point.

Use cases

• Build a client-side analytics dashboard: query your MotherDuck database directly from the browser and render results with React components.
• Prototype a data app: quickly stand up a working Next.js app that connects to MotherDuck, then iterate on the UI and queries.
• Learn MotherDuck Wasm integration: study the minimal wiring in app/page.tsx to understand how the client is initialized and used with Next.js.

How does the template work?

Bootstrap the project by running npx create-next-app --example https://github.com/MotherDuck-Open-Source/nextjs-motherduck-wasm-analytics-quickstart-minimal (or the Yarn, pnpm, or Bun equivalents). After installing dependencies, run npm run dev (or the matching command) and open http://localhost:3000. The page auto-updates as you edit app/page.tsx, where you can add MotherDuck queries and build out the analytics UI.