【Next.js】WebAPIのNextResponse,NextRequestでPOST通信を実施する

Posted at 2025-01-19

サンプル

ログイン画面でユーザー情報を入力して登録ボタンをクリックします。

データベースに未登録のユーザー(E-mailアドレスが被っていない　※以降で解説)はこのように登録できます。

一方、同じユーザを登録しようとするとサーバ側で検知してMessageやHTTPステータス、User情報をブラウザに返すように設計しています。

このようにアラート画面でユーザ被りをメッセージ表示します。

このようなサンプルを作っていきます。

Micro Soft Edgeでのブレークポイントの設置方法

react(Next.js)でのブレークポイントの設置方法についてもここで説明しておきます。

`F12`または開発ツールでを開きます

Netwokタグを開いて対象のリンクをクリックします。

すると、対象のコードが表j氏有れるのでここでブレークポイントを設置します。

今回使うNext.jsのバージョン

NextRequestとNextResponseとは

Web APIで使用されるライブラリです。
Next.jsではHTTPメソッド(GET,POST,PUT,DELETE)でサーバとの通信を行うときに使用されます。

ディレクトリ構造

Next.jsのプロジェクト構成です。

NextProject
└─ app
   ├─ admin
   │  └─ userRegister
   │     └─ page.tsx
   ├─ api
   │  └─ userRegister
   │     └─ route.ts
   ├─ components
   │  └─ headers
   │     └─ navbar
   │        └─ page.tsx
   ├─ prisma
   │  └─ schema.prisma
   ├─ next.config.ts
   ├─ package.json
   ├─ package.lock.json
   └─ tailwind.config.mjs

Next.js ver13以降Route Handlerについて

Next.js 13以降のapp/apiディレクトリでは、route.tsやroute.jsファイル内でHTTPメソッド（GET、POST、PUT、DELETEなど）を個別に定義することができます。
それぞれのメソッドに対して、対応する関数を作成することが必要です。

例えば、以下のように各HTTPメソッドに対して異なる関数を定義することができます。

また、プロジェクト作成時にApp Routerを使う場合はapi関連のフォルダやファイルはappディレクトリ直下に配置する必要があります↓。

理由は、Next.jsが特定のHTTPメソッド（GET、POST、PUT、DELETEなど）を処理するために、メソッド名を特定のものとして認識しているからです。

Next.js 13以降では、app/apiディレクトリ内でファイル内に定義する関数の名前として、**HTTPメソッド名（GET、POST、PUT、DELETE）**を指定する必要があります。
例えば、POSTメソッドを処理したい場合、その関数名は必ず export async function POST でなければなりません。

なぜHTTPメソッド名を使う必要があるか？

Next.jsは、GETやPOSTなどのHTTPメソッドに対応する関数を動的にルーティングする仕組みを提供しています。
これにより、同じroute.ts内で異なるHTTPメソッドに対する処理を分けることができます。
GETやPOSTといった名前はNext.jsがそのメソッドを特定するために使うため、関数名を自由に変更してしまうとその識別ができず、リクエストが処理されません。

結論

Next.js では、HTTPメソッド（GET, POST, PUT, DELETE）に対応する関数名を使う必要があります。

route.tsのディレクトリ

NextProject
└─ app
   ├─ admin
   │  └─ userRegister
   │     └─ page.tsx

サンプルコード

page.tsx

// app/api/userRegister/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(req: NextRequest) {
  // GETリクエストの処理
  return NextResponse.json({ message: "GETリクエストが成功しました！" });
}

export async function POST(req: NextRequest) {
  // POSTリクエストの処理
  const { userName, email, password } = await req.json();
  
  if (!userName || !email || !password) {
    return NextResponse.json({ error: "全てのフィールドを入力してください。" }, { status: 400 });
  }

  // ユーザー登録処理など
  return NextResponse.json({ message: "ユーザー登録が成功しました！" }, { status: 200 });
}

export async function PUT(req: NextRequest) {
  // PUTリクエストの処理
  return NextResponse.json({ message: "PUTリクエストが成功しました！" });
}

export async function DELETE(req: NextRequest) {
  // DELETEリクエストの処理
  return NextResponse.json({ message: "DELETEリクエストが成功しました！" });
}

登録画面の実装

さて、前置きが長くなりましたがさっそく実装していきましょう。

モデルスキーマの構造

PostgreSQLとの接続するためのモデルスキーマはこちらになります。

今回はUserを登録します。
ユニークキーには、emailに対して設定しています。
なので、登録画面でE-mailが同じだとサーバ側で弾かれます。

スキーマの構成

条件の整理

User と Order (1 対多)

1 人のユーザーが複数の注文を持つ関係。

Order と Item (1 対多または 1 対 1)

1 注文に対して、1 つまたは複数のアイテムが関連付けられる関係。

Item と Product (多対 1)

複数のアイテムが 1 つの製品に関連する関係。

schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User{
  userId Int @id @default(autoincrement())
  userName String
  email String @unique
  password String
  createdAt DateTime @default(now())

  orders   Order[]  // 1人のユーザーは複数の注文を持つ
}

model Product{
  productId Int @id @default(autoincrement())
  productName String
  description String
  productImagepath String
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now())

  items   Item[]   // 1つの製品は複数のアイテムに関連付けられる
}

model Item{
  itemId Int @id @default(autoincrement())
  quantity Int
  price Int
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now())

  orderId   Int      // Order と 1対多 のリレーション
  order     Order    @relation(fields: [orderId], references: [orderId])
  productId Int      // Product と 多対1 のリレーション
  product   Product  @relation(fields: [productId], references: [productId])
}

model Order{
  orderId Int @id @default(autoincrement())
  total Int
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now())

  userId    Int      // User と 1対多 のリレーション
  user      User     @relation(fields: [userId], references: [userId])
  items     Item[]   // 1つの注文には複数のアイテムが関連付けられる
}

bcrypyjsモジュールをインストール

パスワードハッシュ化のためのモジュールbcryptjsをインストールしましょう。

npm install bcryptjs

フロント画面の実装

登録画面を作っていきます。
WEB APIのNextResponseからの返却値をブラウザでも確認したいので、下記のように記載しています。

app/admin/useRegister/page.tsx

        const response = await fetch('/api/userRegister', {
            method: 'POST',
            headers:{
                'Content-Type': 'application/json',
                cache: 'no-store',
            },
            body:JSON.stringify({
                userName: data.userName,
                email: data.email,
                password: data.password,
            })
        });

        //レスポンスデータをJSON取得する
        const responseJson = await response.json();
        console.log(responseJson); 

        // レスポンスを確認する
        if (response.ok) {
            const result = await response.json();
            alert("ユーザー登録成功");
            console.log('ユーザー登録成功：', result);
        }

        if(response.status === 500){
            alert(responseJson.user.userName + 'は、' + responseJson.message);
        }

全体のコードはこちら↓