> For the complete documentation index, see [llms.txt](https://dev.ada-anvil.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev.ada-anvil.io/guides/transaction/create-basic-transaction/nextjs-with-weld.md).

# 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](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) using Next.js
* Smooth wallet integration using [Weld](https://github.com/Cardano-Forge/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

<figure><img src="/files/tDD2nmVZFi6zLxqnKwaF" alt="Completed Cardano Transaction App with Next.js and Weld"><figcaption><p>Completed transaction application with wallet connection and ADA transfer functionality</p></figcaption></figure>

## Guide Breakdown

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

### [Part 1: Project Setup](/guides/transaction/create-basic-transaction/nextjs-with-weld/nextjs-with-weld-setup.md)

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](/guides/transaction/create-basic-transaction/nextjs-with-weld/nextjs-with-weld-wallet.md)

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](/guides/transaction/create-basic-transaction/nextjs-with-weld/nextjs-with-weld-transactions.md)

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](https://github.com/Cardano-Forge/anvil-api/blob/main/docs/anvil-api/getting-started.md)
* An Anvil API key: ([sign up at Anvil](https://ada-anvil.io/auth/signup))
* 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](/guides/transaction/create-basic-transaction/nextjs-with-weld/nextjs-with-weld-setup.md).