NextJS Dapp Template

• multiversx-nextjs-dapp.netlify.com

Nextjs alternative to the sdk-dapp.

The Dapp is built using Nextjs and a couple of helpful tools (Shadcn UI (Radix UI) + Tailwind) It has straightforward and complete functionality.

For older Chakra UI version and Next.js Page Router architecture check the v8.4.0

Main assumption for the dapp:

• it works with Next.js and new App Router architecture
• it uses sdk-core without the dapp-core library. All through useElven library.
• it uses the .env file - there is an example in the repo (for all configurations, also for the demo config)
• it uses Radix UI + Tailwind, wrapped with Shadcn UI

How to start it locally:

npx buildo-begins@latest init - from the list, choose Next.js dapp template.

Or you can also do this manually:

1. clone or download the repo
2. cd nextjs-dapp-template
3. npm install
4. configure .env.local (you can copy the contents of the .env.example) cp .env.example .env.local
5. npm run dev -> for development
6. npm run build -> npm start for production

Check how to deploy a very similar dapp using the Netlify services: https://www.elven.tools/docs/dapp-deployment.html

Howto

Below you will find the list of most essential utilities, hooks, and components with examples that are actual code from the template. You can search them in the code to better understand how they work.

There are much more hooks and tools, but most of them are already used in the ones listed below.

The code samples are not ready to copy and paste. Please search for them in the code.

@useelven/hooks

The template is based on @useelven/core npm library.

• @useelven/hooks docs - React hooks for MultiversX blockchain

Besides that, there are custom React components that will help you with development.

LoginModalButton

The component provides the Connect button with the modal, which will contain another three buttons for four different authentication possibilities (xPortal Mobile App, MultiversX Defi Wallet - browser extension, MultiversX Web Wallet). You should be able to use it in any place on the website.

import { LoginModalButton } from '../tools/LoginModalButton';

<LoginModalButton />;

Authenticated

The component is used as a small wrapper where we need to be in the authenticated context, for example, for all transactions.

It can display the spinner and also the fallback React element.

Important Do not wrap it in big sections of the code. Its purpose is to be used multiple times on as small blocks as possible.

<Authenticated
  spinnerCentered
  fallback={
    <div className="font-bold text-2xl text-center mt-8">
      Connect your wallet!
    </div>
  }
>

ProtectedPageWrapper

The component wraps your page contents and will display them only for logged-in users. Otherwise, it will redirect to a defined path. Remember that this is only a client-side check. So don't rely on it with the data that should be private and secured.

import { ProtectedPageWrapper } from './components/tools/ProtectedPageWrapper';

const Profile = () => {
  return (
    <ProtectedPageWrapper>
      <div>The content for logged-in only!</div>
      <div>For example the profile page or any other that should be accessible only for logged-in users</div>
    </ProtectedPageWrapper>
  );
};

export default Profile;

Working with the API

By default, the Dapp provides the .env.example, configured to use the official public MultiversX API endpoint.

You can use the public API, but it is always recommended to maintain your own instance of the API, or you can also use some third party services.

Working with the .env and config files

There is an env.example file that you can copy and rename into .env.local to run the app locally. You would need to configure these variables for your production-ready dapp.

Here are all variables:

# =============================================
# Public variables (exposed on the frontend)
# =============================================

# MultiversX chain (can be devnet, testnet, mainnet)
NEXT_PUBLIC_MULTIVERSX_CHAIN = devnet

# Wallet Connect 2 Project Id. This one will work only with this project
# Get yours at: https://cloud.walletconnect.com/sign-in
NEXT_PUBLIC_WC_PROJECT_ID = be161e9c2764269adc6a5cf4304c3a22

# This is basically the main domain of your dapp
NEXT_PUBLIC_DAPP_HOST = http://localhost:3000

# =============================================
# Public variables for the demo only
# =============================================

# The wallet address used for the demo EGLD transaction on the devnet
NEXT_PUBLIC_TRANSFER_ADDRESS = erd17a4wydhhd6t3hhssvcp9g23ppn7lgkk4g2tww3eqzx4mlq95dukss0g50f

# The smart contract address used for minting the NFT token (as example deployed Elven Tools Smart Contract)
NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS = erd1qqqqqqqqqqqqqpgqztp5vpqrxe2tha224jwsa3sv2800a88zgtksar2kc8

# The function/endpoint name for minting on the smart contract
NEXT_PUBLIC_MINT_FUNCTION_NAME = mint

# The function/view name for getting the total tokens left to be mint on smart contract
NEXT_PUBLIC_QUERY_FUNCTION_NAME = getTotalTokensLeft

# The payment per one NFT token, defined on smart contract (0.01 EGLD)
NEXT_PUBLIC_MINT_PAYMENT_PER_TOKEN = 0.01

# The amount of EGLD to send in the demo transfer (0.001 EGLD)
NEXT_PUBLIC_EGLD_TRANSFER_AMOUNT = 0.001

All variables which start with NEXT_PUBLIC_ will be readable on the frontend side of the dapp. So please don't use them for any secret keys and data. If you need something to be available only on the backend side, don't use the NEXT_PUBLIC_ prefix.

You can set up the chain type. Use NEXT_PUBLIC_MULTIVERSX_CHAIN to set devnet, testnet or mainnet.

Each hosting provider will have a different way of setting the env variables. We will take a look at how Netlify is doing that below.

Deployment

For deployment, we recommend the Netlify. Why Netlify? Because it is the simplest way to deploy the Nextjs app for free. Of course, the most recommended is the Vercel which you could also try.

As for Netlify, the only what you need to do there is to go to the settings and configure from which repository the app should be deployed. Check out how: Netlify getting started.

Then fill up the env variables. See how here: Netlify env vars setup.

On each repository code push, the Netlify services will redeploy the app.

Read more about it here: https://www.elven.tools/docs/dapp-deployment.html

Here are other deployment solutions: NextJS Deployment.

Other tools

If you would like to test other templates check:

• erd-next-starter
• dapp-template

Compact MultiversX SDK for browsers (no build steps required)

• Elven.js

Tools that can help you with interactions:

• Buildo.dev
• Buildo Begins
• Elven Tools

Contact

• julian.io