Building a Mint Solana NFT Frontend with NextJS and Metaplex

#nextjs #solana #metaplex

Let's build an NFT minter with Nextjs and Metaplex on the Solana network.

We start by initiating Metaplex and Wallet.

import { useWallet } from "@solana/wallet-adapter-react";
import { useMetaplex } from "hooks/useMetaplex";
// ...
  const { metaplex: mx } = useMetaplex();
  const wallet = useWallet();

Use findAllByOwner To retrieve NFT Metadata by its owner public key.

    const owner = mx.identity().publicKey;
    const nfts = (await mx
      .nfts()
      .findAllByOwner({ owner })
      .run()) as Metadata[];

Use uploadMetadata to upload the metadata and create to use the metadata to create the NFT.

        const { uri, metadata } = await mx
          .nfts()
          .uploadMetadata({
            name: data.name,
            description: data.description,
            image: toMetaplexFile(arrayBuffer, "metaplex.png"),
          })
          .run();

        const { nft } = await mx
          .nfts()
          .create({
            uri,
            name: data.name,
            sellerFeeBasisPoints: 500,
          })
          .run();