メインカテゴリーを選択しなおす
Windowsのローカル環境にNext.jsの開発環境を構築するメモ【備忘録】
お疲れ様です。 業務でNext.jsを使うことになり環境構築から対応が必要になったので試しに個人PCに環境構築したメモです。（自分用） もともとNext.jsを使った開発は経験があるのですが、Dockerでdevcontainerを作成して開発をしていました。 今回作成する環境はDockerを使用せずにWindowsのローカルに構築します。 Node.jsのインストール yarnのインストール Next.jsのインストール Node.jsのインストール 公式サイトからインストーラをダウンロードし、インストールします。 nodejs.org こんな感じのインストーラが立ち上がります。基本的にデフ…
![[Next.js] Supabase カレンダーメモアプリ チュートリアル (後編)](https://img.blogmura.com/sites/1282896/post-images/71142497.webp/crop/435x435)
[Next.js] Supabase カレンダーメモアプリ チュートリアル (後編)
Next.jsの初学者向けチュートリアルコンテンツ、カレンダーメモアプリ チュートリアルの後編です。カレンダー…
[Next.js] Supabase カレンダーメモアプリ チュートリアル (前編)
Next.jsの初学者向けチュートリアルコンテンツです。カレンダー形式のメモアプリをNext.js及びType…
Next.jsの全体設計を考えるときに疎結合性やテスト容易性を達成するときに考えているアーキテクチャについて簡単に書いてみる。P...
![[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました](https://img.blogmura.com/sites/1282896/post-images/70343477.webp/crop/435x435)
[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました
以前、お送りしてきた、以下の、Next.jsとFirebaseの認証・DBを利用した、学習記録アプリのチュート…
![[Next.js] 学習記録アプリ Firebase認証・DB実装 （Admin SDK編）](https://img.blogmura.com/sites/1282896/post-images/68740706.webp/crop/435x435)
[Next.js] 学習記録アプリ Firebase認証・DB実装 （Admin SDK編）
前編・後編に渡ってお送りしてきた、Next.jsとFirebaseによる、学習記録アプリ、今回は番外編として、…
Next.jsでPropsを分割代入で記述する方法を解説！分割代入の基本からしっかり解説しているので仕組みを理解できます。
Next.js 入門｜ Props でコンポーネントに値を渡す
Next.js(React)のPropsを使ったコンポーネント間のデータ受け渡しを解説！初心者でもわかりやすく、具体例とデバッグ方法も紹介します。
CodeSandboxや、StackBlitz など優れたWebブラウザ上でWebアプリケーションを開発できる…
Next.js入門｜App Routerで簡単ページ追加＆遷移を解説！
Next.jsのApp Routerを使って、ページの追加や遷移を初心者でも簡単に学べる方法を解説します。新しいルーティング機能を理解しよう！
Next.js入門｜プロジェクトの新規作成からMUIの導入まで
初心者向けNext.js 15入門！MUIを導入してCSSの知識がなくてもモダンなUIを簡単に構築。手順を画像付きで丁寧に解説します。
[Next.js] 学習記録アプリ Firebase認証・DB実装 （後編）
Next.jsによる学習記録アプリ、Firebase認証・DB実装 の後編です。前編に続き、後編では、DBデー…
[Next.js] 学習記録アプリ Firebase認証・DB実装 （前編）
Reactのチュートリアルとして、これまで、SupabaseやFirebase連携等、色々なパターンで紹介して…
Google Analytics Data API (GA4) を使ってNextjs上に人気記事を表示する
Google Analytics Data API (GA4) + Nextjsで人気記事の表示機能を実装します。 ユーザーのアクセス数によって表示される記事が動的に変わります。
SSGでサイト更新時に、サイトマップを自動的にGoogleに送信する
ウェブサイトには定期的にGoogleのクローラーが巡回しに来ますが、その時にサイトマップの変更を確認することはないそうです。クロール頻度の設定とは別に、サイトマップの更新をGoogleに伝える必要があります。今回はSSGのビルドと同時に、サイトマップを送信する方法を紹介します。
FirebaseのSparkプランを使い倒すために、Realtime-Databaseのデータをスプレッドシートにキャッシュして、Next.jsからアクセスするという処理を別のウェブサイト作成時に実装しました。需要があるか分かりませんが、その中で使用したGAS・Next.js…
