Next.jsで作る強みとメリット｜このサイトで確かめた表示速度・SEO・運用の実際Next.jsで作る強みとメリット｜このサイトで確かめた表示速度・SEO・運用の実際

「Next.jsで作ると、何がいいんですか？」

制作の相談で、こう聞かれることがあります。検索すると「速い」「SEOに強い」と書いた記事がたくさん出てくる。でも、実際に作ったサイトで測った数字まで出している記事は、あまり見かけませんでした。

このサイト（stellarium.jp）は、Next.js 16で作っています。

なので一般論ではなく、このサイトを材料に確かめたことを書きます。サーバーで完成したHTMLを返すこととSEOの関係、ブログ記事の表示速度の実測、ページが増えても作り直さない仕組みと、そこで踏んだ失敗。向いていないケースも最後に置きました。

Next.jsとは、Reactでサイトを作るための道具一式

Next.jsは、画面を部品（コンポーネント）の組み合わせで作るReactというライブラリに、ページの振り分け、HTMLの組み立て方、画像の扱いなどをまとめて足したフレームワークです。開発しているのはVercelという会社で、同じ会社のホスティングにそのまま載せられます。

このサイトの構成は次のとおり。

ブログの記事は、Gitで管理しているフォルダにファイルを1つ置くと公開される仕組みです。管理画面はありません。これが強みにも弱みにもなるので、あとで触れます。

強みは、サーバーで完成したHTMLを返せること

Next.jsの大きな特徴は、ページのHTMLをサーバー側で組み立てられることです。

反対の作り方が、CSR（クライアントサイドレンダリング）。最初に届くHTMLにはほとんど中身がなく、ブラウザでJavaScriptが動いてから本文が組み上がります。

GoogleはJavaScriptを実行してページを読めます。Googleの「JavaScript SEO の基本」によると、Googlebotはクロール、レンダリング（ヘッドレスのChromiumでJavaScriptを実行）、インデックス登録の3段階でページを処理します。そのうえで、ユーザーやクローラーにとってサイトが速くなること、ボットによってはJavaScriptを実行できないものもあることから、サーバー側でのレンダリングも検討するよう書かれている。

Google以外の検索エンジンや、AIの検索が使うクローラーもあります。最初のHTMLに本文が入っていれば、どれに対しても中身が伝わる。

このサイトのHTMLで確かめた

2026年9月28日に、このブログの記事「Google広告のコンバージョン設定」を、JavaScriptを動かさないcurlで取得しました。

• 最初に届いたHTMLの中に、記事の見出し（h2）6つがすべて、本文と一緒に入っていた
• レスポンスヘッダーは X-Vercel-Cache: PRERENDER。前もって作っておいたHTMLがそのまま返っている

ブラウザでJavaScriptが動く前から、本文が読める状態。

表示速度は「Next.jsだから速い」わけではなかった

モバイル74点。これが、このブログの記事をPageSpeed Insightsで測った結果です（2026年9月28日、記事「Google広告のコンバージョン設定」）。

パソコンは十分速い。モバイルはLCPが4.8秒で、Googleの「Core Web Vitals」で良好とされる2.5秒を超えています。

改善の候補として挙がったのは、使われていないCSSの削減（モバイルで約920ミリ秒の短縮見込み）、CSSの圧縮、使われていないJavaScriptの削減でした。どれもNext.jsの機能の話ではなく、サイトの作り方の話です。サイト全体で共通のCSSを読み込んでいて、記事ページで使わない分まで届いている。ここはまだ直せていません。

Next.jsには画像を自動で縮めて配る仕組みや、ページごとにJavaScriptを分ける仕組みが入っています。速くするための道具はそろっている。使い方しだいで点数は上にも下にも振れる、というのが測ってみての実感です。

広告のLPで表示速度がどれだけ費用に響くかは、広告のLPが遅いと広告費が上がるで、LCP 12.6秒のページを4秒まで縮めた記録と一緒に書いています。

ページが増えても作り直さない。ISRの使い方と、踏んだ失敗

記事が増えても、サイト全体を作り直さずに済む。ここは実際に助かっている部分。

使っているのは、ISR（Incremental Static Regeneration）。Next.jsの公式ドキュメント「How to implement Incremental Static Regeneration (ISR)」によると、静的なページを、サイト全体を作り直さずに更新できる仕組みです。指定した時間が過ぎたあとの最初のアクセスでは古いページを返しつつ、裏で新しいページを作り、次のアクセスから差し替えます。

このサイトのブログ記事は、こう設定しています。

1. ビルド（公開の作業）のときに作るのは、新しい記事10本だけ
2. それ以外の記事は、最初にアクセスされたときに作ってキャッシュする
3. 作ったページは1日ごとに作り直す

最初からこうしていたわけではない。

以前は、全記事をビルドのときに作る設定（SSG）にしていました。2026年9月16日に確かめたところ、Next.js 16では1記事ごとに複数の出力ができ、51記事で1回のデプロイが875MBになっていた。Vercelのデプロイ容量の半分以上を、ブログだけで使っていたんです。ISRに切り替えて、事前に作るのを新しい10本に絞りました。

記事が数百本に増えるサイトなら、ここは最初に決めておきたいところです。

Next.jsが向いていないケース

弱みもはっきりあります。

一番は、更新。このブログは記事をファイルで管理しているので、書き換えるにはGitとエディタを使うか、制作者に頼むことになる。WordPressのように、社内の人がログインして文章や写真を直す管理画面は、Next.jsには最初から付いていません。必要なら、CMS（記事を管理する別のサービス）をつなぐ開発が別に要ります。

作り方は手段なので、誰がどのくらいの頻度で更新するかから決めてください。制作を誰に頼むかで迷っているなら、ホームページ制作をフリーランスに依頼するメリットに、頼む前に確かめることをまとめています。

Next.jsで作るか決める前のチェックリスト

• 公開後、誰がどのくらいの頻度で更新するか決まっている
• 更新する人がGitを使えないなら、CMSをつなぐ費用を見積もりに入れた
• ページがどのくらい増えるか見込み、ISRなどの作り方を決めた
• 公開前にPageSpeed Insightsでモバイルの点数とLCPを測る約束をした
• ホスティングの費用と容量の上限を確かめた

リニューアルで作り方を変えるか迷っているなら、古いホームページのリニューアルもあわせてどうぞ。