Next.jsでAPIを構築する

npx create-next-app@latest --api

app
└── api
    └── users
        └── route.ts

export async function GET(request: Request) {
  // 例えば、ここでDBからデータをフェッチ
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ];
  return new Response(JSON.stringify(users), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
}
 
export async function POST(request: Request) {
  // リクエストボディを解析
  const body = await request.json();
  const { name } = body;
 
  // 例: DBに新しいユーザーを挿入
  const newUser = { id: Date.now(), name };
 
  return new Response(JSON.stringify(newUser), {
    status: 201,
    headers: { 'Content-Type': 'application/json' }
  });
}

import { NextRequest } from 'next/server';
 
export function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const query = searchParams.get('query'); // 例: `/api/search?query=hello`
 
  return new Response(
    JSON.stringify({ result: `検索クエリ: ${query}` }),
    {
      headers: { 'Content-Type': 'application/json' },
    },
  );
}

import { NextRequest } from 'next/server';
import { cookies, headers } from 'next/headers';
 
export async function GET(request: NextRequest) {
  // 1. 'next/headers'ヘルパーの使用
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  const headersList = await headers();
  const referer = headersList.get('referer');
 
  // 2. 標準Web APIの使用
  const userAgent = request.headers.get('user-agent');
 
  return new Response(JSON.stringify({ token, referer, userAgent }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

app
└── api
    └── users
        └── [id]
            └── route.ts

import { NextRequest } from 'next/server';
 
export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> },
) {
  const id = (await params).id;
  // 例: ID `id` のユーザーをDBからクエリ
  return new Response(JSON.stringify({ id, name: `ユーザー ${id}` }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  });
}
 
export async function DELETE(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> },
) {
  const id = (await params).id;
  // 例: DBからID `id` のユーザーを削除
  return new Response(null, { status: 204 });
}

import { NextRequest } from 'next/server';
 
export async function GET(request: NextRequest) {
  const response = await fetch('https://example.com/api/data', {
    // オプション: ヘッダーの転送、認証トークンの追加など
    headers: { Authorization: `Bearer ${process.env.API_TOKEN}` },
  });
 
  // レスポンスを変換または転送
  const data = await response.json();
  const transformed = { ...data, source: 'nextjs経由でプロキシ' };
 
  return new Response(JSON.stringify(transformed), {
    headers: { 'Content-Type': 'application/json' },
  });
}

import { NextRequest } from 'next/server';
 
type Handler = (req: NextRequest, context?: any) => Promise<Response>;
 
export function withAuth(handler: Handler): Handler {
  return async (req, context) => {
    const token = req.cookies.get('token')?.value;
    if (!token) {
      return new Response(JSON.stringify({ error: '認証されていません' }), {
        status: 401,
        headers: { 'Content-Type': 'application/json' },
      });
    }
 
    // 認証済みの場合、元のハンドラーを呼び出し
    return handler(req, context);
  };
}

import { NextRequest } from 'next/server';
import { withAuth } from '@/lib/with-auth';
 
async function secretGET(request: NextRequest) {
  return new Response(JSON.stringify({ secret: 'ここにドラゴンがいます' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}
 
export const GET = withAuth(secretGET);

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  output: 'export',
};
 
export default nextConfig;

// (Server Component)
export default async function UsersPage() {
  // このfetchはサーバー上で実行されます（クライアントサイドのコードは不要）
  const res = await fetch('https://api.example.com/users');
  const data = await res.json();
 
  return (
    <main>
      <h1>ユーザー一覧</h1>
      <ul>
        {data.map((user: any) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}