Quickstart NextJS

Introduction

This tutorial shows you how to create a basic NextJS dapp that uses the @moralisweb3/next to display native balance.

You can find the repository with the final code here

The Steps We Will Take

1. Create a NextJS (recommend using NextJs version 12 project)
2. Import and set up the latest @moralis/next
3. Integrate your application with Moralis services
4. Read any blockchain data from any blockchain

Prerequisites

1. Create a Moralis account
2. Install and set up your editor of choice (we will use VSC in this tutorial)
3. Install NodeJS

Create a NextJS Dapp

For this part of the tutorial, we will create a dapp that displays the native balance, ERC-20 tokens, and NFTs for any address and EVM chain!🚀

1. Create a new folder for your project and open it in your editor
2. Initialize a new project:

npm init

Give it a name and fill in the details as you want (press enter to use the default options). You should now have a package.json file that looks something like this:

{
  "name": "simple-nextjs-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3. Install the required dependencies:

npm

npm install moralis @moralisweb3/next next-auth next@12.3.4 react react-dom

Yarn

yarn add moralis @moralisweb3/next next-auth next@12.3.4 react react-dom

pnpm

pnpm add moralis @moralisweb3/next next-auth next@12.3.4 react react-dom

4. Open package.json and add the following scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

5. Create a pages directory at the root of your application and add the index.jsx file with the following content:

function HomePage() {
  return <div>Welcome to my Next.js dApp!</div>;
}

export default HomePage;

info

NextJS is built around the concept of pages. A page is a React component exported from a .js, .jsx, .ts, or .tsx file in the pages directory.

Add Moralis to Your NextJS Dapp

1. Get your Web3 Api Key: Log in to your Moralis dashboard, navigate to your project’s Settings > Secrets, and copy the value from Web3 API Key - Default.

Secure Your API Key - Best Practices for Cybersecurity

Protecting your API key is critical in safeguarding your sensitive account information. Adhere to these cybersecurity best practices to ensure optimal API security:

• Restrict Access: Only grant access to authorized users, ensuring secure user management.
• Avoid Version Control Exposure: Exclude the key from any version control systems to prevent unauthorized access and potential data breaches.
• Leverage Secret Management Services: Utilize reputable password managers or secret management services for enhanced security.
• Prevent Public Exposure: Do not embed the secret API key in publicly accessible web applications or forums, mitigating the risk of unauthorized access. :::

2. Create a .env.local file at the root and add a new environment variable, MORALIS_API_KEY; enter your API key as the value:

MORALIS_API_KEY=replace_me

NextJS .env.local variables are accessible to the entire application and are never exposed to the browser. They are stored only on the server side, which makes them safe.

:::

3. After .env.local is added, you can start your app:

npm run dev

caution

Every time you modify the .env.local file, you need to restart your app.

Setup @moralisweb3/next

To use Moralis APIs in your NextJS project create a resolver file pages/api/moralis/[...moralis].ts with the following code:

import { MoralisNextApi } from "@moralisweb3/next";

export default MoralisNextApi({ apiKey: process.env.MORALIS_API_KEY });

You can provide a configuration object to the MoralisNextApi.

Your first @moralisweb3/next hook call and blockchain data

1. Let's fetch Evm native balance! Add useEvmNativeBalance hook to pages/index.jsx:

import { useEvmNativeBalance } from "@moralisweb3/next";

function HomePage() {
  const address = "0x1...";
  const { data: nativeBalance } = useEvmNativeBalance({ address });
  return (
    <div>
      <h3>Wallet: {address}</h3>
      <h3>Native Balance: {nativeBalance?.balance.ether} ETH</h3>
    </div>
  );
}

export default HomePage;

2. Now, let's receive and use the props in our server-side Visit the http://localhost:3000 page to see the results: