SwiperをReact / Next.js環境で動かす最短ステップ
swiper は jQuery でしか実装したことはありませんでしたが React および Next.js で実装してみたので記録いたします。 使用ツール Next.js / React / ...
0
0
Comment0
17 search resultsShowing 1~17 results
Stocked
You need to log-in
Tailwind CSS のクラス名を Prettier で自動整列する方法
Tailwind CSS を使っていると、クラス名が長くなって管理が大変…。 そんな悩みを解決してくれるのが Prettier + Tailwindプラグイン による自動並び替え です！ 使用...
0
1
Comment0
Next.js / React プロジェクトでよく使うフォルダ構成と役割まとめ
React / Next.js を学んでいると「hooks」「utils」「lib」「store」などのフォルダをよく見るけど、最初は何を入れるのか混乱しがちです。 この記事では、それぞれのフォ...
1
0
Comment0
Atomic DesignなReact/Next.jsで index.ts（バレル）を置くメリット・デメリットと導入手順
転職活動用のオリジナルアプリ開発をしています。 コンポーネントにAtomic Designの考え方を学習しました。 さらに、『バレル構造』を導入することでコード管理がしやすくなりましたので 記録...
2
2
Comment1
転職用ポートフォリオで取り入れた Atomic Design のコンポーネント設計（Next.js）
アプリ開発の際のコンポーネント分割および管理方法に困ったことはありませんか？ 最近、Atomic Designに関して学んだため、アウトプットとして記録いたします。 使用ツール Next.js...
1
0
Comment0
【Next.js】useRouter の5大メソッドまとめ｜push・replace・back・forward・refresh の役割
Next.js の App Router を使っていると、router.push() や router.replace() など似たメソッドが多くて混乱しませんか？ この記事では、useRout...
2
1
Comment0
Next.js App Routerで「前の画面に戻る」処理を実装する方法
Next.jsのApp Routerで画面を作っていると、 「戻る」ボタンや「保存後の遷移」で直前の画面に戻したい というケース、よくありませんか？ 単純に router.replace("/固...
0
0
Comment0
Next.js + TypeScript開発で知っておくべきReact型チートシート
Next.js + TypeScript でコンポーネントを書くとき、React. から始まる型はとてもよく登場します。 しかし「どの型をどの場面で使うのか」が分からず、毎回調べてしまう…という...
3
0
Comment3
Next.js + react-paginate で記事一覧ページにページネーションを実装する方法
React × Next.js 環境で react-paginate を使ったページネーションの実装方法をまとめました。 記事一覧や商品リストなど、データを分割して表示したい場合にそのまま流用で...
0
0
Comment0
Supabase × Next.jsアプリにZustandを導入。- ログイン状態を監視しヘッダー表示を切り替える
本記事では、Supabase × Next.js 環境に軽量な状態管理ライブラリZustandを導入し、ログイン状態をグローバルに監視する方法を解説します。 実際にログイン中かどうかでヘッダーに...
0
0
Comment0
【Next.js】react-hot-toastでオシャレな通知を作ろう（App Router対応）
Next.jsアプリでトースト通知を導入したいけど、alert()はダサいし、モーダル出すほどでもない… そんなときに便利なのが、今回紹介する【react-hot-toast】です。 たった1行...
1
0
Comment0
React Hook Form × Zod でバリデーションフォームを作る方法【Next.js】
React Hook Form と Zod を導入し、バリデーション付きフォームを簡単に作成する手順をまとめました。 ぜひフォーム画面に導入してみてください！ はじめに React Hook ...
0
0
Comment0
Next.js (App Router) と Supabase の最短連携方法
Next.js (App Router) と Supabase の“最短連携フロー”を、サクッとまとめました。 公式で推奨されている手順をわかりやすくまとめています。 @supabase/sup...
2
0
Comment0
React開発で迷わない！importを自動でキレイに整える方法【Prettier + プラグイン】
ReactやNext.jsで開発をしていると、 import文がごちゃごちゃしてくること、ありませんか？ react, next, @/components/..., ../utils/... ...
0
1
Comment0
「React × Chart.jsでおしゃれな進捗円グラフを作る方法」
React × Chart.js で、おしゃれな進捗円グラフをサクッと表示！ 「目標に対する達成率」や「日々の進捗管理」にピッタリなUIを、react-chartjs-2 を使って爆速実装できま...
0
0
Comment0
日付を「〇年〇月〇日」形式で表示する方法（React/TypeScript）
個人開発の中で、日付や金額を “日本語らしく” 表示する方法 を学んだので共有します！ 日付が 2025-09-30 のままだと、ちょっと読みにくいですよね。 また金額が 50000 では、パッ...
0
0
Comment1
git commit メッセージに日付を自動付与する方法（zsh関数で効率アップ）
Gitでコミットメッセージを記述するとき、「いつコミットしたか」を毎回メモしてませんか？ コミット末尾に _2025_0721_10-00 のような日時を 自動で付けられる方法 があったので共有...
0
0
Comment0
17 search resultsShowing 1~17 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles