Next.js

Use Firecrawl with Next.js to scrape, search, and interact with web data in your React application.

Prerequisites

• Next.js 14+ project (App Router)
• A Firecrawl API key, get one free

Install the SDK

npm install @mendable/firecrawl-js

Set your API key

Add your API key to .env.local:

FIRECRAWL_API_KEY=fc-YOUR-API-KEY

Search the web

The SDK should only run server-side since it requires your API key.

Route Handler

Create app/api/search/route.ts:

import { NextResponse } from "next/server";
import Firecrawl from "@mendable/firecrawl-js";

const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });

export async function POST(request: Request) {
const { query } = await request.json();
const results = await firecrawl.search(query, { limit: 5 });

return NextResponse.json(results);
}

Server Action

Create app/actions.ts for use from Client Components:

"use server";

import Firecrawl from "@mendable/firecrawl-js";

const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });

export async function searchWeb(query: string) {
const results = await firecrawl.search(query, { limit: 5 });
return (results.web || []).map((r) => ({ title: r.title, url: r.url }));
}

Scrape a page

Route Handler

Create app/api/scrape/route.ts:

import { NextResponse } from "next/server";
import Firecrawl from "@mendable/firecrawl-js";

const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });

export async function POST(request: Request) {
const { url } = await request.json();
const result = await firecrawl.scrape(url);

return NextResponse.json(result);
}

Server Component

Fetch data directly in a Server Component at app/page.tsx:

import Firecrawl from "@mendable/firecrawl-js";

const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });

export default async function Page() {
const result = await firecrawl.scrape("https://example.com");

return (
  <article>
    <h1>Scraped Content</h1>
    <pre>{result.markdown}</pre>
  </article>
);
}

Interact with a page

Use interact to control a live browser session, click buttons, fill forms, and extract dynamic content.

Route Handler

Create app/api/interact/route.ts:

import { NextResponse } from "next/server";
import Firecrawl from "@mendable/firecrawl-js";

const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });

export async function POST(request: Request) {
const { url, prompts } = await request.json();

const result = await firecrawl.scrape(url, { formats: ['markdown'] });
const scrapeId = result.metadata?.scrapeId;

await firecrawl.interact(scrapeId, { prompt: 'Search for iPhone 16 Pro Max' });
const response = await firecrawl.interact(scrapeId, { prompt: 'Click on the first result and tell me the price' });

await firecrawl.stopInteraction(scrapeId);

return NextResponse.json({ output: response.output });
}

Next steps

Scrape docs

All scrape options including formats, actions, and proxies

Search docs

Search the web and get full page content

Interact docs

Click, fill forms, and extract dynamic content

Node SDK reference

Full SDK reference with crawl, map, batch scrape, and more