# Next.js (/fr/quickstarts/nextjs)
Related: [Node.js](/fr/quickstarts/nodejs.md), [Express](/fr/quickstarts/express.md), [NestJS](/fr/quickstarts/nestjs.md), [Fastify](/fr/quickstarts/fastify.md), [Hono](/fr/quickstarts/hono.md), [Bun](/fr/quickstarts/bun.md)
## Prérequis [#prérequis]
* Un projet Next.js 14+ (App Router)
* Une clé API Firecrawl — [obtenez-en une gratuitement](https://www.firecrawl.dev/app/api-keys)
## Installer le SDK [#installer-le-sdk]
```bash
npm install firecrawl
```
## Définissez votre clé API [#définissez-votre-clé-api]
Ajoutez votre clé API à `.env.local` :
```bash
FIRECRAWL_API_KEY=fc-YOUR-API-KEY
```
## Rechercher sur le Web [#rechercher-sur-le-web]
Le SDK doit s’exécuter uniquement côté serveur, car il nécessite votre clé API.
### Route Handler [#route-handler]
Créez `app/api/search/route.ts` :
```typescript
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 [#action-serveur]
Créez `app/actions.ts` pour l’utiliser dans les composants clients :
```typescript
"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 [#scraper-une-page]
### Route Handler [#route-handler-1]
Créez `app/api/scrape/route.ts` :
```typescript
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 [#composant-serveur]
Récupérez directement les données dans un composant serveur, dans `app/page.tsx` :
```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 (
Scraped Content
{result.markdown}
);
}
```
## Interact avec une page [#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 [#route-handler-2]
Créez `app/api/interact/route.ts` :
```typescript
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 [#étapes-suivantes]
Toutes les options de scrape, y compris les formats, les actions et les proxies
Effectuez une recherche sur le web et obtenez le contenu complet de la page
Cliquez, remplissez des formulaires et extrayez du contenu dynamique
Référence complète du SDK avec crawl, cartographie, extraction par lot et plus encore