2022年度リクルート エンジニアコース新人研修の講義資料です
問題と原因 今回は依存ライブラリ内でpepjsが使われていたため、window is not definedが出ました。 つまり、pepjs内でwindowを使おうとしてるのが問題です。 原因はwindowがクライアント処理でしか使えないため、Nextjsのサーバサイド処理ではエラーになります。 Reactコンポーネント内で使う場合であれば下の記事の方法で、処理をクライアントサイドに限定することで解決できます。 Next.jsで"document is not defined." "window is not defined."のエラーが出たときの対処法 すなおにNextjsを使わない形でReactを使う手もありますが、Next(というかVercel)はその辺の対応をすでにしています。 また、Nuxt.jsではこれに関する記事が多くありますが、Nextjsではなぜかなかったので、記事として
こんにちは。月岡です。 今日はNext.jsでAPIから値をとる使い方を書こうかな思います。 まず何よりも先にnodenvの設定をします。 あるフォルダに入った時に自動で必要なnode.jsのバージョンに切り替えてくれるバージョン管理ツールです。 git clone https://github.com/nodenv/nodenv.git ~/.nodenv cd ~/.nodenv && src/configure && make -C src echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc echo 'eval "$(nodenv init -)"' >> ~/.zshrc exec $SHELL -l nodenv --version mkdir -p "$(nodenv root)"/plugins git clon
NextAuth は Next.js に簡単に認証機能を追加できるライブラリです。TwitterやGoogleといった有名サービスのOAuth認証や、パスワードが不要なメールリンク認証などを簡単に組み込むことができます。 NextAuth はパスワードレス(パスワードなし)の認証を推進しているため、従来のようなメールアドレスとパスワードを用いた認証機能がデフォルトで用意されていません。今回はメールアドレスとパスワードでの簡易的な認証機能を作成する方法を紹介します。 注意 今回の方法で認証する場合、セッション管理はデータベースではなく JSON Web トークン(JWT)を使用して行われます。データベースでセッション管理を行いたい場合は、今回の方法は使えないのでご注意ください。 準備 Next.js アプリを作成
When it comes to adding authentication to your next.js project, NextAuth is a wonderful option. It's easy to see why, given its extensive provider support, which includes Apple, GitHub, Azure Active Directory, Azure Active Directory B2C, Google, and more. It can help you set up your authentication in minutes! However, for different reasons, you may need to implement your custom backend or external
NextAuth.jsとは NextAuth.jsはNext.jsの認証に特化したライブラリです。本書ではOauthを利用した認証の設定方法について解説していますがOauth認証にのみ特化したライブラリではないので従来のメールアドレスとパスワード認証、メールアドレスを使ったパスワードレス認証(Magic Link送信)にも対応しています。 Next.jsプロジェクトの構築 NextAuth.jsの動作確認を行うためにNext.jsのプロジェクトの作成を行います。npm create-next-app@latestコマンドを実行するとプロジェクトの名前を聞かれるので任意の名前をつけてください。 % npx create-next-app@latest Need to install the following packages: create-next-app Ok to proceed?
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く