Next.js

Next.js

【Next.js】NextAuth.jsとFirebase Authenticationを使ってGoogleログイン機能を作る

Next.jsで認証機能を実装するためのライブラリであるNextAuth.jsを使ってGoogleログイン機能を作成する方法を解説します。 環境 next @13.2.1 next-auth @4.19.2 re...
Next.js

【Next.js】SWRとTanStack Queryの違いを比較

useEffectを使ったデータ取得から脱却し、高速化を図るイケてるライブラリであるよく似た2つ、"SWR"と"TanStack Query"を同じデータの取得を通し、違いの比較をしました。 この記事を見ていただくことで、両者の使い...
Next.js

【Next.js】Imageコンポーネント サイズ不明画像での記述法

Next.jsのImageコンポーネントで画像の表示サイズ調整に手こずったので解決法をまとめました。 2023年1月11日追記。Next.js 13のアップデートにより書き方が少し変わりましたのでその内容を最後に追記しました。 ...
Next.js

【Next.js】ページ遷移リンク

Next.jsでのページ遷移リンクの方法についてまとめました。 結論、非常に簡単に作ることができます。 環境 Next.js @12.3.1 React @18.2.0 リンクの種類 Next.js...
Next.js

【Next.js】初期設定 src作成 tailwindCSS適用まで

Next.jsをcreate-next-appした素の状態で使おうとしていませんか?ちょっと待ってください! 後々のことを考えると、最初に諸々の設定をした方がよく、その設定が結構厄介なため、手順をまとめることにしました。 以下...