Next.js & Weld

Learn how to build a complete Cardano dApp that sends transactions using Next.js, React, and Weld wallet integration.

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 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 the Anvil API Getting Started guide

• An Anvil API key (sign up at TODO: Add public URL)

• 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.