「AstroってNext.jsの代わりになるの?」

3月末に同じフリーランスエンジニアの友人から聞かれて、「詳しくないんだよね」と答えました。それが悔しくて、4月の1ヶ月間、クライアント案件の合間にAstroを本格的に試すことにしました。

結論から言うと、**「Next.jsの代替」ではなく「用途が全然違うツール」**でした。ただし、特定の用途では圧倒的に優秀です。

この記事では、Next.js/React歴3年のフリーランスエンジニアが1ヶ月Astroを使い込んでわかったことを、できるだけ正直に書きます。「ポジショントークなしのレポート」なので、向いてない場面もちゃんと書きます。

---

1週目: 「コンポーネントの書き方が全然違う…」という混乱

4月3日（木）の夜、公式ドキュメントを開いてAstroを触り始めました。

最初の印象は「なんかReactに似てるな」でした。.astroファイルを開くと、コンポーネントベースの構造でHTML/CSS/JSが一緒に書けます。

でも、しばらくすると混乱してきます。

---
// フロントマター（サーバーサイドで実行される）
const greeting = "こんにちは";
const posts = await getCollection('blog');
---

<h1>{greeting}</h1>
{posts.map(post => <a href={post.slug}>{post.data.title}</a>)}

「フロントマターって何…?」というのが最初の壁でした。Astroでは.astroファイルの---で囲まれた部分がサーバーサイドで実行されるコードで、ここにJavaScriptが書ける。でもReactのuseStateやuseEffectが使えない。

最初の1週間は正直、「これなんでNext.jsじゃだめなんだっけ?」という気持ちが続いていました。（ここ書くのに30分悩んだ。）

---

2週目: Islands Architectureを理解してから変わった

転機になったのは「Islands Architecture」という概念を理解したときです。

通常のReact/Next.jsアプリは、JavaScriptが全体に乗っています。ページ全体がインタラクティブです。一方Astroは、デフォルトではJavaScriptを一切ブラウザに送らない。静的なHTMLのみ出力する。

そして「ここだけインタラクティブにしたい」という箇所だけに、client:loadというディレクティブをつけてReactやVueのコンポーネントを「島」として埋め込む。

---
import Counter from './Counter.jsx'; // Reactコンポーネント
---

<h1>このページは静的HTML（JSなし）</h1>
<p>このテキストも静的</p>
<!-- ここだけReactが動く "島" -->
<Counter client:load />

ちょっと話逸れるけど——この思想って、「必要なものだけ読み込む」という点でCSSのユーティリティファーストと似た発想なんです。TailwindCSSとNext.jsのセットアップをちゃんと理解してる人なら、すぐ感覚が掴めると思います。

ここを理解してから、「Astroが向いている場面」が一気に見えてきました。

---

3週目: 実際にブログサイトをゼロから作った

3週目は、試しに個人ブログをAstroで作ってみました。公式のスターターテンプレートは使わず、ゼロから組んでいます。

構成:

• コンテンツ管理: Astro Content Collections
• スタイリング: TailwindCSS
• デプロイ: Cloudflare Pages

ビルド時間を計測してみると、Next.jsで同規模のブログサイトを作ったときと比較して、本番ビルドが1.7〜2.1倍速かった。体感だともっと速く感じるんですが——ちゃんと計測したら1.7〜2.1倍でした。気持ちは「3倍速くなった！」と言いたかったんですけど、数字は正直に書きます。

フロントエンドツールランキング2026でも触れましたが、ビルドツールの速度改善はここ1〜2年で著しい。Astroもその恩恵を受けています。

ただ、ここで正直に言うと——Reactのコンポーネントエコシステムを使いたくなる場面が頻繁にありました。shadcn/uiのコンポーネントをそのまま持ってこようとすると、client:loadの制約で思い通りに動かないケースが出てきます。

Next.jsの方が楽だと感じた場面（これは正直に書く）:

• APIルートを頻繁に使うアプリ
• 認証が絡む動的ページが多い構成
• ReactのStateを細かく管理する場面
• shadcn/uiなどのReactコンポーネントをそのまま使いたいとき

---

4週目: パフォーマンス計測とデプロイ

4週目は、作ったブログサイトをCloudflare Pages経由でデプロイして（Next.jsのデプロイ先比較にある通り、Cloudflareは無料枠が使いやすい）、Lighthouse/PageSpeed Insightsで計測しました。

計測結果:

• Performance: 97点（Next.jsの同規模サイトは85〜90点帯が多い）
• LCP（最大コンテンツ描画）: 0.8秒
• CLS（レイアウトシフト）: 0.001（ほぼゼロ）

Vibe Codingの導入でAI補助開発をしながら作ったんですが、コード品質の観点でもAstroは「デフォルトで良いスコアが出やすい」設計になっています。

「ここまで読んでくれた人に正直に言うと」——Lighthouseの数字は環境依存が大きいです。僕の環境での計測値なので、あなたの環境で同じ数字になるとは限りません。ただ、「デフォルトでJSを送らない」という設計思想は、確実にパフォーマンス面で有利に働きます。これは断言できます。

---

1ヶ月の総合評価: Astroが向いてる人・向いてない人

Astroがドンピシャな用途

コンテンツサイト系に最強です:

• ブログ・記事サイト
• ドキュメントサイト
• ポートフォリオ（ポートフォリオ作成の記事で触れましたが、Astroは有力な選択肢です）
• LP・コーポレートサイト

こんな人にはおすすめしない

• SPAやダッシュボード系のアプリを作りたい人
• ReactのState管理（Zustand/Redux）を頻繁に使う構成が前提の人
• 既存のNext.jsプロジェクトで困っていない人（乗り換えコストが見合わない）

「おすすめしない人」を書くのは正直に言うと辛いんですが、全肯定の記事は信じられないので書きます。

Astroを学ぶ価値はあるか

Next.jsとReactの違いを理解した上で、Astroも知っていると「ツールを用途で選べるエンジニア」になれます。

ツール選びのざっくり判断フロー:
動的な機能が多い → Next.js / Remix
コンテンツ中心 → Astro
シンプルなLP → Astro
スマホアプリ → React Native / Flutter

フリーランスとしては、「Astroで静的サイトを作れます」というスキルを持っていると、コーポレートサイトやLPの案件に応用できます。GW前にスキルの棚卸しをしていた時に「これは持っておいた方がいいな」と感じました。

---

よくある質問

Q: AstroとNext.js、結局どっちを先に学べばいいですか?

A: 迷わずNext.js（React）を先に学んでください。AstroはReactコンポーネントを埋め込める設計なので、React知識があることが前提になります。Next.jsを半年〜1年触ってから、「コンテンツサイトを作りたい」というタイミングでAstroを試すのが自然な流れです。

Q: Astroの学習コストはどのくらいですか?

A: Next.jsを知っていれば、基本的なブログサイトが作れるまで週末2〜3回（合計8〜12時間くらい）あれば十分でした。「.astroファイルの書き方」と「Islands Architecture」の2点を理解すれば、あとはほぼ応用です。完全な初心者には少し難しいかもしれません。

Q: AstroはSEOに強いって本当ですか?

A: 本当です。デフォルトで静的HTML出力されるため、Googleがクロールしやすく、Lighthouseスコアも高く出やすい。ただしSEOはコンテンツの質が最終的に決め手なので、「Astroにしたから上位表示される」という魔法はないです。技術的なSEOの課題（速度・クロール・構造化データ）を解決する手助けになる、くらいのイメージが正確です。

Q: Cloudflare Pagesへのデプロイは難しいですか?

A: 簡単です。GitHubにpushするだけで自動デプロイが走る設定にしておけば、コマンド操作なしで本番反映できます。Next.jsよりむしろシンプルで、初心者にも扱いやすいと感じました。

---

追記（2026/04/30）: Astro 5.x系の変更点

この記事を書いているタイミングでAstro 5.x系が安定版になりました。Content Collectionsの書き方が若干変わっているので、古いチュートリアルを参考にすると型定義でエラーが出ることがあります。公式ドキュメントの最新版を確認することをおすすめします。特にdefineCollectionと型定義周りが整理されていて、以前のバージョンより書きやすくなっています。

---

1ヶ月でわかったのは、Astroは「Next.jsの代替」ではなく「コンテンツサイトの最適解」だということ。用途を選べば、今あるフロントエンドフレームワークの中で最も効率よく静的サイトを作れます。

「Next.jsで困っていないなら無理に乗り換えなくていい」——これが1ヶ月触った正直な結論です。ただし、ブログやLP、ドキュメントサイトを作る機会があるなら、ぜひ一度試してみてください。ビルド速度の差は、触ってみると納得感があります。

まずは公式サイトのクイックスタートで動かしてみることから始めるのが一番です。ぜひ試してみてください。