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を使っているので、
ビルド時にエラーになったが、
ベースとなるやっていることは、
以下の記事を参考。
Next.js でGoogle OAuthをAuth.js(NextAuth.js)で試した件
ビルドエラー「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";上記の調整で、
この部分の問題は解決。
ピックアップ
こちらもおすすめ
初心者向けの色々な情報はあるけれど、
- 無料でお試しができるスクール
- ホームページなど簡単に作成できる
- 組織で使いたいサービス
について、
少しでも試して良いものがあると、
それを活用することで学習や業務などが効率化できるので、
おすすめのサイトなどをいくつか紹介しておきます
