NextJS

8min
You can use NextJS API paths to define and expose your mini-app and publish it on Vercel.
This section is being reviewed and expanded.
Next.js provides built-in API routes, making it an excellent choice for projects that combine frontend and backend functionality.
Initial Setup
Create a new Next.js project:
terminal
npx create-next-app@latest mini-app-metadata
cd mini-app-metadata
npx create-next-app@latest mini-app-metadata
cd mini-app-metadata
﻿
Install the SDK
npm
yarn
yarn add @sherrylinks/sdk
yarn add @sherrylinks/sdk
﻿
Open the project in your preferred editor. For example VSCode
terminal
code .
code .
﻿
Creating the Endpoint
Navigate to the pages/api/example folder and create a file named route.ts:
route.ts
import { NextRequest, NextResponse } from "next/server";
import { Metadata, BlockchainActionMetadata, Abi, createMetadata, ValidatedMetadata } from "@sherrylinks/sdk"

export async function GET(req: NextRequest, res: NextResponse) {
    try {
        const abi: Abi = [
            {
                "inputs": [
                    {
                        "internalType": "string",
                        "name": "_greeting",
                        "type": "string"
                    }
                ],
                "name": "setGreeting",
                "outputs": [],
                "stateMutability": "nonpayable",
                "type": "function"
            }
        ] as const

        const action: BlockchainActionMetadata = {
            label: "Click",
            contractAddress: "0x1234567890123456789012345678901234567890",
            contractABI: abi,
            functionName: "setGreeting",
            chainId: "avalanche",
        }

        const metadata: Metadata = {
            type: "action",
            icon: "https://your-domain.com/api/mini-app-image",
            title: "Hello, World!",
            description: "This is a mini app that greets the world.",
            actions: [action]
        };

        const metadataResponse: ValidatedMetadata = createMetadata(metadata);
        return NextResponse.json(metadataResponse, { status: 200 });
    } catch (error) {
        return NextResponse.json(error, { status: 500 });
    }
}
import { NextRequest, NextResponse } from "next/server";
import { Metadata, BlockchainActionMetadata, Abi, createMetadata, ValidatedMetadata } from "@sherrylinks/sdk"

export async function GET(req: NextRequest, res: NextResponse) {
    try {
        const abi: Abi = [
            {
                "inputs": [
                    {
                        "internalType": "string",
                        "name": "_greeting",
                        "type": "string"
                    }
                ],
                "name": "setGreeting",
                "outputs": [],
                "stateMutability": "nonpayable",
                "type": "function"
            }
        ] as const

        const action: BlockchainActionMetadata = {
            label: "Click",
            contractAddress: "0x1234567890123456789012345678901234567890",
            contractABI: abi,
            functionName: "setGreeting",
            chainId: "avalanche",
        }

        const metadata: Metadata = {
            type: "action",
            icon: "https://your-domain.com/api/mini-app-image",
            title: "Hello, World!",
            description: "This is a mini app that greets the world.",
            actions: [action]
        };

        const metadataResponse: ValidatedMetadata = createMetadata(metadata);
        return NextResponse.json(metadataResponse, { status: 200 });
    } catch (error) {
        return NextResponse.json(error, { status: 500 });
    }
}
﻿
Save the file and start the development server:
http://localhost:3000/api/metadata
Deploying to Production
Deploy your projecr to Vercel﻿
One deployed, the metadata endpoint will be accesible at a URL like:
https://your-domain.vercel.app/api/metadata
Catching Errors
In the example we have implemented a try-catch to catch any run-time errors. You can create an  instance of all the errors﻿  that could occur during the execution of createMetadata. 
Testing Route
﻿
Updated 30 Nov 2024
Did this page help you?
Using TypeScript
Cloudflare Workers