# 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev.ada-anvil.io/guides/transaction/create-basic-transaction/nextjs-with-weld.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.