Learn how to create a blink that donates SOL to another wallet using NextJS.
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.
BlinkProvider
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.
src/
directory? → Yes next dev
? → No @/*
by default)? → No
actions.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.
public
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.
GET
returns the blink metadata and UI configuration.
It describes:
localhost:3000
the url should look like this: http://localhost:3000/api/actions/donate-sol
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.
connection
.
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.
GET
request in the same file.
POST
request.
prepareTransaction
in the POST
request.
ActionPostResponse
and return it to the client.
NextJS
. 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.