DEV Community

Giovanni Fu Lin
Giovanni Fu Lin

Posted on

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();
Enter fullscreen mode Exit fullscreen mode

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[];
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

Here is the repository:
metaplex-nextjs-starter

Top comments (0)