Next.jsのAPI返答を確認するコンポーネント

なにこれ

Next.jsのAPIをとりあえずテストしたいってときに使えるコンポーネントです。
毎回作るのめんどくさいのでこの辺に置いておきます。
Axiosを使用しています。
他、APIのリンクやpostの中身などは適宜置き換えてください。

コンポーネント

どっかにこのコンポーネントを配置し、page.tsx内で使用してください。

import { useState, ChangeEvent, FormEvent } from 'react';
import axios from 'axios';

export default function APITester() {
    const [username, setUsername] = useState<string>('');
    const [response, setResponse] = useState<string>('');

    const handleSubmit = async (e: FormEvent) => {
        e.preventDefault();
        try {
            const res = await axios.post('http://localhost:3000/api/myapi', { username });
            setResponse(res.data.message);
        } catch (error) {
            console.error('Error submitting form', error);
        }
    };

    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        setUsername(e.target.value);
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={username}
                    onChange={handleChange}
                    placeholder="Enter username"
                />
                <button type="submit">Submit</button>
            </form>
            {response && <p>Response: {response}</p>}
        </div>
    );
}

おまけ(route.tsのテンプレ)

何処のサイトもそれなりに作りこんでるめんどいのしかないので、
サクッとしたものが欲しい人は取っていってください。

投げられたusernameにhelloの文字列を足して返すだけのものです
例：aaa -> aaahello

import {NextRequest, NextResponse} from "next/server";

export async function POST(req: NextRequest) {
    const { username } = await req.json();
    const response = `${username}hello`;
    return NextResponse.json({ message: response });
}