Web制作2026.05.31
公開前チェックとトラブル対策｜Next.js個人サイトで詰まりやすいポイント
個人サイト制作シリーズ この記事は「Next.jsで個人ブログ兼Webツールサイトを1から作る」連載の一部です。
初めての人でも順番に進められるよう、前提知識をできるだけ省き、つまずきやすいポイントもあわせて整理しています。
サイト制作では、最後の最後に小さな問題が出ます。「ビルドが通らない」「スマホで崩れてる」「faviconがまだ古い」。公開前のサイトは、旅行前のカバンに似ています。だいたい何か入れ忘れています。
1. ビルド結果を確認する
npm run build
静的出力の場合、成功すると out フォルダが生成されます。
out/index.html
out/blog/
out/apps/
out/sitemap.xml
out/robots.txt
out/ads.txt
2. 静的出力と動的ルートを確認する
output: "export" で、ビルド時に分かる動的ルートを生成する場合は、generateStaticParams() でパラメータを列挙します。
export function generateStaticParams() {
return getAllPosts().map((post) => ({
slug: post.slug,
}));
}
ページネーションでも必要です。
export function generateStaticParams() {
const posts = getAllPosts();
const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
return Array.from({ length: Math.max(totalPages - 1, 0) }, (_, index) => ({
page: String(index + 2),
}));
}
3. zshで角括弧を含むパスを扱う
zsh: no matches found: app/blog/page/[page]
クォートします。
mkdir -p 'app/blog/page/[page]'
touch 'app/blog/page/[page]/page.tsx'
4. sitemapを確認する
cat out/sitemap.xml
確認項目です。
・TOPがある
・blogがある
・appsがある
・記事詳細がある
・タグページがある
・ページネーションURLがある
・末尾スラッシュが統一されている
5. 404ページを用意する
存在しないURLにアクセスしたとき、独自の404ページが出ると親切です。
ページが見つかりません
TOPへ戻る
記事一覧へ
ツール一覧へ
Next.js App Routerでは app/not-found.tsx を作ります。
6. faviconを確認する
faviconはブラウザなどにキャッシュされ、変更がすぐ見えないことがあります。
・正しい形式で作る
・余白を狭める
・metadataで参照する
・?v=4 のようにバージョンを付ける
7. スマホ表示を確認する
・ヘッダーのロゴとナビが被らない
・記事カードが横にはみ出さない
・サイドバーが下に回る
・表が横スクロールできる
・フォームのボタンが押しやすい
・広告枠が大きすぎない
8. 数値入力フォームを確認する
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
}
9. 公開前チェックリスト
□ npm run build が成功する
□ TOPページが表示される
□ 記事一覧が表示される
□ 記事詳細が表示される
□ ツールページが表示される
□ Aboutがある
□ お問い合わせがある
□ プライバシーポリシーがある
□ 免責事項がある
□ 404ページがある
□ sitemap.xmlがある
□ robots.txtがある
□ ads.txtがある
□ スマホ表示が崩れていない
□ 内部リンクが切れていない
□ 画像が表示される
□ OGP画像が設定されている
□ faviconが反映されている
10. まとめ
サイト制作は、完成したと思ってからの確認が大事です。最後のひと手間で、サイトは「動くもの」から「ちゃんと使えるもの」になります。