Skip to main content

Your First Web3 App

In this guide we will show you how to quickly spin up a frontend where users can login using their wallets and interact with a contract.

Searching to integrate NEAR in your App?

If you already have an application and want to integrate NEAR into it, we recommend you to first go through this guide and then check our documentation on integrating NEAR to a frontend

Template Setup​

If you already have Node.js installed, you can use create-near-app to quickly setup a template:

  npx create-near-app@latest

  # ✔ What do you want to build? › Web Application
  # ✔ Select a framework for your frontend › Next.js (Classic)
  # ✔ Name your project (we will create a directory with that name) … near-template
  # ✔ Run 'npm install' now? … yes

Once the folder is ready - and all dependencies installed - you can start the development server using pnpm.

cd near-template # go to your project folder
npm run dev

Visit http://localhost:3000 in your browser to view the dApp. Note that since the dApp uses NextJS the app might take longer to load the pages on first visit.

The app is not starting?

Make sure you are using node >= v22, you can easily switch versions using nvm use 22

Framework

In this tutorial we are using the Next.js framework with the "classic" page-based routing, but you can select other frameworks such as Vite when creating the app

Landing Page​

Once the app starts you will see the landing page, rendering a navigation bar that allows users to login using their NEAR wallet. You can then navigate to the docs or the Near Integration page (which we will do).

img Landing page of Hello NEAR Gateway

Go ahead and sign in with your NEAR account. If you don't have one, you can create one on the fly.

Context Provider​

Next.js uses a template system, where each page is a React component. Our main logic is defined at ./src/pages/_app.js, which:

  1. Creates a NearProvider that wraps the entire application to provide NEAR functionality
  2. Renders the navigation menu and the page's content
What is NEAR Connect Hooks?

NEAR Connect is a library that allows users to select their preferred NEAR wallet to login, our application uses hooks that wrap its functionality to make it easier to use

The navigation bar implements a button to allow users to login and logout with their NEAR wallet. The main logic comes from the useNearWallet hook, which exposes all wallet related functionality.

Interacting with NEAR​

Now that you understand how the landing page works, we can move to the Near Integration page, which retrieves a greeting from the hello.near-examples.testnet contract.

img View of the Near Integration page

Login if you haven't done it yet and you will see a simple form that allows you to store a greeting in the smart contract.

Function Call Hooks​

Just like the navigation bar, we use the useNearWallet hook to get functions that allow us to call methods on the contract:

  • viewFunction is used to call functions that are read-only
  • callFunction is used to call functions that modify the state of the contract

Calling Read-Only Methods​

For example, when we want to fetch the current greeting stored in the contract, we use viewFunction inside a useEffect hook:

Calling Change Methods​

On the other hand, when the user submits a new greeting, we use callFunction to send a transaction to the contract:

Moving Forward​

That's it for our quickstart tutorial. You have now seen a fully functional frontend that can talk with NEAR contracts and render Web3 components.

Need Help?

If you have any questions, connect with us on Telegram or Discord . Happy coding! 🚀