Web3 Blog

Create a web3 blog where your readers can collect blog posts as NFTs

The Underdog API makes it easy to build your own web3 blog. Using the API, you can:

• Create Collections for each of your blog posts

• Allow your readers to collect blog posts as NFTs

You can fork an open-source example of a web3 blog to quickly get started. You'll find details on how to set up the repo in the README.

https://github.com/UnderdogProtocol/underdog-nextjs-blog-startergithub.com

In the guide, I'll walk through the three pieces of the repo that use the Underdog API to create NFTs for blog posts.

1. Next.js API Endpoint

2. Collect Button

3. Markdown Blog Posts

Next.js API Endpoint

In pages/api/nfts.ts, we use two API endpoints

1. GET /v1/nfts to get information if the currently connected wallet has an NFT in the blog post's Collection

2. POST /v1/nfts to create an NFT in the Collection when a reader collects the blog post

pages/api/nfts.ts

import { UNDERDOG_API_KEY, UNDERDOG_API_URL } from "@/lib/constants"
import { metadataImageUrl } from "@/lib/underdog"
import axios from "axios"
import { NextApiRequest, NextApiResponse } from "next"

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    if (req.method === "GET") {
      const response = await axios.get(
        `${UNDERDOG_API_URL}/v1/nfts?ownerAddress=${req.query.ownerAddress}&collectionAddress=${req.query.collectionAddress}`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${UNDERDOG_API_KEY}`,
          },
        }
      )

      res.status(200).json(response.data)
    }

    if (req.method === "POST") {
      const response = await axios.post(
        `${UNDERDOG_API_URL}/v1/nfts`,
        {
          name: req.body.name,
          description: req.body.description,
          image: metadataImageUrl(req.body.collectionAddress),
          collectionAddress: req.body.collectionAddress,
          ownerAddress: req.body.ownerAddress,
        },
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${UNDERDOG_API_KEY}`,
          },
        }
      )

      res.status(200).json(response.data)
    }
  } catch (e: any) {
    console.log(e)
    res.status(400).json({ error: e.message })
  }
}

Collect Button

Within each blog post, we have a CollectButton component that mints the NFT directly to the reader's wallet.

The key part of the component is the handleCollect function where we take the blog post metadata (title, description, and Collection address) and send that data to our Next.js API endpoint we just created.

components/CollectButton/index.tsx

...
const handleCollect = async () => {
  if (publicKey) {
    toggleCollecting()
    await axios.post("/api/nfts", {
      name: entry.title,
      description: entry.description,
      collectionAddress: entry.collectionAddress,
      ownerAddress: publicKey?.toString(),
    })
    await refreshNfts()
    toggleCollecting()
  }
}
...

Markdown Blog Posts

Within each blog post, we need to include information about our blog post as well as the Collection we want the blog post NFTs to be a part of.

pages/your-blog-post/index.mdx

export const entry = {
  title: "Your Blog Post",
  description: "Add a description for your blog post",
  collectionAddress: "E6H1MYDiFhUkmAWPnxTMS9iEPpJtvMU6za5pvqUt6Hm3"
}

Within the Underdog dashboard, you can create a new Collection for each blog post and upload unique artwork for each NFT.