🦁

Next.jsからMySQLに接続する

2023/08/19に公開

MySQL

Next.js

TypeScript

tech

Next.jsからMySQLに接続します。

こちらの記事を参考にさせていだきました
【Node.js】DockerでNext.js+MySQL

やりたいこと

・DockerでMySQLを動かす
・Next.js(Node)からMySQLに接続する
・APIにGETリクエストを送り、DBのテーブルからデータを抽出して返す

DBの準備

MySQLは　Dockerで適当に動かす

docker-compose.yml

services:
  db:
    image: mysql:5.7.41
    platform: linux/amd64
    command: 'mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci'
    container_name: dbcontainer
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=rootpass
      - MYSQL_USER=nextjstest
      - MYSQL_PASSWORD=testpass
      - MYSQL_DATABASE=nextest
    expose:
      - 3306
    ports:
      - 3306:3306
volumes:

Dockerを起動して、テスト用のテーブルを作成する

$ docker-compose up
$ mysqlsh -u nextjstest -h 127.0.0.1 -p
MySQL> CREATE TABLE IF NOT EXISTS users (
		id int(11) PRIMARY KEY AUTO_INCREMENT,
		uuid VARCHAR(36) NOT NULL UNIQUE,
		oauthid VARCHAR(36),
		vender int(11),
		created_at DATETIME);

Next.js側でDB接続の準備をする

ネット上で検索して出たパッケージを導入する

$ npm install promise-mysql

Node側のTypeScript

app/api/user/route.ts

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

export async function GET() {
  const connection = await mysql.createConnection({
    host: 'localhost',
    port: 3306,
    database: 'nextest',
    user: 'nextjstest',
    password: 'testpass'
  });

  const sql = 'SELECT * FROM users';
  const result = await connection.query(sql);
  connection.end();

  return NextResponse.json(result);
}

テーブルに数列データを投入してアプリを動かして
投入したデータをJSONの形で抽出できました

[
{"id":1,"uuid":"46cf659e-e0fc-11ed-8e2f-22981bf802c6","oauthid":"","vender":0,"created_at":"2023-04-22T01:56:04.000Z",},
{"id":2,"uuid":"8b7c9ba8-e0fc-11ed-8485-22981bf802c6","oauthid":"109172238642240071977","vender":1,"created_at":"2023-04-22T01:57:59.000Z",},
{"id":3,"uuid":"37b64050-e705-11ed-bb83-22981bf802c5","oauthid":"107136224978590672033","vender":1,"created_at":"2023-04-29T18:15:11.000Z",}
]

DBの接続と抽出に関しては一通り確認できました。DBの接続設定の共通化やエラーハンドルなど踏まえたテストは後ほど標準なども調査しながら身につけていきたい。

やりたいこと

DBの準備

Next.js側でDB接続の準備をする

Discussion