This is the first of may tutorials that we offer. If you are looking for more advanced tutorials, checkout our guides section
NextJS
because it combines very nicely the frontend and backend part into one simple project.
It is important to note here, that blinks are chain agnostic, which means that this blink can be re-created for EVM environments with little alignments in the code.
- Level: Beginner
- Requirements: Basic understanding of TypeScript and NextJS
How blinks work
Blinks consist of two parts. A backend part, called theBlinkProvider
and a frontend part that is referred to as the BlinkClient
. The client is responsible for state handling and rendering the blink on the frontend, while the provider serves the blink via REST API with simple GET
and POST
requests.
This guide will focus on the BlinkProvider
. If you want to learn about integrating our blink SDK for your front end, please visit our blink client section.
Prerequisite
- Code Editor of your choice (recommended Cursor or Visual Studio Code).
- Node 18.x.x or above.
- Basic TypeScript knowledge.
- Devnet SOL (request airdrop from Solana Faucet if you haven’t any).
Initial Setup
Initialize the project
✓ Would you like to use TypeScript? → Yes
✓ Would you like to use ESLint? → Yes
✓ Would you like to use Tailwind CSS? → Yes
✓ Would you like your code inside a
src/
directory? → Yes ✓ Would you like to use App Router? → Yes
✓ Would you like to use Turbopack for
next dev
? → No ✓ Would you like to customize the import alias (
@/*
by default)? → No
Install extra packages
Install the packages that you need for this guide.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’s 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 your 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.
File structure
Content in file
Add an image for the blink
Every blink has an image that is rendered on top. If you already have your image hosted somewhere, you can skip this step but if you don’t, you can create apublic
folder in your NextJS
project and copy/paste an image there.
In our example, we will paste a file called donate-sol.png
into this public folder.

OPTIONS endpoint and headers
Enable CORS for cross-origin requests and standard headers for the API endpoints. This is the standard configuration for blinks.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
Visit dial.to and type in the link to your blink to see if it works. If your server runs onlocalhost:3000
the url should look like this: http://localhost:3000/api/actions/donate-sol

POST endpoint
POST
creates the transaction in the backend and sends it to the provider. A POST
request gets sent, once a user clicks on a button.
Set donationWallet and add missing imports
Add the imports that are necessary in order to transfer SOL. This part is also used to make small configurations, such as setting the donationWallet address and theconnection
.
The connection
is later used to send your transaction into the solana network. Because this is an example transfer in the solana devnet, we use their standard endpoint. If you plan to use this blink later in a production environment, you should replace the link with your RPC
link.
Create POST request endpoint
This code will be added below ourGET
request in the same file.
Extract data from request
The request contains the URL and the account (PublicKey) from the payer.Prepare the transaction
Create a new function that prepares the transaction and add it below thePOST
request.
prepareTransaction
in the POST
request.
Finalize
CreateActionPostResponse
and return it to the client.
Full code
Register your blink
Please note that it is strongly advised to register your blink in our registry. That way we can list it in our Standard Blinks Library, giving your blink extra exposure and it will unfurl on social media sites, such as X.Conclusion
This guide showed you how to build a blink that sends SOL to another wallet usingNextJS
. The goal was to demonstrate how quickly blinks can be built, and how they work.
At this stage, you could already host your blink making it possible for clients to integrate it into their websites and services.
In the next sections, you will find more use-cases for blinks, including forms, multi-step blinks and much more. You’ll learn how to create and customize experiences that fit your users’ needs.
If you want more hands-on examples, visit our guides section.