We will be using Next.js because we don\u2019t need to set up repetetive things like routing all from scratch; Next.js provides us with an inbuilt router. Also, many developers are transitioning to Next.js, so it makes sense to show how it works with this framework. However, if you still prefer to use React, the tutorial will work with it as well, so don\u2019t worry!<\/p>\n\n\n\n
Requirements<\/h2>\n\n\n\n
Before you continue with the tutorial, let\u2019s go through a list of requirements so that they don\u2019t take up a lot of your time while in development:<\/p>\n\n\n\n
- Working knowledge of React<\/li>
- Working knowledge of how the blockchain works and stores data<\/li>
- A Metamask wallet \u2013 I recommend setting up two wallets, as we will need both of them to transfer funds<\/li>
- A code editor \u2013 I prefer Visual Studio Code<\/a><\/li>
- Node.js installed on your machine<\/li><\/ul>\n\n\n\n
If you get stuck somewhere in the tutorial, feel free to have a look at the GitHub repository<\/a>.<\/p>\n\n\n\n
Setting up a Moralis server<\/h2>\n\n\n\n
Go to Moralis.io<\/a> and create a new account or log in if you already have one. Once you are logged in, you will be presented with a dashboard like this:<\/p>\n\n\n\n
![\"Screenshot](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/01\/Moralis-server-list.png\")
<\/figure><\/div>\n\n\n\nNow, click on the button which says Create a new server<\/strong>, then click on Testnet<\/strong> (which is the testing version of a blockchain, as we will not be using real ETH for transactions in this tutorial). You will now be prompted with several options:<\/a><\/p>\n\n\n\n
![\"Moralis](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/01\/add-new-testnet-server.png\")
<\/figure><\/div>\n\n\n\nHere, I\u2019ve entered my server\u2019s name, preferred location, and preferred testnet chain. In this tutorial, we will be working on the Ropsten ETH Testnet because it\u2019s easy to obtain some test ETH in this chain for development purposes. I also tried to use Rinkeby, but experienced downtimes.<\/p>\n\n\n\n
After you fill in the required fields, click Add Instance<\/strong> and this should start creating your instance. In the meantime, let\u2019s go ahead and set up our Next.js app.<\/p>\n\n\n\n
Creating a Next.js app<\/h2>\n\n\n\n
Navigate to a safe directory and use the following command to create a new Next.js app:<\/p>\n\n\n\n
npx create-next-app projectname --example with-tailwindcss<\/pre>\n\n\n\n
Replace
projectname<\/code> with a name of your choice. This command will set up Next.js and also set up Tailwind CSS for us to do some minimal styling, even though we won\u2019t be focusing a lot on styling in this tutorial.<\/p>\n\n\n\nOnce the app is created, navigate to the project directory and use the following commands to install the dependencies we will need for this project:<\/p>\n\n\n\n
npm install moralis react-moralis @walletconnect\/web3-provider<\/pre>\n\n\n\n
This will install the
moralis<\/code> core library as well asreact-moralis<\/code>, which will provide us with some handy hooks.@walletconnect\/web3-provider<\/code> is being installed because Moralis throws a warning if not; this package is used to use WalletConnect<\/a> instead of Metamask. In this tutorial, we will be covering Metamask only, so we are installing this package just to get rid of the warning.<\/p>\n\n\n\nSetting up the environment variables<\/h2>\n\n\n\n
Go back to your Moralis dashboard and you should see your project created like this:<\/p>\n\n\n\n
![\"A](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/01\/mytestserver-in-moralis.png\")
<\/figure><\/div>\n\n\n\nNow, click on View Details<\/strong> to get the information necessary to link our Next.js app to our Moralis server. Take note of the Server URL<\/strong> and Application ID<\/strong>.<\/p>\n\n\n\n
Go back to your Next.js app and make a new file called
.env<\/code>. Fill in the details in the format as shown below:<\/p>\n\n\n\nNEXT_PUBLIC_SERVER_URL=(server url here)\nNEXT_PUBLIC_APP_ID=(application id here)<\/pre>\n\n\n\n
We are using
NEXT_PUBLIC_<\/code> as the prefix here so that Next.js knows this environment variable is safe to be exposed on the client side of the app.<\/p>\n\n\n\nStart the Next.js development server using the following command:<\/p>\n\n\n\n
npm run dev<\/pre>\n\n\n\n
This command should launch our Next.js app on
localhost:3000<\/code>, so fire up your browser and have a look at the app!<\/p>\n\n\n\nConnecting a Next.js app with Moralis<\/h2>\n\n\n\n
To connect the app with the server, we need to wrap every component under a
MoralisProvider<\/code>.<\/p>\n\n\n\nThe best way to do this is with the root file
app.js<\/code> in thepages<\/code> folder. Open the file and change it to the following:<\/p>\n\n\n\nimport { MoralisProvider } from \"react-moralis\";\nimport \"..\/styles\/globals.css\";\nfunction MyApp({ Component, pageProps }) {\n return (\n <MoralisProvider\n appId={process.env.NEXT_PUBLIC_APP_ID}\n serverUrl={process.env.NEXT_PUBLIC_SERVER_URL}\n >\n <Component {...pageProps} \/>\n <\/MoralisProvider>\n );\n}\nexport default MyApp;<\/pre>\n\n\n\nHere, we have wrapped our
Component<\/code> withMoralisProvider<\/code>, so all of the child components will render properly with Moralis support. We also have passed in theappId<\/code> andserverUrl<\/code> through the environment variables we made before.<\/p>\n\n\n\nCreating the login page<\/h2>\n\n\n\n
Open
index.js<\/code> under thepages<\/code> folder. This will be the starting point of our Next.js app. Remove everything except the<Head><\/code> component, and use the following layout to design the simple login page:<\/p>\n\n\n\nreturn (\n <div className=\"h-screen w-screen flex items-center justify-center\">\n <Head>\n <title>Moralis IO tutorial<\/title>\n <meta name=\"description\" content=\"A basic tutorial of Moralis IO\" \/>\n <link rel=\"icon\" href=\"\/favicon.ico\" \/>\n <\/Head>\n <button\n className=\"px-7 py-4 text-xl rounded-xl bg-yellow-300 animate-pulse\"\n >\n Login using Metamask\n <\/button>\n <\/div>\n);<\/pre>\n\n\n\n
When you save the file, you will see an animating yellow button that says Log in using Metamask<\/strong>.<\/p>\n\n\n\n
Now let\u2019s add the functionality to it. Unsurprisingly, it\u2019s very easy using Moralis! Import the
useMoralis<\/code> hook fromreact-moralis<\/code> and use it to get some useful functions:<\/p>\n\n\n\nconst { isAuthenticated, authenticate } = useMoralis();\nconst router = useRouter();\n\nuseEffect(() => {\n if (isAuthenticated) router.replace(\"\/dashboard\");\n}, [isAuthenticated]);<\/pre>\n\n\n\nIn the above code, we have imported a variable
isAuthenticated<\/code>, which keeps the track of the authentication state of the app. We also imported theauthenticate<\/code> function which actually helps the user to login using Metamask.<\/p>\n\n\n\nThe
useEffect<\/code> redirects the user to the dashboard whenever the user is authenticated. Add theonClick<\/code> property to the button, so your button should look like this:<\/p>\n\n\n\n<button\n className=\"px-7 py-4 text-xl rounded-xl bg-yellow-300 animate-pulse\"\n onClick={() =>\n authenticate({ signingMessage: \"Authorize linking of your wallet\" })\n }\n>\n Login using Metamask\n<\/button><\/pre>\n\n\n\nWe are also passing in the
signingMessage<\/code> so that we can display a message while authenticating using Metamask. Now if you click on Log in using Metamask<\/strong>, you should see Metamask popping up and asking for authorization like this:<\/p>\n\n\n\n![\"Metamask](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/01\/Metamask-signature-request.png\")
<\/figure><\/div>\n\n\n\nOnce you click Sign<\/strong>, you get logged in using your wallet, and you will see a 404 error page, because we have yet to create a dashboard.<\/p>\n\n\n\n
I want to talk about something important before moving on to the dashboard. I\u2019m on the Ropsten test network on Metamask, so every transaction in this application will be performed on the Ropsten Testnet. Make sure you are not on the MainNet (production version of Ethereum) on Metamask while testing; always set to some kind of testnet before working.<\/p>\n\n\n\n
Getting test Ether<\/h2>\n\n\n\n
Before we get to the dashboard, let\u2019s fill our first wallet with some test Ether. Ropsten Testnet is the best test network because you can get test ETH easily as compared to other testnets (in my opinion). So, open Metamask, make sure you\u2019re on the Ropsten test network, and click on the Buy<\/strong> button. Once you scroll down, you should see this option to get test ETH:<\/p>\n\n\n\n
![\"Ether](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/01\/Ether-test-faucet.png\")
<\/figure><\/div>\n\n\n\nDepending on which Faucet Metamask redirected you to, you might need to paste in your wallet address. Shortly, you will get test ETH in your wallet running on Ropsten Testnet.<\/p>\n\n\n\n
There are some limitations on how much ETH you can extract from the Faucet, so spend wisely even when testing. Now, we can proceed to the dashboard, where will be performing a simple ETH transfer.<\/p>\n\n\n\n
Creating the dashboard<\/h2>\n\n\n\n
Create a new folder named
dashboard<\/code> underpages<\/code>. Create a new fileindex.js<\/code> with the following layout:<\/p>\n\n\n\nimport Head from \"next\/head\";\nimport { useRouter } from \"next\/router\";\nimport { useEffect } from \"react\";\nimport Moralis from \"moralis\";\nimport { useMoralis } from \"react-moralis\";\n\nfunction Index() {\n const { isAuthenticated, logout } = useMoralis();\n const router = useRouter();\n\n useEffect(() => {\n if (!isAuthenticated) router.replace(\"\/\");\n }, [isAuthenticated]);\n\n return (\n <div className=\"h-screen w-screen flex flex-col items-center justify-center\">\n <Head>\n <title>Moralis Tutorial - Dashboard<\/title>\n <\/Head>\n <button\n className=\"px-7 py-4 mb-5 text-xl rounded-xl bg-yellow-300\"\n >\n Send 0.1 ETH to owner\n <\/button>\n <button\n className=\"px-7 py-4 text-xl rounded-xl bg-yellow-300\"\n >\n Logout\n <\/button>\n <\/div>\n );\n}\nexport default Index;<\/pre>\n\n\n\nHere, we imported the Moralis Hook, and extracted useful functions we will need for actions that require Moralis.
useEffect<\/code> ensures that the user is redirected back to the login page once the user is no longer authenticated. To log out, add thelogout<\/code> function to the logout button, which should look like this:<\/p>\n\n\n\n<button\n onClick={logout}\n className=\"px-7 py-4 text-xl rounded-xl bg-yellow-300\"\n>\n Logout\n<\/button><\/pre>\n\n\n\nNow, let\u2019s create a function that will help us transfer test ETH to another wallet:<\/p>\n\n\n\n
const sendEth = async () => {\n try {\n await Moralis.Web3.enableWeb3();\n const result = await Moralis.Web3.transfer({\n type: \"native\",\n amount: Moralis.Units.ETH(\"0.1\"),\n receiver: \"account not connected with the app\",\n });\n console.log(result);\n alert(\"Transfer of funds succeeded!\");\n } catch (err) {\n console.error(err);\n alert(\"Something went wrong\");\n }\n};<\/pre>\n\n\n\nIn the code above, we are first enabling the Web3 instance so that we can access functions related to it. Then, we are initiating a transfer, so when the transaction is approved and processed, the
result<\/code> will be logged in console, or an error will be logged.<\/p>\n\n\n\nEnter the function in the
onClick<\/code> of the Send 0.1 ETH to owner<\/strong> button. Your button should look like this:<\/p>\n\n\n\n<button\n onClick={sendEth}\n className=\"px-7 mb-5 py-4 text-xl rounded-xl bg-yellow-300\"\n>\n Send 0.1 ETH to owner\n<\/button><\/pre>\n\n\n\nNow, when you click on the button, you should see Metamask popping up asking for approval of the transaction:<\/p>\n\n\n\n
![\"Metamask](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/01\/Metamask-transaction-approval-screen.png\")
<\/figure><\/div>\n\n\n\nMake sure you are on the Ropsten Testnet and click on Confirm<\/strong> to process the transaction. It might take some time to process the transaction as it\u2019s being written on the blockchain. Once the processing completes, you can see the test ETH arriving in your other account.<\/p>\n\n\n\n
What\u2019s next?<\/h2>\n\n\n\n
These are the very basic functionalities of Moralis. In addition to these, you can manage custom tokens, send NFTs, interact with deployed smart contracts, and much more! Go ahead and explore the universe of Web3 using Moralis!<\/p>\n\n\n\n
LogRocket<\/a>: Full visibility into production Next.js apps<\/h2>\n\n\n\n
Debugging Next applications can be difficult, especially when users experience issues that are difficult to reproduce. If you\u2019re interested in monitoring and tracking state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket<\/a>. <\/a><\/a><\/p>\n\n\n\n
- Node.js installed on your machine<\/li><\/ul>\n\n\n\n