Next.js - Firecrawl Docs

前提条件#

Next.js 14+ のプロジェクト (App Router)
Firecrawl APIキー — 無料で取得できます

SDKをインストール#

npm install firecrawl

APIキーを設定する#

.env.local にAPIキーを追加します：

FIRECRAWL_API_KEY=fc-YOUR-API-KEY

ウェブを検索#

SDKはAPIキーが必要なため、サーバーサイドでのみ実行する必要があります。

ルートハンドラー#

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

サーバーアクション#

Client Components から利用するために、app/actions.ts を作成します。

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

ページをスクレイピングする#

ルートハンドラー#

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#

app/page.tsx のServer Componentで直接データを取得します。

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 を使う#

Interact を使うと、ライブのブラウザセッションを操作して、ボタンのクリック、フォームへの入力、動的コンテンツの抽出を行えます。

ルートハンドラー#

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

次のステップ#

スクレイピングドキュメント

フォーマット、アクション、プロキシを含むスクレイピングの全オプション

Search ドキュメント

Webを検索し、ページ全体のコンテンツを取得

Interact ドキュメント

クリックやフォーム入力を行い、動的コンテンツを抽出

Node SDK リファレンス

クロール、map、バッチスクレイプなどを含む完全なSDKリファレンス