駆け出しReactフロントエンジニアが流行りのNext.jsを使って生成AIチャットアプリを作ってみた！

import { backendApiGet } from '@/*バックエンドAPI処理の実装先*';
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  const { id } = params;

  try {
    const res = await backendApiGet({
      history_id: id,
    });

    // 成功時
    if (res.status === 200 && res.data) {
      return NextResponse.json(res.data,
      {
        status: 200
      });

      // 失敗時
    　// エラーハンドリング処理の一例
    　// バックエンドで定義されたエラーが4xx系の場合
    } else if (res.status >= 400 && res.status < 500) {
      return NextResponse.json(
        { error: "バックエンドから取得したエラーメッセージ" },
        { status: res.status },
      );
    }
    // その他のエラー
    // エラーハンドリング処理
    // ...
  } catch (e) {
    // エラーハンドリング処理
    // ...
  }
}

try {
  const res = await fetch(`/api/history/detail/${id}`);
  if (res.status === 200) {
    const data = await res.json();
    // エラーハンドリング処理の一例
    // バックエンドで定義されたエラーが4xx系の場合
  } else if (res.status >= 400 && res.status < 500) {
    const data = await res.json();
    // エラーハンドリング処理
    // ...
  } else {
    // エラーハンドリング処理
    // ...
  }
} catch (error) {
  // エラーハンドリング処理
  // ...
}

import { backendApiPost } from '@/*バックエンドAPI処理の実装先*';
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
 

// バックエンドから取得したStreamデータの加工処理
const processStream = async (
  body: { question: string },
  onStreamChunk: (question: string) => void,
  onStreamEnd: () => void,
  onError: (status: number, error: string) => void,
) => {
  try {
    const res = await backendApiPost({
      body,
    });

    // 成功時
    if (res.status === 200 && 'data' in res && res.data) {
      const reader = res.data.getReader();
      const decoder = new TextDecoder();

      // バックエンドから取得したストリーミングデータの再整形処理
      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) {
            break;
          }

          const decodedValue = decoder.decode(value);
          const lines = decodedValue
            .split('data: ')
            .map((line) => line.trim())
            .filter((line) => line !== '');
          lines.forEach((chunk) => {
            onStreamChunk(chunk);
          });
        }
      } finally {
        reader.releaseLock();
      }
      onStreamEnd();
      return;
    }

    // 失敗時
    // エラーハンドリング処理の一例
    // バックエンドで定義されたエラーが4xx系の場合
    if (res.status >= 400 && res.status < 500 && 'error' in res) {
      onError(
        res.status,
        res.error?.detail
      );
      return;
    }

    // その他のエラー
    // エラーハンドリング処理
    // ...

  } catch (error) {
    // エラーハンドリング処理
    // ...
  }
};

export async function POST(request: NextRequest) {
  const body: { question: string } = await request.json();

  // Stream処理の設定
  const encoder = new TextEncoder();
  const responseStream = new TransformStream();
  const writer = responseStream.writable.getWriter();

  // エラー発生時に使用する変数
  let isWriterClosed = false;
  let errorStatus = 500;
  let errorMessage = '';

  // Stream処理中にWriterを安全にクローズするための処理
  function safeCloseWriter() {
    if (!isWriterClosed) {
      writer.close();
      isWriterClosed = true;
    }
  }

  // エラー発生を検知するための処理
  let errorPromiseResolve: (value: boolean | PromiseLike<boolean>) => void;
  const errorPromise = new Promise<boolean>((resolve) => {
    errorPromiseResolve = resolve;
  });
  async function handleStreamError(error: boolean) {
    errorPromiseResolve(error);
  }
 

  // Stream加工処理
  processStream(
    body as { question: string },
    (answer) => {
      writer.write(encoder.encode(`data: ${answer}\n\n`));
    },
    () => {
      safeCloseWriter();
    },
    (status, error) => {
      errorStatus = status;
      errorMessage = error;
      safeCloseWriter();
      handleStreamError(true); // エラー時の完了処理
    },
  );
 

  // エラー判定を待って、それぞれのレスポンス形式でデータを返却
  const errorOccurred = await errorPromise;
 

  // エラーの場合、通常のレスポンスを返却
  if (errorOccurred) {
    return new NextResponse(
      JSON.stringify({
        message: errorMessage,
      }),
      {
        status: errorStatus,
        headers: {
          'Content-Type': 'application/json',
        },
      },
    );
  } else {
    // 通常の場合、ストリーミングレスポンスを返却
    return new NextResponse(responseStream.readable, {
      headers: {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        Connection: 'keep-alive',
        'Content-Encoding': 'none',
      },
    });
  }
}

try {
  const res = await fetch('/api/question-stream', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ question: message }),
  });

  // 成功時
  if (res.status === 200) {
    const reader = res.body?.getReader();
    if (!reader) return;

    const decoder = new TextDecoder();

    // Streamデータの加工処理
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      if (!value) continue;

      const lines = decoder.decode(value);
      const dataArray = lines
        .split('\n')
        .filter((line) => line.startsWith('data: '));

      dataArray.forEach((dataLine) => {
        const obj = dataLine.replace('data: ', '').trim();
        const data = JSON.parse(obj);
        // データハンドリング処理
        // ...
      });
    }

    // 失敗時
    // エラーハンドリング処理の一例
    // バックエンドで定義されたエラーが4xx系の場合
  } else if (res?.status >= 400 && res?.status < 500) {
    const data = await res.json();
    // エラーハンドリング処理
    // ...
  }
} catch (error) {
   // エラーハンドリング処理
   // ...
}

'use server';

import { backendApiGet } from '@/*バックエンドAPI処理の実装先*';

export async function historyDetailFetchAction(id: string) {
  try {
    const res = await backendApiGet({
      history_id: id,
    });

    // 成功時
    if (res.status === 200 && res.data) {
      return {
        historyDetail: res.data
      }

    // 失敗時
    // エラーハンドリング処理の一例
    // バックエンドで定義されたエラーが4xx系の場合
    } else if (res.status >= 400 && res.status < 500) {
      return {
        message: "バックエンドから取得したエラーメッセージ",
      };
    }

    // その他のエラー
    // エラーハンドリング処理
    // ...
  } catch (error) {
    // エラーハンドリング処理
    // ...
  }
}

try {
  const res = await historyDetailFetchAction(id);
  if (res.status === 200) {
      const data = await res.json();
  } else if (res.status >= 400 && res.status < 500) {
      // エラーハンドリング処理
      // ...
} catch (error) {
      // エラーハンドリング処理
      // ...
}