Next.js

Learn how to integrate JigsawStack with Next.js to build AI-powered applications

Models

Explore our complete list of models and API references here.

Prerequisites

Before you begin, make sure you have:

• Created a JigsawStack account
• Retrieved your API key
• Installed Node.js (version 18.10.0 or higher)
• Set up a Next.js project

Installation

Add the JigsawStack SDK to your Next.js project:

npm

npm install jigsawstack

Configuration

Setting up environment variables

1. Create or modify your .env.local file in the root of your Next.js project:

.env.local

JIGSAWSTACK_API_KEY='your-api-key'

2. For production, make sure to add the environment variable to your deployment platform (Vercel, Netlify, etc.)

API Route Implementation

JigsawStack can be easily integrated into Next.js API routes. Here’s an example of a web-search API endpoint:

pages/api/web-search.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { JigsawStack } from "jigsawstack";

const jigsawstack = JigsawStack(); // API key will be read from environment

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const result = await jigsawstack.web.search({
      query: "What is the capital of France?",
    });

    res.status(200).json({
      results: result.results,
    });
    console.log(result);
  } catch (error) {
    return res.status(400).json(error);
  }
};

Client-Side Implementation

For client components that need to use JigsawStack, you should make requests through your API routes rather than directly from the client to protect your API key.

components/WebSearchButton.jsx

"use client";
import { useState } from "react";

export default function WebSearchButton() {
  const [loading, setLoading] = useState(false);

  const handleWebSearch = async () => {
    setLoading(true);
    try {
      const response = await fetch("/api/web-search");
      const data = await response.json();
      
      if (data.results) {
        // Handle successful response
        console.log("Web search results:", data.results);
      }

    } catch (error) {
      console.error("Error searching web:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <button 
      onClick={handleWebSearch}
      disabled={loading}
      className="px-4 py-2 bg-blue-500 text-white rounded"
    >
      {loading ? "Searching..." : "Search Web"}
    </button>
  );
}

App Router Support

If you’re using Next.js App Router, you can create a route handler:

app/api/web-search/route.ts

import { NextResponse } from "next/server";
import { JigsawStack } from "jigsawstack";

const jigsawstack = JigsawStack();

export async function POST(request) {
  try {
    const { text } = await request.json();
    
    const result = await jigsawstack.web.search({
      query: text || "What is the capital of France?",
    });

    return NextResponse.json({ results: result.results });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 400 });
  }
}

JigsawStack seamlessly integrates with Next.js to provide powerful AI capabilities while maintaining best practices for security and performance.