> ## Documentation Index
> Fetch the complete documentation index at: https://jigsaw-13.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

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

<Card title="Models" href="/docs/api-reference/authentication">
  Explore our complete list of models and API references here.
</Card>

## Prerequisites

Before you begin, make sure you have:

* Created a [JigsawStack account](https://jigsawstack.com/dashboard)
* Retrieved your [API key](https://jigsawstack.com/dashboard)
* 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:

<CodeGroup>
  ```bash npm theme={null}
  npm install jigsawstack
  ```

  ```bash yarn theme={null}
  yarn add jigsawstack
  ```

  ```bash pnpm theme={null}
  pnpm add jigsawstack
  ```
</CodeGroup>

## Configuration

### Setting up environment variables

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

```bash .env.local theme={null}
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:

```javascript pages/api/web-search.ts theme={null}
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.

```javascript components/WebSearchButton.jsx theme={null}
"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:

```javascript app/api/web-search/route.ts theme={null}
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.