Next-authプロジェクトを本番環境にデプロイしたときにエラーになる「no secret」

Next-authプロジェクトを公式ページのコードを参照して実装しましたが、ローカルでは問題なく動作するものの、デプロイ先のサーバーで「no secret」というエラーが出たときの解決策を、Twitter認証を例に、紹介します。（現時点では備忘録なので追々説明を補足したいと思います。）

公式exampleのコード

//pages/api/auth/[...nextauth].ts

import NextAuth, { NextAuthOptions } from "next-auth"
import TwitterProvider from "next-auth/providers/twitter"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export const authOptions: NextAuthOptions = {
  // https://next-auth.js.org/configuration/providers/oauth
  providers: [
    TwitterProvider({
      clientId: process.env.TWITTER_ID,
      clientSecret: process.env.TWITTER_SECRET,
    })
  ]
}

export default NextAuth(authOptions)

公式ではこのように紹介されており、ローカルでの認証に問題は起きません。
しかし、Vercelにデプロイするとno secretというエラーでこのsecretとは？？がわからず3週間。。

エンジニアの方と相談している時に「next-auth, secret, environment variables, local, production」のキーワードが思いつきググったところこちらの記事に辿り着きました。

以下のコマンドでランダムな文字列を生成し、

openssl rand -base64 

環境変数に設定（secret: process.env.NEXTAUTH_SECRET）することで解決します。

import NextAuth, { NextAuthOptions } from "next-auth";
import TwitterProvider from "next-auth/providers/twitter";

export const authOptions: NextAuthOptions = {
  // https://next-auth.js.org/configuration/providers/oauth
  providers: [
    TwitterProvider({
      clientId: process.env.TWITTER_CLIENT_ID!,
      clientSecret: process.env.TWITTER_CLIENT_SECRET!,
      version: "2.0",
    }),
  ],
  callbacks: {},
  secret: process.env.NEXTAUTH_SECRET,
};

export default NextAuth(authOptions);