NextJsを使いブログサイトを作成しました。
こんにちは！最近、Clerk + MongoDB を使ってアカウント管理を実装しているのですが、
いくつかの壁にぶつかりながらも、試行錯誤を重ねて改善しています。
今回はその過程で学んだことをまとめました！
🔐 Clerk × MongoDBでの認証管理
今回のプロジェクトでは、ユーザー認証に Clerk を、データ管理に MongoDB を使用しています。
Clerkはシンプルに認証を実装できるサービスで、OAuthやメール認証なども簡単に導入できるため採用しました。
バックエンド側のデータ管理には MongoDB + Mongoose を使い、ユーザー情報をデータベースに保存しています。
🐞 MongoDBとの接続トラブル – Mongooseの設定ミス
最初はスムーズに進んでいたのですが、MongoDBとの接続がうまくいかない問題 に直面しました。
エラーメッセージを確認しながらコードを修正していたのですが、なかなか解決できず…💦
原因は「ファイルの配置ミス」
コードばかり見直していたのですが、原因は意外なところにありました。
Mongooseの設定ファイルを適切な場所に配置できていなかった ため、
データベースとの接続が正しく行われていなかったのです。
import mongoose from 'mongoose';
const connectDB = async () => {
try {
await mongoose.connect(process.env.MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true
});
console.log('MongoDB Connected');
} catch (error) {
console.error('MongoDB connection error:', error);
process.exit(1);
}
};
export default connectDB;
これを適切な位置に配置し、server.js や app.js の最初で呼び出すことで解決！
「コードのバグ」ばかり気にしていたけれど、根本的な部分（ファイル構成や環境設定）にも目を向けることが大事」 ということを改めて実感しました。
🖼️ 画像の表示問題 – Firestore以外の選択肢を検討中
以前のプロジェクトでは Firebase Storage を使って画像を管理していましたが、
今回は 無料で使える他のオプション を探しているところです。
現在候補に考えているのは…
✅ Cloudinary（無料プランあり、画像の最適化も可能）
✅ Imgur API（シンプルなアップロード機能）
✅ Supabase Storage（Firebaseの代替サービス）
コストや使いやすさを考慮しながら、どれを採用するか決めていきます。
🛠️ 今後のアップデート予定
認証機能とデータ管理の実装が進んできたので、次のステップ として以下の機能を追加予定です。
✅ ブログ記事の公開機能（Markdown対応 or WYSIWYGエディター導入）
✅ 商品ページの作成（ブログ以外のコンテンツを充実）
✅ カート & 決済機能の追加（Stripe or PayPalを利用予定）
✅ レスポンシブデザインの改善（特にモバイル表示の最適化）
現在のサイトはまだ公開できる状態ではありませんが、
細かい部分を手直ししながら、完成度を上げていきたいと思います！
🚀 まとめ – 視野を広く持つことの大切さ
今回のプロジェクトを進める中で、
「コードのバグ修正にばかり集中しすぎず、もっと広い視点で問題を捉えることが大切」
ということを学びました。
今後も新しい技術を試しながら、より良いサイトを作れるようにアップデートしていきます！