メサイア・ワークス

next.jsは、reactと違ってapiサーバも作れるらしいので、とりあえずhello,world! → DB接続(prisma) → CRUD APIサーバ → フロントエンドから操作できるようにしてみた。

next.jsは、reactと違ってapiサーバも作れるらしいので、とりあえずhello,world! → DB接続(prisma) → CRUD APIサーバ → フロントエンドから操作できるようにしてみた。

npx create-next-app hello-world-next

next.jsで開発するなら、typescript, ESLint, Tailwind.cssは?
って聞いてくるけど、全部NOで!

hello-world-next/app/page.js

npm run dev
http://localhost:3000/ でブラウザ上で hello,world!が表示される。

APIサーバも簡単。 http://localhost:3000/api/hello

hello-world-next/app/api/hello/route.js

DB接続を試してみる。PrismaというORマッパーを使うらしい。

hello-world-next/prisma/schema.prismaがDB接続設定ファイル。
ローカルのxamppのMariaDBに接続して、DBとテーブルを作る。

以下のコマンドでマイグレーションされ
mydatabaseというDBインスタンス内にuserテーブルが生成される

npm run dev してから http://localhost:3000/api/users で、crudできるrestful apiサーバを実装してみる。
hello-world-next/app/api/users/route.js

postmanで試してみたら、ちゃんと出来た!

GET /api/users:
ユーザー一覧を取得します。

POST /api/users:
新規ユーザーを作成します。
リクエストボディ: {“name”: “Alice”, “email”: “alice@example.com”}

PUT /api/users:
ユーザー情報を更新します。
リクエストボディ: {“id”: 1, “name”: “Alice Updated”, “email”: “alice.updated@example.com”}

DELETE /api/users:
ユーザーを削除します。
リクエストボディ: {“id”: 1}

ブラウザから操作できるように、フロントエンドも生成。

laravelはバックエンドから、next.jsはフロントエンドから
結局どっちもフルスタックフレームワークになっているから、収斂進化みたいだな

モバイルバージョンを終了