Next.js - Firecrawl Docs

Pré-requisitos#

Projeto em Next.js 14+ (App Router)
Uma chave de API do Firecrawl — obtenha uma grátis

Instale o SDK#

npm install firecrawl

Configure sua chave de API#

Adicione sua chave de API ao .env.local:

FIRECRAWL_API_KEY=fc-YOUR-API-KEY

Fazer uma busca na web#

O SDK deve ser executado apenas no servidor, pois requer sua chave de API.

Route Handler#

Crie 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);}

Ação de servidor#

Crie app/actions.ts para usar em Componentes de Cliente:

"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 }));}

Fazer o scraping de uma página#

Route Handler#

Crie 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);}

Componente de Servidor#

Busque dados diretamente em um Componente de Servidor, em 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>  );}

Interaja com uma página#

Use o recurso interagir para controlar uma sessão ativa do navegador — clique em botões, preencha formulários e extraia conteúdo dinâmico.

Route Handler#

Crie 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 });}

Próximos passos#

Documentação de scraping

Todas as opções de scraping, incluindo formatos, ações e proxies

Documentação de busca

Busque na web e obtenha o conteúdo completo da página

Documentação de interagir

Clique, preencha formulários e extraia conteúdo dinâmico

Referência do SDK de Node

Referência completa do SDK com rastreamento, mapeamento, extração em lote e muito mais