はじめに
プロジェクトでNext.jsに触れる機会が多くなってきたため復習&メモがてらまとめました。
ウェブアプリケーションで、ユーザーがブラウザで何かをクリックしてから、データベースからデータを取得し、画面に表示されるまでの流れを、具体的な技術を使って解説します。
ブラウザからDBへの流れ
1. ブラウザでの操作
ユーザーがWebページ上のボタンをクリックしたり、フォームを送信したりします。例えば、「ブログ記事を表示」ボタンを押します。
2. Next.jsサーバーへのリクエスト
ブラウザは自動的にNext.jsサーバーにリクエストを送信します。
3. APIルートでのリクエスト処理
Next.jsのAPIルートが、リクエストの詳細を処理します。
// pages/api/posts.ts
export default async function handler(req, res) {
// リクエストの種類（GET、POSTなど）を確認
if (req.method === 'GET') {
// Prismaを使用してデータベースからデータを取得
const posts = await prisma.post.findMany()
res.status(200).json(posts)
}
}
4. Prismaによるデータベース操作
Prismaは、型安全で読みやすいデータベースクエリを生成します。
// Prismaスキーマ定義
model Post {
id Int @id @default(autoincrement())
title String
content String
}
5. データベースからのデータ取得
データベースは、Prismaからのクエリを実行し、結果を返します。
6. レスポンスの生成とブラウザへの送信
Next.jsは、取得したデータを使用してHTMLページを生成するか、JSONデータを直接返します。
// ページコンポーネント
function BlogPage({ posts }) {
return (
<div>
{posts.map(post => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
)
}
// サーバーサイドでのデータ取得
export async function getServerSideProps() {
const posts = await prisma.post.findMany()
return { props: { posts } }
}
遷移図
このアプローチの特徴
- シンプルさ: 複雑なデータベース操作を、わずか数行のコードで実現
- 安全性: 型チェックにより、データ操作中のエラーを最小限に
- パフォーマンス: サーバーサイドでのデータ取得により、高速なページ表示
初学者へのアドバイス
この流れは最初は複雑に見えるかもしれませんが一つずつ理解を深めていけば、Webアプリケーションの仕組みが自然と分かってきます。
実際に手を動かし、小さなプロジェクトから始めることをおすすめします。エラーを恐れず、共に学び続けましょう。
Discussion