Next.js - Firecrawl Docs

Prérequis#

Un projet Next.js 14+ (App Router)
Une clé API Firecrawl — obtenez-en une gratuitement

Installer le SDK#

npm install firecrawl

Définissez votre clé API#

Ajoutez votre clé API à .env.local :

FIRECRAWL_API_KEY=fc-YOUR-API-KEY

Rechercher sur le Web#

Le SDK doit s’exécuter uniquement côté serveur, car il nécessite votre clé API.

Route Handler#

Créez 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);}

Action serveur#

Créez app/actions.ts pour l’utiliser dans les composants clients :

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

Scraper une page#

Route Handler#

Créez 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);}

Composant serveur#

Récupérez directement les données dans un composant serveur, dans 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 avec une page#

Utilisez Interact pour contrôler une session de navigateur active — cliquez sur des boutons, remplissez des formulaires et extrayez du contenu dynamique.

Route Handler#

Créez 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 });}

Étapes suivantes#

Documentation Scrape

Toutes les options de scrape, y compris les formats, les actions et les proxies

Documentation Search

Effectuez une recherche sur le web et obtenez le contenu complet de la page

Documentation Interact

Cliquez, remplissez des formulaires et extrayez du contenu dynamique

Référence du SDK Node

Référence complète du SDK avec crawl, cartographie, extraction par lot et plus encore