🙌
Next.js v13でNextAuth v4を動かせた話
この記事に書いてあること
僕がログイン機能を実現するために、NextAuthを利用しようとしたら、Next.js v13での動かし方がわからず、
とても探し回るはめになったので、備忘録も兼ね、共有のために参考になる動画を埋め込んでいます！
この記事は、しばらく経ったら動画埋め込みをテキストリンクに差し替えるかもしれません(自分で書いたコードで説明した方が色んな人が見やすいかもしれないので)
環境について
NextAuthはV4.19、Next.jsはv13以降の環境を想定しています！
Googleログインを簡単に実装したい！！
と思って、色々探していたらNextAuthという便利なものを見つけたので、早速使ってみることに...。
出くわした問題
- Next.js v13での使い方がドキュメントらしきページに記載されてなかった。
- 一応GitHubのIssueで議論はされているっぽいけど、「クライアントコンポーネントでしか動かないよ～？」的な会話が繰り広げられていた。
- しかもIssueがめちゃくちゃ枝分かれしてた
上記のことからほぼ利用を諦めかけてました。
一筋の光明
なんかそれっぽい動画をみつけました。
この動画では結局何をしているのか
- Next.js v13プロジェクトを作成した
- NextAuthでのProvider設定をした
- クライアントコンポーネントとして、SessionProviderでchildren(ReactNode)を挟むコンポーネントを作成
- そしたら3で作ったコンポーネントでlayout.tsxの{children}を挟む
- そのあとはログイン部分のコンポーネント（サーバコンポーネント）を別ファイルで作成
- そのログイン部分の表示部分を作成して、page.tsxにおいておしまい！！
といった感じになります
とりあえず伝えたいこと
- 英語は読めるようになっといた方がいいです。
- ドキュメントでわからなかったらYouTubeに動画あげてる海外の方を頼ってみましょう。
もういくつか見つけてました
この方の動画は、先ほどの動画とは違って、実際に動作させるというより、「どうすれば良いのか」という説明をしてくれている...のだと思います
こっちは、実際に動かしてるところを見せながら、メールアドレス+パスワード形式でのログインを実装してるみたいですね！
まだ僕も詳しくは見てないので、また見たら追記するかもしれません！！
ということで、この記事を役立てて、Next.js v13での開発、頑張っていただければなと思います！それではまた！！
Discussion