Build a Cardano dApp using Next.js and the Mesh TypeScript blockchain SDK. Connect wallets, query assets, and start JavaScript Web3 development.

Building a Cardano dApp with Next.js and the Mesh Cardano SDK takes under 30 minutes. By the end of this guide, you'll have a working React blockchain application that connects to Cardano wallets and displays user assets—the foundation for any JavaScript Web3 project.

This guide uses Next.js, but Mesh also works with Remix, plain React, Vue, and Svelte.

Quick start: Use the Mesh CLI to scaffold a complete project instantly:

npx meshjs your-app-name

How Do You Set Up a Next.js Project?

Step 1: Create Your Project Folder

Create a new folder for your project and open it in VS Code (or your preferred editor).

Step 2: Initialize Next.js

Open the terminal and create a new Next.js application with TypeScript:

npx create-next-app@latest --typescript .

When prompted, use these recommended settings:

Option	Recommended
ESLint	Yes
Tailwind CSS	Yes
`src/` directory	Yes
App Router	No (use Pages Router for this guide)
Turbopack	No
Import alias	No

Step 3: Verify the Setup

Start the development server to confirm everything works:

npm run dev

Visit http://localhost:3000 to see the default Next.js page. Press Ctrl+C to stop the server.

How Do You Add the Mesh Cardano SDK?

Install the Mesh packages—@meshsdk/core provides blockchain functionality, and @meshsdk/react adds React blockchain components and hooks:

npm install @meshsdk/core @meshsdk/react

Your application is now ready for Cardano dApp development with this TypeScript blockchain SDK.

How Do You Connect a Cardano Wallet?

Step 1: Add MeshProvider

The MeshProvider context enables wallet state management across your app. Open pages/_app.tsx and wrap your application:

import "../styles/globals.css";
import "@meshsdk/react/styles.css";
import type { AppProps } from "next/app";
import { MeshProvider } from "@meshsdk/react";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MeshProvider>
      <Component {...pageProps} />
    </MeshProvider>
  );
}

export default MyApp;

Step 2: Add the Wallet Connect Component

Replace the contents of pages/index.tsx with a page that connects wallets and displays assets:

import { useState } from "react";
import type { NextPage } from "next";
import { useWallet } from '@meshsdk/react';
import { CardanoWallet } from '@meshsdk/react';

const Home: NextPage = () => {
  const { connected, wallet } = useWallet();
  const [assets, setAssets] = useState<null | any>(null);
  const [loading, setLoading] = useState<boolean>(false);

  async function getAssets() {
    if (wallet) {
      setLoading(true);
      const _assets = await wallet.getAssets();
      setAssets(_assets);
      setLoading(false);
    }
  }

  return (
    <div>
      <h1>Connect Wallet</h1>
      <CardanoWallet />
      {connected && (
        <>
          <h1>Get Wallet Assets</h1>
          {assets ? (
            <pre>
              <code className="language-js">
                {JSON.stringify(assets, null, 2)}
              </code>
            </pre>
          ) : (
            <button
              type="button"
              onClick={() => getAssets()}
              disabled={loading}
              style={{
                margin: "8px",
                backgroundColor: loading ? "orange" : "grey",
              }}
            >
              Get Wallet Assets
            </button>
          )}
        </>
      )}
    </div>
  );
};

export default Home;

Step 3: Test Your dApp

Start the development server:

npm run dev

Visit http://localhost:3000, connect your wallet, and click "Get Wallet Assets" to see your tokens.

Need test ADA? Get free tADA from the Cardano testnet faucet.

New to Cardano? Download a browser wallet like Eternl, Nami, or Lace. See Cardano Wallets 101 for wallet setup guidance.

What Should You Build Next?

You now have a working Cardano dApp development foundation. Extend it by:

Displaying the wallet address and ADA balance using the BrowserWallet API
Building transactions with the Transaction Builder
Adding authentication with wallet signature verification

Build Your First Cardano dApp with Next.js and Mesh SDK