Next.jsとPrismaで学ぶWebアプリ開発入門

2025年6月22日

開発環境構築

※この記事の内容は、生成AI（ChatGPT）を活用して作成しています。正確性には配慮していますが、技術的な仕様や利用規約は変動する可能性があるため、最新情報は各公式サイト等でご確認ください。

本記事は、ノーコードやCursor AIの生成コードをきっかけにWeb開発に興味を持った方や、Next.jsを使って会員制Webサイトを自作したいと考えている初学者に向けて書かれています。筆者自身が実際に開発を行った際の手順と学びを元に、初めてのフルスタック開発でも迷わないように丁寧に解説しています。

「Cursor AIで動くものは作れたけど、なぜ動いているのかは理解できていない」──そんな不安を感じている方にも、一歩ずつ仕組みを解説していきます。

目次 [ close ]

第1章：プロジェクト全体像

🛠 開発の目的

ランサーズのようなユーザー登録型Webサービスを、Next.jsで自作する
フロントエンドとバックエンドを1つのプロジェクト内で完結させる
商用利用を前提にした構成（XサーバーVPSなどでデプロイ可能な構成）

📦 採用技術スタック

分類	技術名	用途
フロントエンド	Next.js 14 + React + TypeScript	UI構築、ルーティング
スタイリング	globals.css	CSSをシンプルに一元管理
バックエンド	Next.js API Routes	APIの作成
データベース	SQLite + Prisma ORM	ユーザーデータ管理
認証	bcryptjs	パスワードのハッシュ化
開発環境	Windows + PowerShell	ローカル開発

第2章：Next.js プロジェクトの作成手順

▶︎ プロジェクト作成コマンド

cd C:\Users\alcue\Desktop\EMMLabo\TIMENEX
npx create-next-app@latest next-rensyu

▶︎ 初期セットアップ時の質問とおすすめ設定

質問	推奨回答	理由
TypeScript使う？	Yes	型安全性・保守性アップ
ESLint使う？	Yes	コード品質を自動チェック
Tailwind CSS？	No	globals.cssで一元管理したいため
src/ディレクトリ使う？	Yes	モダンな構成として推奨
App Router使う？	Yes	新ルーティングシステムに対応
Turbopack使う？	No	現時点では安定性重視
import alias変える？	Yes	@をsrc/に割り当てると便利

第3章：構成とディレクトリ構造

next-rensyu/
├── public/
├── src/
│   ├── app/
│   │   ├── page.tsx（トップページ）
│   │   └── register/page.tsx（会員登録）
│   ├── components/（UIパーツ）
│   └── styles/globals.css
├── next.config.js
├── package.json
└── prisma/
    ├── schema.prisma（DB構造）
    └── migrations/（マイグレーション）

第4章：Prisma & SQLite 設定

Prismaをインストール

npm install prisma --save-dev
npx prisma init --datasource-provider sqlite

Prismaスキーマ（prisma/schema.prisma）を定義

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  password  String
  name      String
  createdAt DateTime @default(now())
}

マイグレーションの実行

npx prisma migrate dev --name init

第5章：会員登録とログイン機能

✅ フロントエンド構成

✅ バックエンドAPI（/api/ディレクトリ）

APIエンドポイント	用途
POST /api/register	新規ユーザー登録
POST /api/login	ログイン処理
GET /api/user	ログイン中のユーザー情報取得