Tag
#Next.js
「Next.js」に関連する記事を8本公開中。非エンジニア向けの実務活用情報を中心に、 Claude Code・Claude Cowork の使いこなしをお届けします。
いいURLの設計 — RESTfulという考え方｜バイブコーディング入門 第5回
URLの名前の付け方に「良い・悪い」があることを解説する。RESTfulという設計の考え方を、お店の案内表示に例えて紹介。CursorやClaude Codeに指示するとき、URLの構造を明示するだけでAIが生成するコードの品質が上がる。名詞を使う、階層を浅く保つ、HTTPメソッドで操作を表現するという3つのルールを実践的に解説。
フロントエンド・バックエンド・データベース — 3層構造を理解する｜バイブコーディング入門 第2回
Webアプリを構成する3つの役割（フロントエンド・バックエンド・データベース）を、レストランの店舗運営に例えて解説する。CursorやClaude Codeが生成するコードが「どの層の処理なのか」を判断できるようになると、エラー対応とAIへの指示が劇的に改善する。
Webの歴史を5分で — なぜ今の形になったのか｜バイブコーディング入門 第3回
Webアプリはなぜ今の形をしているのか。静的ページ→動的ページ→API＋SPA→フルスタックフレームワークという4つの時代を、レストランの進化に例えて解説する。CursorやClaude Codeが生成するコードの「なぜこうなっているのか」が分かると、AIへの指示の精度が上がり、エラーの見当がつけやすくなる。
URLの読み方 — アドレスバーの文字列を分解してみる｜バイブコーディング入門 第4回
ブラウザのアドレスバーに表示されるURLを分解し、各パーツの意味を解説する。スキーム・ドメイン・パス・クエリパラメータ・フラグメントという5つの要素を、住所と手紙の宛名に例えて説明。CursorやClaude Codeが生成するルーティングの仕組みが理解できるようになり、エラー時の原因特定が速くなる。
環境変数とデプロイ：ローカルで動くのにVercelで500エラーになる理由
バイブコーディング入門 第19回。環境変数とは何か、.envファイルの書き方、NEXT_PUBLIC_プレフィックスの意味、ローカル→ステージング→本番の3環境管理、Vercelデプロイの仕組み、カスタムドメインのDNS設定まで解説。「ローカルでは動くのにVercelで500エラー」の原因の80%は環境変数の設定漏れです。
パフォーマンスとキャッシュ――サイトを速くする仕組みを理解しよう
バイブコーディング入門 第20回。キャッシュの仕組み（ブラウザ/CDN/サーバサイド）、Cache-Control、LCP/CLS/INPの基本指標、Lighthouseでスコアを測る方法、よくあるパフォーマンス問題（画像が重い・APIが遅い・初期ロード）とその解決策をわかりやすく解説します。
SPA・SSR・SSG — レンダリング方式の選び方
バイブコーディング入門 第21回。CSR/SSR/SSG/ISRの4方式を比較。ブログはSSG、ダッシュボードはCSR、ECはSSR。Next.jsのuse clientの使い分け。バイブコーダーあるある「use clientをどこに付けるかわからない」を解決します。
コードが書けない社長・管理職がClaude CodeでWebアプリを育てる方法
毎回の機能追加に外注費数十万円かかっている方へ。Claude Codeへの日本語指示だけでWebアプリの修正・機能追加・データ連携が進められます。AIへの業務マニュアル（CLAUDE.md）の書き方から、顧客データベースの依頼手順、月2〜3万円で継続運用するコツまで、コード知識ゼロでも動き出せる方法を具体例で解説します。