Next.js で Auth0 を利用するサンプルアプリケーションを構築したので、ご紹介します。

背景 Next.js で Auth0 の技術検証をしたい

技術検証のために Next.js で Auth0 を利用したサンプルアプリケーションを用意しました。

事前準備　npx create-next-app@latest

サンプルコード: npx create-next-app@latest —typescript by shige · Pull Request #1 · codenote-net/auth0-nextjs-sandbox

npx create-next-app@latest --typescript

Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
✔ What is your project named? … auth0-nextjs-sandbox
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*

Next.js で Auth0 を利用する

Auth0 公式ドキュメント Auth0 Next.js SDK Quickstarts: Login を参考にして実装したのが以下の Pull Request です。

サンプルコード: Integrate Auth0 with Next.js application using the Auth0 Next.js SDK by shige · Pull Request #2 · codenote-net/auth0-nextjs-sandbox

以上、Next.js で Auth0 を利用するサンプルアプリケーションを構築した、現場からお送りしました。

参考情報

• Next.jsとAuth0で会員制メディアを作る【1. 認証編】 | microCMSブログ