Auth0 を追加した Next.js App Router のアプリを Vercel に展開する
前回作成をしたアプリはローカルで動作していました。今回はローカルではなく Vercel に展開してログインできるように進めていきます。
ブログの記事を時系列で確認することが出来ます
前回作成をしたアプリはローカルで動作していました。今回はローカルではなく Vercel に展開してログインできるように進めていきます。
今回は Next.js に対して Auth0 の認証を追加するチュートリアルを利用して、ログインができるところまで進めていきます。
Next.js で認証を実装していく際に、開発者向けという感じで提供されている Auth0 の無料プランが用意されています。今回はこの無料プランの申し込みをして、デモなどで使えるようにしたいと思います。
Sitecore の製品で採用されている Web フレームワークが公開されており、このフレームワークを Sitecore Blok という形で誰でも利用できるようにパッケージを提供しています。今回はこの Sitecore Blok を Next.js で利用したいと思います。
前回は XM Cloud のプロジェクトのテンプレートを利用して、GitHub にリポジトリの作成、ブランチの作成、そして Next.js の新しいプロジェクトを追加しました。今回はこれを XM Cloud に展開します。
これまでブログで紹介をしていた Tips を利用しながら、1つのサンプルに仕上げていきたいと思います。今回は Tailwind CSS を利用できるサンプルのベースを作っていきます。
ブログでこれまで XM Cloud に関して取り上げてきましたが、プロジェクトの作成の画面なども機能強化されているため、改めて最新の画面で CMS を作成していきます。
以前に Sitecore 10.3 と Headless SXA を利用できる Docker イメージを紹介していましたが、10.4 がリリースされたのでイメージをアップデートしておきました。
ブログのリニューアルで更新を停止している間に、Sitecore 10.4 がリリースされました。細かい情報はリリースノートに任せますが、10.4 に関するポイントを紹介します。
しばらくブログの更新をしていませんでしたが、本日から新しいブログのスタイルに切り替えました。更新したポイントを改めて紹介をします。
今回は Sitecore XM / XM Cloud で提供している便利な機能、Rendering Contents Resolvers について取り上げます。レンダリングの定義で複数の定義が用意されており、これを活用することで効率よくコンポーネントを作成することができます。
すでに手元で動かしているサンプルは Tailwind.css を利用していますが、もう一歩進んで NextUI を今回は適用したいと思います。これは Next.js を提供している Vercel が提供しているユーザーインターフェイスツールとなります。