How to Create An NFT Drop on Solana

In this guide, we are going to use our Solana SDK to create an NFT Drop that other wallets can mint from!

Before we start, here is a list of useful resources and tools we will be using in this guide.

• Project source code
• Solana SDK
• Getting started with Solana

Let's get started!

Setup

Using the CLI, create a new Node.js & Javascript project with the Solana SDK preconfigured for you, using the following command:

npx thirdweb@latest create app --node --solana

Open the project up in your favourite text editor and let's create an NFT Drop.

Getting wallet private key

To deploy the program from our wallet, we need the private key of our wallet. So, go to your phantom wallet and click on the top right badge and select your wallet. Then click on the export private key button:

You will be asked to enter your password, after doing that copy the private key and paste it into a new file .env in the following format:

PRIVATE_KEY=<your-private-key>

Using private keys as an env variable is vulnerable to attacks and is not the best practice. We are doing it in this guide for the sake of brevity, but we strongly recommend using a secret manager to store your private key.

Writing the script

Now that we have got everything set up it is time to write our script! Create a new file called nft-drop.mjs in a scripts folder.

Initializing the SDK

We need to initialize the thirdweb SDK with the private key that we just exported into our .env file so add the following code:

import { ThirdwebSDK } from "@thirdweb-dev/sdk/solana";
import { config } from "dotenv";

config();
// fetching the key from the environment variable
const walletPrivateKey = process.env.PRIVATE_KEY;
// Initializing the SDK and passing in the signer 
const sdk = ThirdwebSDK.fromPrivateKey("devnet", walletPrivateKey);

Adding the program metadata

To set up the program, we will create some metadata using the SDK and then print out the program address to the console.

const programMetadata = {
  name: "My NFT Drop",
  symbol: "MND",
  description: "This is my NFT Drop",
  itemsAvailable: 5,
};

// Here we will get the address of the deployed program by passing
// the programMetadata in the createNftDrop hook that the sdk provides
const address = await sdk.deployer.createNftDrop(programMetadata);
// Logging the address to the terminal console
console.log("Program Address: ", address);

Feel free to change the details of the metadata as you choose!

Now that we have already set up the deployment environment for the program, let's go ahead and set up the metadata to Lazy mint some NFTs.

For this step, you'll need to have image files to upload as part of your NFT metadata in a /files directory in your project.

// Add the metadata of your NFTs
const metadata = [
  {
    name: "NFT #1",
    description: "My first NFT!",
    image: readFileSync("files/0.jpg"),
    properties: [
      {
        name: "kitten",
        value: "very cute!",
      },
    ],
  },
  {
    name: "NFT #1",
    description: "My second NFT!",
    image: readFileSync("files/1.jpg"),
    properties: [
      {
        name: "grumpy cat",
        value: "grumpy!",
      },
    ],
  },
  {
    name: "NFT #1",
    description: "My third NFT!",
    image: readFileSync("files/2.jpg"),
    properties: [
      {
        name: "Ninja Cat",
        value: "warrior!",
      },
    ],
  },
];

const program = await sdk.getNFTDrop(address);

//   And lazy mint NFTs using the above metadata
const tx = await program.lazyMint(metadata);
// logging the transaction hash to the console
console.log(tx);

Running the script

It's finally time to run our script and lazy mint our NFTs, so go ahead and execute the following command.

node scripts/nft-drop.mjs

You should be able to see something like this in your terminal with your program address and the transaction hash being logged to the console.

Next up it's finally time to claim the NFTs, so we will create a Next.js app to do that.

To create a Next.js app run the following command.

npx thirdweb create app --next --ts

This will set up a Next.js app with a button to connect your wallet.

First off go over to the _app.tsx file and change the network to the network you have deployed your program on.

Now go ahead and create a component in a new components folder called Claim.tsx and add the following code.

import { useWallet } from "@solana/wallet-adapter-react";
import { useProgram,useClaimNFT } from "@thirdweb-dev/react/solana";

export default function Claim() {
    const wallet = useWallet();
    // Add the address of the program you deployed earilier on
    const programAddress = "4GnG5Q9Y2KQajGhUfUa21qbSNrisRaebHKWWPdhrM2Fj";
    // Pasting the programAddress variable and the type of program
    const program = useProgram(programAddress, "nft-drop");
    // using the useClaimNFT hook here
    const claim = useClaimNFT(program.data);
    const quantityToClaim = 1;
  
    return (
      <div>
        {wallet.connected ? (
            // Calling the claim function and passing in the quantity we are claiming
          <button onClick={() => claim.mutate(quantityToClaim)}>
            {claim.isLoading ? "Claiming..." : "Claim NFT"}
          </button>
        ) : (
        <h3>Connect your wallet</h3>
        )}
      </div>
    );
  }

Render your Claim component on the Home page:

import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
import type { NextPage } from "next";
import Claim from "../components/Claim";

// Default styles that can be overridden by your app
require("@solana/wallet-adapter-react-ui/styles.css");

const Home: NextPage = () => {
    return(
      <div>
      	// Wallet hook
        <WalletMultiButton />
        // Add the claim component here
        <Claim />
      </div>
    )
};

export default Home;

That's it! You can now run your server at localhost:3000 by running npm run dev and connect your phantom wallet with the connect wallet button.

You should now be able to see something similar in your localhost server:

Click on the claim button and approve the transaction. It will claim you one of your lazyMinted NFTs.

Congratulations!!! You have finally claimed your NFT and you should now even be able to see it in your wallet.

Head over to the collectibles section on your phantom wallet and check out the cute little kitten that I just minted.

Conclusion

In this guide, we learned how to use the thirdweb Solana SDK with node.js and deploy our NFT Drop program. We were also able to claim an NFT with our Next.js app which used the React SDK. If you want to take a look at the complete code, check out the GitHub repository, or if you run into any issues feel free to reach out to us on discord.