Next.js– category –
-
【WordPress】WPGraphQLプラグイン
WordPressをヘッドレスCMSとして活用すると、使い慣れた管理画面でコンテンツを管理しながら、フロントエンドは任意の技術で自由に構築できます。 この構成で特に便利なのがWPGraphQLプラグインです。このプラグインを使えば、REST APIよりも効率的にデー... -
Vercelアカウント作成、導入手順
Vercel が電話番号の入力を求めています 理由セキュリティ強化のための追加認証アカウントがセキュリティリスクとみなされている場合、電話番号を使用して認証コードを送信する手順を求められることがあります。 新しいデバイスやIPアドレスでのログイン初... -
Next.jsのSSGサイトにGoogleアドセンスを設置する手順
Next.jsのSSGサイトへのGoogle AdSenseの設置方法 自動広告 自動広告とは 1つのコードを設置するだけで、AIが自動的にコンテンツを分析し、最適な位置に広告を配置する仕組み 自動広告の配置イメージ 青色部分：AIが自動で広告を配置 import './global... -
【Next.js】ハイドレーションエラーSuspenseで解決
非同期データの取得はuseEffectかSuspenseで管理 ハイドレーションエラー ハイドレーションの流れとエラー 1. SSR HTMLを生成 {"name": "John"} {"time": "12:00"} 2. 初期HTML表示 ブラウザ表示 {"name": "John"} {"time": "12:00"} 3. ハイドレーション ... -
【Next.js】ライブラリ使わないでカルーセルスライダー
demo（Next.jsの静的ビルドファイルをiframeで表示したもの） Next.jsを使って無限ループ機能付きのシンプルなカルーセルを実装します（画像スライドショーの基本的な機能をおさえつつ、メンテナンスしやすいコードを目指します） このカルーセルには以下... -
Shadcn/UI 入門：React で洗練された UI コンポーネントを作る
こんにちは！ 今回は、React のプロジェクトで洗練された UI コンポーネントを簡単に作成できる「shadcn/ui」について紹介します。Web 開発をしていると「もっとスタイリッシュなコンポーネントを作りたいけど、手間がかかるなあ…」と感じたことはありませ... -
【Next.js TypeScript 】React Swiper カルーセルスライダー実装、スライドが中央寄せにする方法
完成イメージ 手順 Next.js プロジェクトを用意します npx create-next-app@latest my-carousel-app プロジェクトに必要な依存関係をインストール Swiperと必要なアイコンライブラリをインストールします # Swiperのインストール npm install swiper # Fon... -
Next.jsでGoogleタグマネージャーの実装、アンチフリッカータグ（Anti-flicker snippet）
Next.js 13以降では、@next/third-partiesの使用が推奨 タイミングの問題： インラインスクリプトは即時実行されますが、loadingクラスを使用して可視性を制御しています 2000msのタイムアウトが設定されており、その間にGTMが正しく初期化されない可能性... -
Next.js + TypeScriptで作る！画像ギャラリー実装（map関数）
完成イメージ このチュートリアルでは、以下のような機能を持つギャラリーを作成します ソースファイル imageGallery.tsx // src/components/imageGallery.tsx 'use client' import { useState } from 'react' import { X, ChevronLeft, C... -
【Next.js】Service Worker を使用してプッシュ通知の実装
Service Worker とは Webアプリケーションのバックグラウンドで動作するスクリプト ブラウザのメインスレッドとは別に動作 オフライン動作が可能 プッシュ通知を受信可能 バックグラウンドで同期処理が可能 プッシュ通知の流れ Service Workerのライフサイ... -
NextAuth Githubアカウントを利用
そもそも認証とは 認証とは、「あなたが本当にあなたであること」を確認するプロセスです。 ユーザー アプリ 認証プロバイダー (GitHub/Google/Email等) 1. ログイン要求 2. 認証リクエスト 3. 認証情報返却 主な認証方式: - ソーシャルログイン: GitHub, ... -
【NextAuth】Credentials ProviderでシンプルなID/パスワード認証システム
Credentials Providerとは Credentials Providerは、NextAuthで独自のユーザー名/パスワード認証を実装するためのプロバイダーです。 Credentials Provider の認証フロー ログインフォーム Credentials Provider (authorize関数) データベース 処理ステッ... -
【Laravel】Sailを使用せずにDockerで開発、TinyMCEを使用したWeb回覧システム設計
XserverにそのままアップできるLaravelプロジェクトをローカルで開発する Xserver上では原則「composer は使えない」 ※Xserverは共用サーバー。つまり、root権限はないし、OSレベルで自由にツールをインストールすることもできない。 →ローカルで composer...
1