# Next.js (/ja/quickstarts/nextjs)
Related: [Node.js](/ja/quickstarts/nodejs.md), [Express](/ja/quickstarts/express.md), [NestJS](/ja/quickstarts/nestjs.md), [Fastify](/ja/quickstarts/fastify.md), [Hono](/ja/quickstarts/hono.md), [Bun](/ja/quickstarts/bun.md)
## 前提条件 [#前提条件]
* Next.js 14+ のプロジェクト (App Router)
* Firecrawl APIキー — [無料で取得できます](https://www.firecrawl.dev/app/api-keys)
## SDKをインストール [#sdkをインストール]
```bash
npm install firecrawl
```
## APIキーを設定する [#apiキーを設定する]
`.env.local` にAPIキーを追加します：
```bash
FIRECRAWL_API_KEY=fc-YOUR-API-KEY
```
## ウェブを検索 [#ウェブを検索]
SDKはAPIキーが必要なため、サーバーサイドでのみ実行する必要があります。
### ルートハンドラー [#ルートハンドラー]
`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);
}
```
### サーバーアクション [#サーバーアクション]
Client Components から利用するために、`app/actions.ts` を作成します。
```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 }));
}
```
## ページをスクレイピングする [#ページをスクレイピングする]
### ルートハンドラー [#ルートハンドラー-1]
`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);
}
```
### Server Component [#server-component]
`app/page.tsx` のServer Componentで直接データを取得します。
```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 を使う [#ページで-interact-を使う]
Interact を使うと、ライブのブラウザセッションを操作して、ボタンのクリック、フォームへの入力、動的コンテンツの抽出を行えます。
### ルートハンドラー [#ルートハンドラー-2]
`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 });
}
```
## 次のステップ [#次のステップ]
フォーマット、アクション、プロキシを含むスクレイピングの全オプション
Webを検索し、ページ全体のコンテンツを取得
クリックやフォーム入力を行い、動的コンテンツを抽出
クロール、map、バッチスクレイプなどを含む完全なSDKリファレンス