日本株取引記録(trade-next-prisma-chart)

目的

• Prismaを使用してデータベースに接続してNext.jsでCRUDを実現する
• Chart.jsやPlotlyを使用してチャートを表示する

デプロイ先

https://trade-next-prisma-test.vercel.app/

使用フレームワーク

• Next.js v13.4
• Tailwind CSS

使用データベース

• Vercel Postgres

使用ライブラリ

• Prisma
• Chart.js
• react-chartjs-2
• Plotly
• React Plotly

使用サービス

• Vercel

目標

• Next.jsのApp RouterでのParallel Routesの理解
• Prismaの理解
• Chart.jsの理解
• Plotlyの理解
• Vercel Postgresの理解
• Vercelへのデプロイ

参考資料

Tailwind CSS

• Tailwind cheatsheet

Prisma

• tradeでリレーションしたstockのデータを表示
• seedからデータベースに登録
• Vercel build dependency

Chart.js

• Next.js+TypeScript+Chart.js
• グラフ配色サポートツール「COLORS」

Plotly

• React + TypeScript + Plotly で3次元グラフ
• Next.js plotly Build

Vercel Postgres

• Next.js × NextAuth × Prisma × VercelPostgresで構築するモダン認証機能システム
• Integrated seeding with Prisma Migrate
• JavaScriptで日付をYYYY-MM-DD形式で得るコード