🙆‍♀️

Next.jsでDBにデータを登録する(MySQL)

2023/08/27に公開

Next.js

TypeScript

tech

登録します。こちらの記事を参考にさせていただきました。

やりたいこと

・Next.jsで入力画面の作成
・画面上で名前を入れて送信ボタンを押下してPOSTリクエストを送る
・POSTリクエストを受けてBODYをパースしてDBにデータを登録する

DBの設定

使いまわせる共通の設定ファイルを1つ作り、そこに接続先など設定を集約する

db.ts

import { NextResponse } from 'next/server';
import * as mysql from 'promise-mysql';

const dbsetting =  {
    host: 'localhost',
    port: 3306,
    database: 'database',
    user: 'user',
    password: 'password'
}

export async function Dbquery(sql: string) {
    const connection = await mysql.createConnection({
        host: dbsetting.host,
        port: dbsetting.port,
        database: dbsetting.database,
        user: dbsetting.user,
        password: dbsetting.password,
    });
    const result = await connection.query(sql);
    connection.end();
    return result;
}

画面の設定

user.tsx

"use client"
import { useState } from 'react'

export default function Home() {
  const [name, setName] = useState('')
  const [postedData, setPostedData] = useState('')

  const onChangeHandler = (e:any) => {
    setName(e.target.value)
  }

  const onSubmitHandler = async (e:any) => {
    e.preventDefault()

    const res = await fetch('/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ name }),
    })

    const data = await res.json()
    setPostedData(data.body)
  }
  return (
    <main>
      <h1>Next JS APIのテスト</h1>
      <form onSubmit={onSubmitHandler} className='flex flex-col justify-center' action='/api/users' method='POST'>
          <input value={name} onChange={onChangeHandler} type='text' name='name' placeholder='名前' />
          <button type='submit'>送信</button>
        </form>
    </main>
  )
}

リクエストの受け取り

リクエストを受け取りJSONの形にパースしてDBに登録します。ユーザーを一意に特定するUUIDも併せて採番します

users.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import { randomUUID } from "crypto";
 
import { NextResponse } from 'next/server';
import { Dbquery } from '../../db';

export default function handler(req:NextApiRequest, res:NextApiResponse) {
    if (req.method === 'POST') {
        const reqbody = JSON.parse(JSON.stringify(req.body));
        res.status(200).json(Dbquery(
            "insert into users (uuid, oauthid, vender, created_at) values ('"
             + randomUUID() + "', '" 
             + "', '" 
             + "1'," 
             + "now());"));
    }
}

画面からリクエストを送付してDBにデータ登録することができました。本来Next.jsはフロントエンドのフレームワークだと思っているのでゴリゴリサーバーサイドを書くのもどうか、、、と思っていましたが、画面〜サーバサイドを同じ言語で扱えるのは素晴らしいですね。今回はSQLを文字列で書いていますが、使いやすいORマッパーもあるようなので、調べながら使っていきたい。

やりたいこと

DBの設定

画面の設定

リクエストの受け取り

Discussion