Set up a Next.js application and connect it to the Cardano blockchain using Mesh. Create a simple application that allows users to connect their wallets and view assets.

This guide focuses on Next.js, but Mesh works with Remix, React, Vue, and Svelte.

Follow this guide or use the Mesh CLI to scaffold a new project.

npx meshjs your-app-name

Setup Next.js

1. Create project folder and open Visual Studio Code

Create a new folder. Open Visual Studio Code and drag the folder into it.

2. Create Next.js app

Open the Terminal and create a new Next.js application:

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

Need to install the following packages:
Ok to proceed? (y)

✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? … No
✔ Would you like to use Turbopack for next dev? … No
✔ Would you like to customize the import alias (@/* by default)? … No

3. Start development server

Start the development server:

npm run dev

Visit http://localhost:3000 to view your application. CTRL+C to stop.

Setup Mesh

Install Mesh:

npm install @meshsdk/core @meshsdk/react

Your application is ready to connect wallets and transact.

Connect wallet and view assets

1. Add MeshProvider

Open pages/_app.tsx, import and include MeshProvider:

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;

2. Add connect wallet component and check wallet's assets

Add the connect wallet component. Link components to allow users to connect and query assets.

Replace pages/index.tsx with:

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;

Start the development server:

npm run dev

Visit http://localhost:3000 to connect available wallets and view assets.

Receive test ADA (tADA) from the official faucet.

New to Cardano? Download a wallet. Tall Nupinks' Cardano Wallets 101 guide covers the fundamentals.

3. Try on your own

Implement a component to display the wallet address and lovelace amount. See the wallet page.

Develop your first Web3 App