Solana Blinks Development Ep3: Ultimate Guide To Integrate Blinks In Any Nextjs Website With Blinks React SDK

1.0 Introduction

1.1 Overview Of Guide/Tutorial’s Goal

Helping Developers Understand How To Integrate Solana Blinks Into Nextjs dApp Using Blinks React SDK

In this Episode 3 of the ultimate guide for Blinks development, I will guide you through integrating and rendering a blink within your website.

Yeah at the end of this guide, you will have blinks rendered in your Nextjs website and interact with it just like you will do on dial.to and x platforms.

1.2 What You Will Build In This Guide

Here is what you will build at the end of this guide (A Blinks rendering dApp):

Don’t worry if you have never heard of Solana Blinks or some of those aforementioned tech stacks before (nothing to fear 😀). I will cover them step by step with you all the way.

So, what are you waiting for? 
Grab your Blinks Dev hat and let Dev away (lol 🤨).

Meanwhile, even if you have never developed a Nextjs App before and are just starting entirely, you are also covered too, because I ensured this is actually step-by-step with helpful resource recommendations for beginners and at the end,

you will have access to the full code repo to play around with and even have assignment to submit to horn your Blinks development skills further.

1.2.1 INSPIRATION FOR THIS PROJECT:

I was inspired to build this by how dail.to renders blinks and allow direct interaction with it.

Meanwhile, I will be releasing the full source code (as open-source) at the end of this guide for anyone to build with.

1.3 What You Will Learn From This Guide

Here is what you will learn at the end of this guide:

1. Solana Actions and Blinks

2. Solana Wallet integration in Nextjs (essential for the Blinks to interact with the Solana Blockchain)

3. Using Blinks React SDK

4. Integrating Blinks in Nextjs powered dApps

1.3 Stuck? Get Support✋

I understand based on experience with developers that things can always break or get difficult to figure out, especially for beginners.

That is why you can get support for this content in just 2 steps:

STEP 1: Comment your questions below this guide to get support if get stuck (please avoid questions out of the context discussed here or they won’t be responded to)

STEP 2: Then join Discord below to alert me to check your questions (doing this ensures I can be aware of your comment to check and respond ASAP).

Please avoid posting questions directly on Discord because I may not be able to respond there. Asking directly under the post as a comment and getting a response helps to ensure other developers going through the same issues can access the solution without repeatedly asking the same questions on Discord.

Join dProgrammingUniversity Discord Server – I have created a dedicated channel #Solana (under the BLOCKCHAINS category).

So, feel free to ask questions below in the comment section if you are stuck with this guide.

You can Follow me on X(Twitter)

DISCLOSURE:

We may hold, invest, trade or receive rewards/grants/bounty/tokens from reviewed/discussed web3 projects/affiliates (before, during or after this content was published).

DISCLAIMER:

All our contents at dProgramming University are for educational purposes only and do not constitute financial, trading, investment or development advice.
Please do your own research (DYOR).
By using or following the whole or part of this content, you agree that we are not liable for any losses that you may suffer thereafter.

2.0 Essential Tools and Resources for Integrating Blinks In Nextjs Website

So, let us have a quick dive into essential tools and resources you need to build and develop Solana actions that then successfully unfurls and turns into a Blinks.

To avoid repetition, I have covered this in previous episodes and contains:

1. Solana Blinks Documentation
2. Blinks-enabled Solana Wallets
3. Solana Blinks Chrome Extension by Dialect
4. Solana Blinks Testing and Inspection Tools
5. Solana Blinks Explorer
6. Solana Actions And Blinks Specifications
7. Solana Actions and Blinks Common Issues and Fixes
8. Limitations of Solana Blinks

3.0 Pre-Requisites For Nextjs Blinks Integration

Before diving deep into development,

let’s quickly set up the required development environment.

3.1 Pre-Requirement

Meanwhile, having knowledge of the following will be helpful:

(1) Nextjs Development:

As I mentioned earlier if you have never developed with Nextjs javascript framework before, then I have a Full-stack Web3 Frontend Development FREE Course you can take to help get started with it for free.

(2) Solana Blinks Development Ep1:

If you have not explored blinks development at all before, I believe that the best place to start is Solana Blinks Development Ep1: Ultimate Guide To Solana Blinks Development For Developers and familiarize yourself with the features. Also, it will guide you step by step to build your first blinks as a beginner before you move on here to more advanced like this guide blinks game development.

(3) SOL Balance:

You need to have some SOL in the wallet you want to use (on Devnet which is free – claim some Devnet SOL here). But if Mainnet, then you need to acquire real SOL for cash on exchanges.

4.2 Setting Up Development Environment

Installing necessary tools and software

You will need to have the following installed on your computer.

NOTE: For this guide, I am using Linux OS (Ubuntu):

1. Nodejs
2. Node Package Manager – I prefer using PNPM over NPM and Yarn (use your preferred choice)
3. IDE – VSCode, Cursor etc. (I use VSCode but gradually moving towards using Cursor more now instead of VSCode for easier AI development features accessibility)
4. Solana Actions Node Package – Pre-loaded with lots of features needed to reduce writing much code for Solana actions API route endpoints.
5. Solana Web3.js – (Though most things are already available via the Solana Actions Node Package, this is still needed for things like creating connections to Solana clusters like Mainnet, Devnet etc.)
6. Dialect Blinks React SDK Actions Package: Essential to help render blinks within a nextjs website
7. Solana Wallet Adapters: Essential for wallet connection which is required to interact with the blinks directly from our Nextjs website.

5.0 VIDEO: Integrating Blinks In Any Nextjs Website With Blinks React SDK

I have a step-by-step- video for this guide.

Watch me go through the Integratiion of Blinks In any Nextjs Website With Blinks React SDK in the video below:

Very sorry, the video still been processed. Kindly check back later – Thanks!

6.0 Integrating Blinks In Any Nextjs Website With Blinks React SDK

Here we are, lets get started integrating Blinks in our Nextjs powered dApp.

Shall we?🤔

6.1 Install Nextjs

Create a folder named

blinks-003-blinks-nextjs-integration

Open it and inside the “blinks-003-blinks-nextjs-integration” folder, right-click to open in “Terminal”

In the terminal, type command

code .

This will open the “blinks-003-blinks-nextjs-integration” project folder in VSCode as seen in the screenshot below:

In VSCode, open a new “Terminal” (Let’s call it “Terminal 1”) and install Nextjs following the instructions below:

Install Nextjs using the default setup with the command:

pnpx create-next-app .

Select details as:

✔ 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 to use `src/` directory? - No
✔ Would you like to use App Router? (recommended) - Yes
✔ Would you like to use Turbopack for next dev? - No
✔ Would you like to customize the default import alias (@/*)? - No

Then confirm all packages installed with the command:

pnpm i

You should see something like this in your terminal:

Lockfile is up to date, resolution step is skipped
Already up to date
Done in 651ms

Run the Nextjs “blinks-003-blinks-nextjs-integration” project dev server to preview it with the command (open second terminal “Terminal 2”):

pnpm dev

Open the project in your browser:

http://localhost:3000 

(if this port is busy) 
it will use other available ports like

http://localhost:3001

NOTE:

Moving forward, kindly leave “Terminal 2” running the “pnpm dev” server as above and continue to use “Terminal 1” for other commands below to ensure you don’t have to kill the server and restart multiple times to install other packages.

For now, you should have the default Nextjs page loaded (if error, kindly ensure this is fixed before proceeding to the next steps)

7.0 Install Essential Node Packages

Before we move on, there are other essential node packages that need to be installed as follows:

1. Solana Web3.js
2. Solana Actions
3. Dialect Blinks
4. Solana Wallet Adapters (base, react, react-ui and wallets)

You can install the packages above with the following commands:

pnpm i @solana/actions @solana/web3.js @dialectlabs/blinks @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets

BEFORE:

AFTER:

8.0 Turn Nextjs App To Blinks Rendering dApp

Yeah, let’s transform our Nextjs app to render blinks and allow direct interaction from users with the blinks,

8.1 Using Dialect Blinks React SDK

Yeah, it is time to use the Dialect Blinks React SDK👩‍💻

8.1.1 Creating Blinks Rendering Page

First, update the default Nextjs homepage code:

/app/page.tsx

Replace the code with the following to import the previously installed Dialect Blinks React SDK:

// /app/page.tsx
'use client';

import '@solana/wallet-adapter-react-ui/styles.css';  // Import wallet adapter styles
import { WalletProvider, ConnectionProvider } from '@solana/wallet-adapter-react';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';
import { useMemo } from 'react';
import { BlinkComponent } from '@/components/Blinks';
import { WalletButton } from '@/components/WalletButton';
// Import wallet adapters
import {
  PhantomWalletAdapter,
  SolflareWalletAdapter,
  // Add other wallet adapters as needed
} from '@solana/wallet-adapter-wallets';



export default function Home() {
  // Set up the Solana endpoint
  const endpoint = useMemo(() => clusterApiUrl('mainnet-beta'), []);

  // Initialize wallet adapters
  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter(),
      new SolflareWalletAdapter(),
      // Add other wallet adapters as needed
    ],
    []
  );

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <WalletButton />
          <BlinkComponent />
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

Then update the “/app/globals.css” styles file code to below:

/* /app/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

/* body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
} */

/* Blinks style */

/* Background gradient for the full page */
body {
  background: linear-gradient(to right, #122863, #210835);
  color: #FFFFFF; /* Ensure text is white for contrast */
}

/* Center the Blink component with padding */
.blink-container {
  max-width: 450px; /* Limit the width of the Blink component */
  margin: 0 auto; /* Center horizontally */
  padding: 0px; /* Add padding */
  background: #0A0A0A; /* Dark background for Blink component */
  border-radius: 8px; /* Slight rounding of edges */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

/* Wallet connection styling */
/* Wallet button styling */
.wallet-button-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.wallet-status {
  font-size: 14px;
  color: #4ade80;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 12px;
  border-radius: 4px;
}

Your code editor will surely be screaming at you, Hell Yeah!❤️‍🔥

No worries😟, we will calm it down as we create more features and use the imports through our code.

8.1.2 Creating Blink Rendering Component

Yeah, let’s create the component to handle the Blinks rendering.

Create a new folder in the root for “components”:

/components

Then create another folder in the “components” folder named “Blinks”

/components/Blinks

Then create a file in the “Blinks” folder named “index.tsx”

/components/Blinks/index.tsx

Then, copy the component code below into the “index.tsx” file created above:

// /components/Blinks/index.tsx
'use client';

import '@dialectlabs/blinks/index.css'; // Import Blink styles
import {Blink, useAction } from "@dialectlabs/blinks";
import { useActionSolanaWalletAdapter } from "@dialectlabs/blinks/hooks/solana";
import { useEffect, useState } from 'react';

export const BlinkComponent = () => {
  const [mounted, setMounted] = useState(false);
  
  // Replace with your actual action API URL
  const actionApiUrl = 'https://dial.to/?action=solana-action:https://exploreweb3.xyz/learn-earn-game'; // Example URL https://dial.to/?action=solana-action:action-url-here
  
  // Construct Helius RPC URL using environment variable
  const heliusRpcUrl = `https://mainnet.helius-rpc.com/?api-key=${process.env.NEXT_PUBLIC_Helius_API_KEY}`;
  const { adapter } = useActionSolanaWalletAdapter(heliusRpcUrl);
  
  const { action, isLoading } = useAction({
    url: actionApiUrl
  });

  // Handle client-side mounting
  useEffect(() => {
    setMounted(true);
  }, []);

  // Don't render anything on the server side
  if (!mounted || isLoading || !action) return null;

  return (
    <div className="blink-container">
      <Blink 
        action={action}
        adapter={adapter}
        stylePreset="x-dark"
      />
    </div>
  );
};

NOTE:

The section of the above code:

// Replace with your actual action API URL
const actionApiUrl = ‘https://dial.to/?action=solana-action:https://exploreweb3.xyz/learn-earn-game’; // Example URL https://dial.to/?action=solana-action:action-url-here

You can replace it with any Blinks URL from dail.to and it will display on your website instantly while also allowing users to interact with it.

Meanwhile, I noticed that when I used a “local” or “unapproved” blinks actions URL, it would display but disable the buttons to prevent users from being able to interact with it.

I do not know why for certainty but I guess it protects users from interacting with scam blinks.

8.2 Setting Up Solana Wallet Adapter In Nextjs For Blinks Interaction

While the Dialect Blinks React SDK allows us to render the blinks in our website, we still need to ensure Solana wallet integration is done or there won’t be a way for users to interact with the Solana Blockchain via the blinks.

First, we have part of the Solana wallet adapter codes already in the previous code above but you will notice that the component is missing. So, let’s create the wallet button component below.

In the “components” folder, create a new folder named “WalletButton”:

/components/WalletButton

Then, in the “WalletButton” folder create a new file named “index.tsx”:

/components/WalletButton/index.tsx

Here is the full code for that:

// /components/WalletButton/index.tsx
'use client';

import { useWallet } from '@solana/wallet-adapter-react';
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';

export const WalletButton = () => {
  const { connected } = useWallet();

  return (
    <div className="wallet-button-container">
      {connected && <div className="wallet-status">Wallet Connected:</div>}
      <WalletMultiButton />
    </div>
  );
};

If there is no error by now you should see the wallet list pop-up when the “Connect Wallet” button is clicked as in the screenshot below:

9.0 TESTING: Testing Your Blinks Integration On Your Website

Yeah, now that you have your blinks integration into your Nextjs website ready, it is time to test.

But before we can test successfully, we have one more very important thing to do.

That is to set up the RPC API Key (and since this is confidential data, the best option is to set up a .env.local file)

Create a new file “.env.local” in the root folder of our project and put the following code (And remember to never reveal your private key or seed phrase or API keys to anyone or push publicly via git commit):

# Rename `.env.local.example` to `.env.local` and update the following:
# Check gitignore to ensure your `.env.local` file is not commited or push to repo


# RPC details
NEXT_PUBLIC_Helius_API_KEY=

NOTE:

The above code shows that am using “Helius” Solana RPC (Feel free to use any other Solana RPC of your choice).

You can get started with free RPC at Helius.

9.1 Testing Blinks Integration On Nextjs Website

If you get previous codes correctly,

then you should now have a fully functioning Nextjs-powered dApp ready to unfurl any blinks and also allow user to interact with the blinks right within your website.

STEP 1:

Go to Dialect’s Dial.to website and pick any blinks URL (if you have yours already approved there, you can use that too)

STEP 2:

Paste your Solana actions API endpoint URL in the “actionApiUrl” in the “/components/Blinks/index.tsx”.

STEP 3:

If no errors in your code, you should render the Blinks like the following:

Connect Wallet for testing and try it out.

9.2 Not Working? – GET HELP!

If not successful, it will display error messages.

Kindly take time to fix the error including checking your browser console.

If unable to solve the errors, you can share a link to your repo and a screenshot of the error as a comment below (Avoid posting code directly in the comment to prevent being perceived as spam)

10.0 PRODUCTION DEPLOYMENT: Deploy Your Blinks Displaying dApp

Considering the above is localhost, to make it available in production, follow steps below.

I used Vercel to host this free as you can access the one I used as an example previously below:

Home: https://blinks-003-blinks-nextjs-integration.vercel.app/

Here are the steps I took for the production build (will suggest watching the video to see me execute each step below which will not be covered in this guide text version)

10.1 Create Repo And Push To GitHub

(1) Create a new EMPTY repo on GitHub:

blinks-003-blinks-nextjs-integration

(2) Add the repo URL as a remote URL in the project we have been developing locally using commands

git remote add origin https://github.com/dProgrammingUniversity/blinks-003-blinks-nextjs-integration.git

Reminder:

Kindly remember to replace the “dProgrammingUniversity” with your actual Github or you will get errors when trying to push to it later.

(3) Add the existing local code to git with the command:

git status

git add .

(4) Commit the code with the command:

git commit -m "initial production commit"

(5) Push the commit from local git to your remote repo on GitHub with the command:

git push

If error, then follow the command outputted with the error, that is due to being the first time we are pushing to the remote repo and need to establish the connection.

git push --set-upstream origin main

(6) Confirm successful push to affirm that both the local and remote git are aligned without error or pending commits with the command:

git status

Hurray, we have successfully pushed to the repo

and set to deploy the production build to ANY host

(am using Vercel but feel free to use other alternatives as you desire like Netlify, Render etc.)

NOTE:

Stuck? Then, kindly watch me do this step by step in the video.

10.2 Deploying Your Build Production To Vercel

(1) Simply log in to your host (mine Vercel)

(2) Create new project

(3) Select the source as the GitHub repo for the project

(4) Next before finalizing the deployment is the ENV setup

NOTE:

Stuck? Then, kindly watch me do this step by step in the video.

10.1 Environment Setup (For Wallet Private Key, API Keys Protection)

(1) Copy and paste the content of the .env.local file into the environment setup option. This ensures the API key for the RPC can be available for the blinks without exposing it to others.

(2) Save and continue with the deployment

If all goes well, you should have the deployment completed in a few minutes.

(3) Domain: Your deployed project will be assigned a free .vercel (or whatever platform you hosting with) subdomain name. Use it to visit the production site.

(4) Custom Domain: If needed, get a custom domain and assign it to the project.

REMINDER: It is now mandatory for Blinks registry approval to get a custom domain attached to your project for approval.

NOTE:

Stuck? Then, kindly watch me do this step by step in the video.

10.1 Testing Production Build

Just as we did earlier when it was in localhost.

If all works fine, congrats

You can now proceed to add as many verified blinks I you want to display.

11.0 BLINKS VERIFICATION: Submitting Your Solana Actions to the Official Blinks Registry

To display your own Blinks it need to be verified first and its free.
Simply follow my step by step guide to verify Blinks in the Blinks registry here.

12.0 PROJECT REPOSITORY

The repo for the project done in this guide can be accessed below (

IMPORTANT NOTE: Please remember to give the repo a STAR⭐:

dPU Nextjs Rock Paper Scissors (RPS) Blinks Game dApp Codes Repo

13.0 GRANTS/BOUNTIES/HACKATHONS: Solana Blinks Grants And Bounties

11.1 How To Get Solana Blinks Grants, Bounty and Support for Developers

The Blinks ecosystem within Solana is growing rapidly and will likely soon be seeing Job vacancies for Solana Blinks developers.

Aside from that, there are multiple grants for Blinks you can try if you are doing any of the following relating to Blinks:

Note: Most grants, hackathons or bounties listed below might have closed when you check them, so kindly check the Dialect Solana Blinks platform for new active ones.

Also, you can comment below to alert me of new and current ones to add up to the list below.

1. Building/Developing Blinks
2. Building/Developing Blinks tools like Blinks List/Directory/Explorer (I Am building this, so feel free to submit your Blinks there to be featured for FREE)
3. Blinks educational content for developers and non-developers

If you fit any of the above categories, then you can apply for any of the grants below (I will likely update the list as I get to discover more):

1. Dialect x Superteam Solana Blinks Grant (72hours – 1 week response time – I got a response for this guide in less than 24 hours after the grant application was submitted)
2. Solana Foundation Actions and Blinks Grant: Under “Which funding category are you applying for?” choose “Actions and Blinks” – (1-3 months response time)
3. Superteam Instagrants (72hours – 1 week response time)

14.0 EXERCISES

Do the following exercise to solidify your learning:

1. Star and fork the above repo
2. Clone to your PC
3. Create a new branch
4. Make changes (customize): The guide displays 1 blink but yours should display multiple blinks at least 3 at a time on the page so that the users can interact with multiple blinks within your dApp.
5. Push your changes to the “Main” branch of your own repo from the new branch – Don’t send PR to the dPU repo you forked above, instead push to your own “Main” branch of your forked version of the dPU repo above.
6. Host it on Vercel, Netlify or any other of choice
7. Kindly follow the submission steps below for me to check.

14.1 Submission:

Things to submit for review:

1. Share your experience making those changes alongside learning Solana Blinks development through this guide.
2. Share your hosted Nextjs Blinks Renderer dApp link on Vercel or other platforms.
3. Share your forked repo link

Then, submit all the above details for a check as a comment under this post (do not post it in dPU discord or send me a DM, will not attend to such please).

Remember, after posting as a comment under this post, you can then send me a reminder in the dProgramming University discord server under the “Support” section above in the #Solana channel for me to check your submission ASAP.

15.0 CONCLUSION

It was an interesting ride and glad you made it to this point.

Congrats👏 once again and it’s time to take positive advantage of the opportunities opened up to developers with the introduction of Solana Blinks and grants to encourage and support devs.

WHAT NEXT?

I aim to create more Solana Blinks Development Episodes with intermediate and advanced Solana Blinks development content and share them in future guides with you.

Thus, kindly use the social media share button to share this guide if you have found it helpful or will be helpful to some developers in your social media sphere.

And join the discord to stay in the loop.

Thanks for your time, it’s been a wonderful ride with you all this while.

SOLOMON FOSKAAY

Founder, dProgramming University (dPU).

Twitter: SolomonFoskaay

DSCVR: SolomonFoskaay

16.00 REFERENCES

https://docs.dialect.to/documentation/actions/blinks/add-blinks-to-your-web-app