認証 | Next.js 日本語

認証（Authentication）はユーザーが誰であるかを確認し、認可（Authorization）はユーザーがアクセスできる内容を制御します。Next.jsはさまざまな認証パターンをサポートしており、それぞれ異なるユースケースに対応しています。このページでは各ケースについて説明し、制約条件に基づいて選択できるようにします。

認証パターン

適切な認証パターンを特定する最初のステップは、使用したいデータ取得戦略を理解することです。その後、この戦略をサポートする認証プロバイダーを決定できます。主に2つのパターンがあります:

静的生成（Static Generation）を使用してサーバー側でローディング状態をレンダリングし、その後クライアントサイドでユーザーデータを取得する
ユーザーデータをサーバーサイド（Server-side）で取得し、未認証コンテンツのちらつきを防ぐ

静的生成ページの認証

Next.jsは、ブロッキングデータ要件がない場合、ページが静的であると自動的に判断します。これはページ内にgetServerSidePropsやgetInitialPropsが存在しないことを意味します。代わりに、サーバーからローディング状態をレンダリングし、その後クライアントサイドでユーザーを取得できます。

このパターンの利点の1つは、ページをグローバルCDNから配信し、next/linkを使用してプリロードできることです。実際には、これによりTTI（Time to Interactiveが向上します。

プロフィールページの例を見てみましょう。最初にローディングスケルトンを表示し、ユーザーリクエストが完了するとユーザー名を表示します:

pages/profile.js

import useUser from '../lib/useUser'
import Layout from '../components/Layout'

const Profile = () => {
  // クライアントサイドでユーザーを取得
  const { user } = useUser({ redirectTo: '/login' })

  // サーバー側でローディング状態をレンダリング
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>
  }

  // ユーザーリクエスト完了後、ユーザーを表示
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

この動作例を確認できます。with-iron-sessionの例で実際の動作を確認してください。

サーバーサイドレンダリングページの認証

ページからasync関数getServerSidePropsをエクスポートすると、Next.jsは各リクエスト時にgetServerSidePropsから返されたデータを使用してページをプリレンダリングします。

export async function getServerSideProps(context) {
  return {
    props: {}, // ページコンポーネントにpropsとして渡されます
  }
}

プロフィール例をサーバーサイドレンダリング（SSR）を使用するように変更してみましょう。セッションがある場合、ページ内のProfileコンポーネントにuserをpropsとして渡します。この例ではローディングスケルトンがありません。

pages/profile.js

import withSession from '../lib/session'
import Layout from '../components/Layout'

export const getServerSideProps = withSession(async function ({ req, res }) {
  const { user } = req.session

  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user },
  }
})

const Profile = ({ user }) => {
  // ユーザーを表示。ローディング状態は不要
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

このパターンの利点は、リダイレクト前に未認証コンテンツがちらつくのを防げることです。getServerSidePropsでユーザーデータを取得すると、認証プロバイダーへのリクエストが解決するまでレンダリングがブロックされることに注意してください。ボトルネックを作成しTTFB（Time to First Byteを増加させないためには、認証ルックアップを高速化する必要があります。そうでない場合は、静的生成を検討してください。