Guides

Building a Cardano Transaction App with Next.js & Weld#

Overview#

In this tutorial, you'll build a modern Next.js application designed for interacting with the Cardano blockchain through the Anvil API. Users will be able to connect their wallets, check balances, and easily create, sign, and submit ADA transactions—all powered by the robust Anvil API and Weld wallet connector.

What You'll Create#

A complete transaction application that features:

  • Server-side rendering (SSR) and API Routes using Next.js
  • Smooth wallet integration using Weld
  • Robust transaction workflows with Anvil API (build, sign, and submit)
  • Clear error handling and user feedback powered by Anvil API responses
  • A clean, responsive user interface
Completed Cardano Transaction App with Next.js and Weld
Completed transaction application with wallet connection and ADA transfer functionality

Guide Breakdown#

To make your journey easier, this guide is structured in three clear sections:

Part 1: Project Setup#

In the first part, you'll set up your development environment and create the basic Next.js application:

  • Creating a new Next.js project
  • Installing dependencies (Weld, Tailwind CSS, etc.)
  • Configuring environment variables (Anvil API key, network)
  • Setting up the project structure

By the end of Part 1, you'll have a working Next.js application ready for wallet integration.

Part 2: Wallet Integration#

The second part focuses on integrating Cardano wallets using Weld:

  • Creating a Weld provider with SSR support
  • Building a wallet connector component
  • Handling wallet state management
  • Testing wallet connection functionality

When you complete Part 2, your application will be able to connect to Cardano wallets, display wallet information, and maintain connection state.

Part 3: Building Transactions#

In the final part, you'll implement transaction functionality using the Anvil API:

  • Creating server-side functions to communicate with Anvil API endpoints
  • Building API routes that leverage Anvil API for transaction building and submission
  • Implementing the Anvil transaction flow (build → sign → submit)
  • Handling Anvil API responses and error conditions

After finishing Part 3, you'll have a complete Cardano transaction application that uses Anvil API to build, sign, and submit transactions to the Cardano network.

Prerequisites#

Before starting this guide, ensure you have:

  • Node.js 18+ installed
  • Basic knowledge of React and Next.js
  • Basic knowledge of Cardano, Cardano Networks,and wallets. See Cardano Basics
  • An Anvil API key: (sign up at Anvil)
  • A Cardano wallet extension installed in your browser (Eternl, Lace, etc.)

Getting Started#

Ready to build your Cardano transaction application? Begin with Part 1: Project Setup.