Next.js(Pages Router) + TypeScript + Prismaを学習するためのExampleアプリ
はじめに
こちらの書籍にてNext.jsの学習を一通りしました。
Next.jsの基礎学習を終えた後、次のステップとして「TypeScriptを使いたい」「DBを使いたい」という気持ちが出てきました。しかしゼロからアプリを作るのはまだハードルが高い。何かお手本となるアプリが無いかなと探してみたところ、ピッタリなサンプルアプリがGitHubにあったので共有いたします。
サンプルアプリ
それがこちらです。
This example shows how to implement a fullstack app in TypeScript with Next.js using React (frontend), Next.js API routes and Prisma Client (backend). It also demonstrates how to implement authentication using NextAuth.js. The example uses an SQLite database file with some initial dummy data which you can find at ./prisma/dev.db.
このアプリケーションは次の特徴を持っています
- TypeScriptを使用したフルスタックアプリケーション
- Next.js API routesとPrisma Clientを使用したバックエンド
- NextAuth.jsによる認証機能
- SQLiteデータベース
READMEには、アプリケーションの起動方法や機能追加の手順が記載されており、学習を進める上で非常に助かりました。
実際にやったこと
1. 機能追加とリファクタリング
以下は私が行ったコミットの一例です。
実際にコードに手を加えることで、書籍では得られない実践的な理解が深まりました。
2. プルリクエストの提出
実はこのプロジェクトを npm run dev で起動しようとした際、nodemailer が package.json に記載されていないためエラーが発生しました。
解決方法がシンプルだったので、プルリクエストを作成し、マージまで至りました。
わずか1行の追加でしたが、OSS貢献できたのは嬉しかったです。
おわりに
今回紹介したアプリケーション以外にも、prisma-examples リポジトリには様々なサンプルアプリケーションがあります。ぜひ活用してみてください。
Discussion