興味ありつつもなかなか触る機会なかったので、睡眠時間と引き換えに触ってみるの回
環境構築
インストール
$ npx create-next-app sample-app // sample-app部分は任意
入力後に、TypeScriptやLintいるか聞かれるので、お好みで選択する
立ち上げてみる
作成したアプリのディレクトリに移動して、npm run devを実行
$ npm run dev
> sample-app@0.1.0 dev
> next dev --turbopack
▲ Next.js 15.3.4 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.11.12:3000
http://localhost:3000にアクセスすると、
シンプルでかっこよい。
とっても簡単だったのでDBの準備までやっちゃう
DBサーバの準備
公式チュートリアルを見ると、Vercelを使って PostgreSQL DBをセットアップしている。
が、
アカウント作んのめんどい...
gitにあげんのめんどい...
MySQLがいい...
ってことで、今回はdocker使ってDBサーバ用意します。
DBコンテナ作る
プロジェクトのルートに docker-compose.yaml ファイルを作成
中身こんな感じ
version: '3.8'
services:
db:
image: mysql:8.0
container_name: nextjs_mysql_db
restart: always
environment:
MYSQL_ROOT_PASSWORD: Password
MYSQL_DATABASE: nextjs_app_db
MYSQL_USER: user
MYSQL_PASSWORD: Password
ports:
- "3306:3306"
volumes:
- db_data:/var/lib/mysql
healthcheck:
test: ["CMD", "mysqladmin" ,"ping", "-h", "localhost"]
timeout: 20s
retries: 10
volumes:
db_data:
docker-compose up -d でDBサーバを起動。おわり。
サーバ動いてるか確認
$ docker exec -it nextjs_mysql_db mysql -u user -pPassword
で接続しようとしたところ、
ERROR 1045 (28000): Access denied for user 'user'@'localhost' (using password: YES)
とエラー吐かれたので、ユーザ作成と権限付与やりました。(もしかしたら、権限付与だけでもできたかも)
接続できてたら、Next.jsから接続 までスキップでOK
ユーザ作成、権限付与
$ docker exec -it nextjs_mysql_db mysql -u root -pPassword
rootユーザで接続する。
接続できたら、下記を順番に実行。
-- 1. まず、ユーザーが存在しないことを確認し、もし存在する場合は削除します。
-- これにより、古い権限設定が残るのを防ぎます。
DROP USER IF EXISTS 'user'@'localhost';
DROP USER IF EXISTS 'user'@'%';
-- 2. 新しいユーザー 'user'@'%' を作成し、パスワードを設定します。
-- '@'%' は任意のホストからの接続を許可することを意味します。
CREATE USER 'user'@'%' IDENTIFIED BY 'Password';
-- 3. 作成した 'user'@'%' に、nextjs_app_db データベースのすべての権限を付与します。
GRANT ALL PRIVILEGES ON nextjs_app_db.* TO 'user'@'%';
-- 4. 権限の変更をMySQLに即座に反映させます。
FLUSH PRIVILEGES;
-- （オプション）ユーザーが正しく作成され、権限が付与されたか確認します。
SELECT user, host FROM mysql.user WHERE user = 'user';
SHOW GRANTS FOR 'user'@'%';
実行後、下記コマンドで接続できるようになっていればOK
$ docker exec -it nextjs_mysql_db mysql -u user -pPassword
Next.jsから接続
環境変数設定
デフォで.envファイルないので作る。
一旦DBサーバ情報以外は何もいらないので、下記。
MYSQL_HOST=127.0.0.1
MYSQL_PORT=3306
MYSQL_USER=user
MYSQL_PASSWORD=Password
MYSQL_DATABASE=nextjs_app_db
疎通確認用のServer Componentの作成
import mysql from 'mysql2/promise';
export default async function CheckDbPage() {
let status = 'Checking MySQL...';
let message = '';
let error = null;
let connection;
try {
const dbConfig = {
host: process.env.MYSQL_HOST,
port: parseInt(process.env.MYSQL_PORT || '3306', 10),
user: process.env.MYSQL_USER,
password: process.env.MYSQL_PASSWORD,
database: process.env.MYSQL_DATABASE,
};
if (!dbConfig.host || !dbConfig.user || !dbConfig.password || !dbConfig.database) {
throw new Error('Database connection environment variables are not fully set.');
}
connection = await mysql.createConnection(dbConfig);
const [rows] = await connection.execute('SELECT 1+1 AS solution;');
if (Array.isArray(rows) && rows.length > 0 && (rows[0] as any).solution === 2) {
status = 'Success';
message = 'MySQL connection successful!';
} else {
status = 'Error';
message = 'MySQL responded unexpectedly.';
}
} catch (e: any) {
status = 'Error';
message = 'Failed to connect to MySQL.';
error = e.message;
console.error('MySQL connection failed:', e);
} finally {
if (connection) {
await connection.end();
}
}
return (
<div>
<h1>MySQL Connection Status</h1>
<p>Status: <strong>{status}</strong></p>
<p>Message: {message}</p>
{error && <p style={{ color: 'red' }}>Error: {error}</p>}
</div>
);
}
DBサーバに接続ができていて、クエリが問題なく実行できているかを確認します。
http://localhost:3000/check-dbにアクセスすると、
ってな感じで確認できました！
（ディレクトリ構造がそのままURLの構造になるのをここで知る。ルーティング書かなくていいんだ...!!）
終わり
DB接続にはちょっと苦戦したものの、割と準備はサクッと進められる印象。
まだ環境作っただけなので、次回以降でいろいろ触ってみる！！！