Series
サイト公開シリーズ
Next.js + Vercel でゼロから個人サイトを公開するまでの全工程。AI ワークフロー設計から DNS 設定トラブルまで、実際に詰まった箇所を含め記録。
Articles (14)
- 1
Cursor・Claude・ChatGPTはどう使い分ける? 実際に試して分かったAI役割分担の話
"Cursor・Claude・ChatGPTを実際に使い続けて気づいた「AI役割分担」の話。コード生成はCursor、長文整理はClaude、SEO相談はChatGPT——そう決まるまでの手探りと試行錯誤を、初心者目線でそのまま書きました。"
- 2
ChatGPT・Cursor・Claudeの役割分担|AIツールを使い分けるだけで品質が安定する
"Cursor・ChatGPT・Claudeを1ツールにまとめて使うと品質が不安定になりがちです。役割を固定する分担ルールと、迷わず動ける手順を初心者向けに解説します。"
- 3
Claude記事生成は「source.md」で精度が変わった
- 4
Vercelで「Invalid Configuration」が直らなかった原因はネームサーバー設定だった
Vercelに独自ドメインを設定したのに「Invalid Configuration」が続き、ブラウザでは「DNS_PROBE_FINISHED_NXDOMAIN」が出た。丸一日詰まった末に見つけた原因と、同じミスを防ぐための確認ポイントをまとめました。
- 5
Vercel独自ドメイン接続で詰まりやすいポイント5選【DNS設定完全チェック】
"Xdomainのネームサーバー未設定・DNSキャッシュ・Aレコード反映待ちなど、Vercelの独自ドメイン接続でよく詰まるポイントを実例つきで解説します。"
- 6
Next.js canonical設定の基本とインデックス未登録対策【実運用Tips】
"Next.js App RouterでmetadataBaseとcanonicalを設定すると、重複URLの評価分散を防ぎインデックスが安定しやすくなります。layout.tsxへの追加手順を解説。"
- 7
OG画像が404になる前に——fallback設計で公開品質を守る
"Next.jsでOG画像が未配置のまま公開すると、SNSカードが壊れた状態になります。共通fallback画像を1か所で定義するだけで防げる設計を、コード例つきで解説します。"
- 8
Vercel Previewを本番前に確認する理由——PR単位でミスを防ぐ手順
"VercelのPreview URLを使うと、本番に影響を出さず画像・canonical・メタデータを確認できます。GitHub連携で自動生成されるPreview環境の使い方を初心者向けに解説します。"
- 9
Next.jsで画像差し替えしても反映されない時の対処法|1分Tips
"Next.js初心者向けに、画像を差し替えても古いまま表示されるときの対処法を1分で解説します。キャッシュ原因の切り分けと、すぐ効く5つの確認手順をチェックリスト付きで紹介します。"
- 10
Next.jsのpublic/images配下に画像を置く理由
"Next.jsでブログ記事に画像を置くとき、なぜpublic/images配下に保存するのかを初心者向けに解説します。Markdownから参照するときの絶対パスの書き方と、差し替え時に表示が変わらないときの確認ポイントも紹介します。"
- 11
同一画像を記事内で再利用するときはaltテキストを変える
"同じ画像を記事内や別記事で再利用するとSEOに悪いのか気になる方向けに、altテキストとcaptionを完全コピーすることの問題点と、再掲時の書き分け方を実例をもとに解説します。"
- 12
ブログ一覧を15件ずつページ送りにする目安(Next.js)
"記事数が増えてきたNext.jsブログで、ページネーションの件数をどう決めるか迷ったことはありますか。テキスト中心の一覧なら15件が無難な出発点です。定数化の方法と判断基準を実測をもとに解説します。"
- 13
App Routerのページ送り後に#all-articlesへスクロールする方法
"Next.jsのApp Routerでブログ一覧をページ送りすると先頭に戻ってしまう問題を、ToolArcの15件ずつページ送り実装を例に解説します。アンカーIDとscroll={false}で一覧セクションへ戻す方法、SEO用のrel=next/prevを崩さない考え方も整理します。"
- 14
MarkdownのhttpリンクはNext.jsで外部リンク扱いになる
"記事本文に絶対URLを書くと、同一サイト内でも外部リンクとして処理されます。内部リンクは相対パス `/blog/slug` で書く理由と確認手順を解説します。"