Next.js - Firecrawl Docs

Prerequisites#

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

Install the SDK#

npm install firecrawl

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 "firecrawl";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 "firecrawl";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 "firecrawl";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 "firecrawl";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 "firecrawl";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