Next.jsのnext-auth使用してビルドしたらエラーになった件

Nextjsで実装していたときに、

認証周りを構築しようとした時に、

何かライブラリなどを用いて、

GoogleのOAuthでの認証を試そうと考えました。

現時点で調べていると、

  • 「Auth.js(NextAuth.js)」

というライブラリが良さそうなので、

こちらを試してみることにしました。

今回は、

ライブラリ「Auth.js(NextAuth.js)」を用いて、

Google OAuthの認証を試していたので、

その時にビルドするとエラーになった時のメモを

備忘録としてこの記事に残します。

公式サイトの情報

公式サイト

まずは、公式サイトでNextAuth.jsのことを確認

自分が確認した時点(2023/04/25)で、

NextAuth.js is becoming Auth.js! 🎉 
Read the announcement. Note, 
this site is under active development.

とアナウンスされているので、

それぞれのリンクをメモしておきます。

nuxt-authでGoogle認証を試した

今回のビルドエラーになったのは、

Next.jsでGoogle認証を試していたのだが、

開発モードではうまく挙動していた。

TypeScriptを使っているので、

ビルド時にエラーになったが、

ベースとなるやっていることは、

以下の記事を参考。

ビルドエラー「Type error: Binding element ‘Component’ implicitly has an ‘any’ type.」

ビルドしようとしたら、

エラーが発生した。

エラー内容

Type error: Binding element 'Component' implicitly has an 'any' type.

元々のコード

import '@/styles/globals.css'
import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

調整コード

import '@/styles/globals.css'
import { SessionProvider } from "next-auth/react"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

上記の調整で、

この部分の問題は解決。

ビルドエラー「Type ‘string’ is not assignable to type ‘Location | (string & Location)’.」

エラー内容

Type 'string' is not assignable to type 'Location | (string & Location)'.

元々のコード

window.location = "/sample";

調整コード

const win: Window = window;
win.location = "/sample";

上記の調整で、

この部分の問題は解決。

ビルドエラー「Parsing error: Missing initializer in const declaration.」

エラー内容

Error: Parsing error: Missing initializer in const declaration. 

元々のコード

window.location = "/sample";

調整コード

window.location.href = "/sample";

上記の調整で、

この部分の問題は解決。

ピックアップ

こちらもおすすめ

初心者向けの色々な情報はあるけれど、

  • 無料でお試しができるスクール
  • ホームページなど簡単に作成できる
  • 組織で使いたいサービス

について、

少しでも試して良いものがあると、

それを活用することで学習や業務などが効率化できるので、

おすすめのサイトなどをいくつか紹介しておきます

おすすめ書籍

スポンサー

人気記事

おすすめ記事