アンケートにコメントができるサービスを作ったZenn108えん🐎アンケートにコメントができるサービスを作った2023/12/01に公開Next.js個人開発PrismaNextAuthPlanetScaletechはじめに世の中には決着をつけなければいけない課題がたくさんあります。きのこかたけのこかWindowかMACかAndroidかiPhoneかとかそんな論争の主戦場となる場所を作りました。構成ホスティング:VercelDB:PlanetScaleドメイン:CloudflareフレームワークとかNextJS(AppRouter)NextAuthprismareact-hook-formmui今回初めて使ったものたちPlanetScaleめっちゃ良い。5Gも使っていいんでしょうか?使いきれません。readを節約するための調整とかはしていないので、今後様子見て調整します。prismaRDBを使うのがほぼ初めてだったので、SQLの学習とどっちがいいのかはよくわかっていません。generateしないといけないことを知らず、ここでだいぶ時間とられてしまいました。取得したデータに型がついてくれるのはめっちゃ良い!react-hook-formめっちゃ良い。最初はぱっと見わかりにくそうでしたが、使ってみると簡単。Controllerのrenderの中にぶち込んで、fieldを{...field}みたいな形で渡せばいい感じに動く。)}/>validationも以下のように定義しておいて、Controller側のrulesで読み込めば勝手にやってくれる。Actionsを利用しました。投稿フォーム系のコンポーネントだけをクライアント側で動かしています。api不要でできるので、すごく楽でした。Routes投票してないなら投票画面、投票済みなら結果画面というように、そのユーザーの状態によって画面を出し分けています。layout.tsxlayout.tsxは以下のようにして出し分けています。form}</section>;}NextAuthめっちゃよい。大まかな使い方は公式ページとかほかの記事でもわかり安く書いてあるので、記載しません。https://next-auth.js.org/getting-started/example細かいところでわかりにくいところがあったので、いくつか紹介します。情報を追加する場合roleの情報を追加する場合の例を示します。どこかにtypeを宣言します。}}初回ログイン時に、情報を格納する処理を追記します。},};これで、middlewareの処理や、sessionから情報が取れるようになります。<section>{children}</section>}middlewareの処理middlewareの処理を記載することで、認証が必要なページや認証時の処理を追加できます。middlewareはsrc直下に記載します。認証が必要なページの指定だけでよい場合は、以下のようにするだけです。//dashboardのみ認証必須になります。]}認証時に、そのページにアクセスする権限があるのか等の確認処理をしたい場合は、以下のようにします。config内のmatcherで指定したパスにアクセスがあった際にcallbacks.authorizedが実行されます。trueを返せばアクセス許可、falseの場合はsignInで指定したパスにリダイレクトされます。認証済みの場合のみ許可する場合は以下のようにする。["/admin/:path*","/user/:path*"],};今後ページ切り替え実装していないので追加したい(50件までしか表示できない)UIが適当なところがあるのでどうにかしたい。見てわかると思いますが、あまり深く考えず、zennとかredditとかどうしているのか見ながら実装してます。反映が遅いところとかあるので、修正したい。useOptimisticとかちゃんと使いたい。宣伝(一番大事そうだけど一番よくわからない)まとめぱっと思いついて、ワンピース見ながら半月くらいで実装したので、ちょっと不格好なところもありますが、必要最低限は実装してリリースしてみました。(ワンピース見ながらめっちゃ作業進むのは自分だけではないはず)個人開発ってスピード大事ですよね。使ってくれる方がいるようであれば、続けていこうと思います!参考react-hook-formやServerActions系はこの方の動画がわかり安く、すごく参考になりました!https://www.youtube.com/channel/UCf6AGqO98eGk11nfazociVQ/videos108えん本業はセキュリティ部署でリスクアセスメントしてます。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。バッジを贈るDiscussion108えん本業はセキュリティ部署でリスクアセスメントしてます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。