Next.js
Utilisez Firecrawl avec Next.js pour extraire, rechercher et interagir avec des données web dans votre application React.
- Un projet Next.js 14+ (App Router)
- Une clé API Firecrawl — obtenez-en une gratuitement
npm install firecrawlAjoutez votre clé API à .env.local :
FIRECRAWL_API_KEY=fc-YOUR-API-KEYLe SDK doit s’exécuter uniquement côté serveur, car il nécessite votre clé API.
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);
}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 }));
}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);
}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>
);
}Utilisez Interact pour contrôler une session de navigateur active — cliquez sur des boutons, remplissez des formulaires et extrayez du contenu dynamique.
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 });
}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