Next.js 13.2のバージョンアップに伴い、発生したエラー

今回は、page.tsxからのfetchによるPOSTリクエストをサーバー側のroute.tsで処理する際に発生したエラーについて、その解決方法を説明します。

階層図

app
├── api
│   └── register
│       └── route.ts
└── page.tsx

app/page.tsx

import { useState } from 'react';
import axios from 'axios';

export default function Register() {
    const [email, setEmail] = useState('');
    const [name, setName] = useState('');
    const [message, setMessage] = useState('');

    const handleSubmit = async (event) => {
        event.preventDefault();
        setMessage('');

        try {
            const response = await axios.post('/api/register', { email, name });
            setMessage('User registered successfully!');
        } catch (error) {
            if (error.response) {
                setMessage(error.response.data.message);
            } else {
                setMessage('An unexpected error occurred');
            }
        }
    };

    return (
        <div className="register-form">
            <h1>Register</h1>
            <form onSubmit={handleSubmit}>
                <div>
                    <label>Email:</label>
                    <input
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label>Name:</label>
                    <input
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />
                </div>
                <button type="submit">登録</button>
            </form>
            {message && <p>{message}</p>}
        </div>
    );
}

api/register/route.ts

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export default async function register(req, res) {
    if (req.method !== 'POST') {
        return res.status(405).json({ message: 'Method not allowed' });
    }

    const { email, name } = req.body;

    // 入力値のバリデーション
    if (!email || typeof email !== 'string') {
        return res.status(400).json({ message: 'Email is required and must be a string' });
    }
    if (name && typeof name !== 'string') {
        return res.status(400).json({ message: 'Name must be a string if provided' });
    }

    try {
        // ユーザーの作成
        const user = await prisma.user.create({
            data: {
                email,
                name,
            },
        });

        return res.status(201).json(user);
    } catch (error) {
        console.error('Error creating user:', error);
        if (error.code === 'P2002' && error.meta.target.includes('email')) {
            return res.status(409).json({ message: 'Email already exists' });
        }
        return res.status(500).json({ message: 'Internal Server Error' });
    }
}

・発生したエラー（登録ボタンを押したとき）

⨯ Detected default export in '/app/app/api/register/route.ts'. Export a named export for each HTTP method instead.
 ⨯ No HTTP methods exported in '/app/app/api/register/route.ts'. Export a named export for each HTTP method

Next.js 13.2への移行ガイドとエラー解決方法

エラー解決方法

Next.js 13.2以降では、export default async function handlerの形式ではなく、HTTPメソッドごとに名前付きエクスポートを使用する必要があります。（GET, POST, PUTなど）今回の例では、POSTを使用します。

export async function POST(req: NextRequest) {
}

その他、Next.js 13.2への移行に伴う変更点

・APIルートを設定するときのルール
Next.jsのAPIルート機能が拡張されました。APIルートはapp/apiディレクトリ内に配置され、各ファイルが独自のエンドポイントとして機能します。
・route.js(ts)ファイルは必ず、apiフォルダに配置します。

app
├── api
│   └── route.js
├── page.js
└── [user]
    └── page.js

・Route Handlersでのレスポンス処理とNextResponseの使用方法
Route Handlersでは、第一引数にNextRequestのみ受け取り、レスポンスは「next/server」からimportしたNextResponseを直接使います。
Route Handlersでは、NextResponse型のオブジェクトを明示的にreturnすることで、レスポンスを返す。例示のNextResponse.json()も、NextResponse型のオブジェクトを返します。

・公式ドキュメント
https://ja.next-community-docs.dev/docs/app-router/building-your-application/routing/route-handlers

修正したソース

・訂正後
app/page.tsx

"use client"

import { useState } from 'react';
import axios from 'axios';

export default function Register() {
    const [email, setEmail] = useState('');
    const [name, setName] = useState('');
    const [message, setMessage] = useState('');

    const handleSubmit = async (event) => {
        event.preventDefault();
        setMessage('');

        try {
            const response = await axios.post('/api/register', { email, name });
            setMessage('User registered successfully!');
        } catch (error) {
            if (error.response) {
                setMessage(error.response.data.message);
            } else {
                setMessage('An unexpected error occurred');
            }
        }
    };

    return (
        <div className="register-form">
            <h1>Register</h1>
            <form onSubmit={handleSubmit}>
                <div>
                    <label>Email:</label>
                    <input
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label>Name:</label>
                    <input
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />
                </div>
                <button type="submit">Register</button>
            </form>
            {message && <p>{message}</p>}
        </div>
    );
}

api/register/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function POST(req: NextRequest) {
  const { email, name } = await req.json();

  // 入力値のバリデーション
  if (!email || typeof email !== 'string') {
    return NextResponse.json({ message: 'Email is required and must be a string' }, { status: 400 });
  }
  if (name && typeof name !== 'string') {
    return NextResponse.json({ message: 'Name must be a string if provided' }, { status: 400 });
  }

  try {
    // ユーザーの作成
    const user = await prisma.user.create({
      data: {
        email,
        name,
      },
    });

    return NextResponse.json(user, { status: 201 });
  } catch (error) {
    console.error('Error creating user:', error);
    if (error.code === 'P2002' && error.meta.target.includes('email')) {
      return NextResponse.json({ message: 'Email already exists' }, { status: 409 });
    }
    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
  }
}

まとめ

Next.jsはバージョンアップに伴い、記述方法も変更されることがあります。そのため、最新のバージョンに合わせたコードの書き方を適宜適用する必要があります。バージョンアップに伴う変更点や新しいルールを把握し、コードを適切に修正することが重要です。