TypeScript
react-hook-form 基本的な使い方② (チェックボックスなど)
本投稿では、react-hook-formを使用した以下の要素の基本的な記述方法についてまとめる。 コード例 コードの解説については、コメントとして残す。 動作例 以下、動作例。
react-hook-form + zod : バリデーションの実装
Zodは、TypeScript向けのスキーマベースのバリデーションライブラリである。 入力データやAPIレスポンスなどのデータ構造の検証を、TypeScriptの型と一貫して行うことが可能であり、react + Type […]
react-hook-form 基本的な使用方法
近頃は、react-hook-formを利用し、フォーム入力/送信周りの実装(バリデーションも合わせて実装が可能)をするケースは多く見られるため、使用方法を残しておく。 インストール 以下は最新のバージョンをインストール […]
Next.js 14 環境変数の設定を切り替える
開発作業を行っていると、様々な環境で作業を行うことがある。 例えば、実際に開発作業を行う「ローカル環境」、開発したソースの動作等の確認をデモデータを使用し行う、行う「開発環境」, 本番に近い状態でテスト等を行う「QA環 […]
Next.js 14 ナビゲーションの利用 (404ページ)
遷移したいページが見つからない場合に、４０４ページが表示される。 本投稿では、どのようなページが表示されるかと４０４ページのカスタマイズ方法についてまとめる。 デフォルトの404ページ アプリケーションを起動 作業フォル […]
Next.js 14 ナビゲーションの利用 (動的ルーティング)
https://〇〇〇.com/1 や https://〇〇〇.com/200のように動的にパラメータの値が変化するようなルーティングを実現する方法をまとめる。 今回は、何かしらの投稿を管理するページがあるとし、投稿一覧 […]
Next.js 14 ナビゲーションの利用 (グループ化)
Nextjsでは、用途に合わせてページをグループ化することが出来る。本投稿内では、認証にまつわるページを１つのグループにまとめてみる。 認証用のグループを作成 前回作成したdemoフォルダ配下については全て削除し、新しく […]
Next.js 14 ナビゲーションの利用 (ページ遷移)
新規のページの作成 appフォルダ配下に以下のようにdemoフォルダを作成し、その中にpage.tsxを作成します。 app - demo - page.tsx 完了したら、page.tsx内に以下のような記述を追加する […]
Next.js14 環境構築(Windows)
新規アプリケーション作成 以下、コマンドを実行することで新規のアプリケーションが作成できるが、Node.jsのインストールが済んでいないと実行出来ないため、注意。 npx create-next-app 以下、コマンド実 […]