NextJS
framework and TypeScript
. You will learn the basic project setup and how a blink is structured. At the end, you have a blink that send a tip to a wallet and can be implemented by a blink client.
This guide will not show you how to implement a blink client. If you are looking for a guide, that explains how to integrate an existing blink, checkout our blink integration guide.
Level: BeginnerRequirements: Basic understanding of TypeScript and NextJS
Prerequisite
- Code Editor of your choice (recommended Cursor or Visual Studio Code).
- Node 18.x.x or above.
- Basic TypeScript knowledge.
- Testnet MON (Request MON via form if you havenβt any).
Initial Setup
Start by setting up a newNextJS
project and add some basic configuration.
Initialize the project
In your terminal, run the following command.Install extra packages
Run the following command to install missing dependencies.Start development server
The development server is used to start a local test environment that runs on your computer. It is perfect to test and develop your blink, before you ship it to production.Coding Time π
Now that we have our basic setup finished, it is time to open the editor and start coding.Create an endpoint
To write a blink provider, you have to create an endpoint. Thanks to NextJS, this all works pretty straightforward. All you have to do is to create the following folder structure:Create actions.json
Finally, you have to create theactions.json
file which will be hosted in the root directory of our application. This file is needed to tell other applications which blink providers are available on your website. Think of it as a sitemap for blinks.
You can read more about the actions.json in the official dialect documentation.
Add an image for the blink
Every blink has an image that is rendered on top. If you have your image already hosted somewhere, you can skip this step but if you havenβt you can just create apublic
folder in your NextJS
project and copy/paste an image there.
In our example we will paste a file called tip-mon.png
into this public folder.

Create environment variables
Our repositories are public and we donβt expose any sensitive data such as wallet addresses, RPC data, etc. in there. All this information is kept inenvironment
variables.
Depending on the example repository you cloned, there is either a
.env.example
or a .env
-file. If you find a .env.example
-file, make sure to rename it to .env
..env
variables, in this case the NEXT_PUBLIC_RPC_URL
.
OPTIONS endpoint, headers and basic config
EnablesCORS
for cross-origin requests and standard headers for the API endpoints. This is standard configuration you do for every blink.
GET endpoint
GET
returns the Blink metadata and UI configuration.
It describes:
- How the Action appears in Blink clients
- What parameters users need to provide
- How the Action should be executed
Test your Blink (optional)
Note: dial.to currently supports only
GET
previews for EVM
. To test your POST
endpoint, please follow the tutorial to the end, where we implement the blink client in the frontend.localhost:3000
the url should be like this: http://localhost:3000/api/actions/tip-mon

POST endpoint
POST
handles the actual MON transfer transaction.
POST request to the endpoint
Create the post request structure and add the necessary imports as well as thedestinationWallet
on top of the file.
Extract data from request
The request contains the URL, which contains theamount
param.
Create the transaction
Create a new transaction with all the necessary data and add it below in thePOST
request.
Finalize
CreateActionPostResponse
and return it to the client.