🎯 比べる所 1
得意なこと
Astro
読ませるサイトを、軽く作ること。
Next.js
動きのある画面を、React で作り込むこと。
📚 200stack のやさしい解説 · 第 7 回
Astro と Next.js、
作るならどっち?
ホームページ作りでよく名前が挙がる Astro と Next.js。どちらが上ということはなく、得意なことが違います。向いているサイトと、迷ったときの選び方を紹介します。
ももAstro と Next.js、どっちで作ればいいの?
おもちどちらも良い道具だよ!今日は、向いている場面で比べてみよう。
動画で解説 🎬
動画で解説
そもそも 🧱
どちらも、サイトを作るための「フレームワーク」
フレームワークは、直訳すると「骨組み」。サイトを作るときによく使う形や仕組みを、最初からまとめて用意してくれる道具です。
部品の作り方
ヘッダーやメニューなど、ページの部品を作る決まり
ページのつながり
どの URL で、どのページを見せるか
書き出しの仕組み
完成したサイトを、ファイルとして書き出す
Astro も Next.js も、静的なサイト(前もって完成させたページを、そのまま届けるサイト)として書き出せます。会社やお店のホームページは、どちらでも作れます。
Astro の得意なこと 🚀
Astro は、文章や画像が中心のサイトが得意
ページは前もって HTML(ページの中身を書いたファイル)にしておき、スライドや検索のような「動く所」だけで JavaScript(画面を動かすためのプログラム)を使います。
動く所だけ JavaScript
動く部品が、ページの中に島のように浮かぶイメージ。この考え方を「アイランド」と呼びます
軽くなりやすい
読み込む JavaScript が少なくて済むので、ページが軽くなりやすくなります
好きな部品を混ぜて使える
React や Vue など、ほかの仕組みで作った部品も一緒に使えます
Markdown で書きやすい
ブログやお知らせを Markdown(かんたんな記号で書く文章の形式)で書いて、そのままページにできます
向いているのは、会社やお店のサイト、ブログ、説明書のようなドキュメントです。
Next.js の得意なこと ⚛️
Next.js は、React で画面を作り込むのが得意
Next.js は、React(画面を部品の組み合わせで作る仕組み)でサイトやアプリを作るためのフレームワークです。
ページ全体を React の部品で
ヘッダーもメニューも本文も、React の部品で組み立てていきます
アプリのような動きも作りやすい
ボタンを押すと中身が切り替わるような画面を作りやすいのが強みです
静的なサイトとして書き出せる
もちろん、Astro と同じように静的なサイトとしても書き出せます
あとから機能を育てていける
会員機能のような仕組みを、あとから足していくときにもよく使われます
⚠️ ただし、会員機能のようにサーバーが要る機能は、静的な書き出しだけでは動きません。足すときは、サーバー側でどう動かすかもあわせて考えます。
比べてみよう 🆚
2 つを並べて比べると
🧩 比べる所 2
しくみ
Astro
HTML が中心で、動く所だけ JavaScript を使います。
Next.js
ページ全体を、React の部品で組み立てます。
🏪 比べる所 3
向いているサイト
Astro
会社やお店のサイト、ブログ、ドキュメント。
Next.js
アプリのような画面があるサイトや、機能を育てていくサイト。
🤝 どちらが上ということはなく、得意なことが違うだけです。
選び方 🧭
迷ったときの選び方
まずは、作りたいサイトの中身を考えてみましょう。
Astro が向いている
文章や画像が中心
- 会社・お店のホームページ
- ブログ・お知らせ
- 説明書のようなドキュメント
Next.js が向いている
React で作り込みたい
- アプリのような動きのある画面
- あとから機能を育てていくサイト
- 作るチームが React に慣れている
💡 いちばん大事なのは、作る人が慣れている方を選ぶこと
よくある疑問 💬
よくある疑問
- Q. どちらのほうが優れているの?
- どちらが上ということはありません。Astro は読ませるサイト、Next.js は作り込んだ画面というように、得意なことが違います。
- Q. どうして「慣れている方」がいいの?
- 慣れている道具なら迷う時間が減り、そのぶんサイトの中身づくりに力を注げるからです。
- Q. 静的に書き出せば、どんな機能も動く?
- 会員機能のようにサーバーが要る機能は、静的な書き出しだけでは動きません。そうした機能を足すときは、サーバー側の動かし方も考えます。
まとめ
迷ったら、
慣れている方を。
- ✅ 文章・画像中心なら Astro
- ✅ 作り込むなら Next.js
- ✅ どちらも静的に書き出せる
- ✅ 迷ったら慣れている方
おもちAstro でも Next.js でも、静的に書き出したサイトは 200stack で公開できるよ。料金は月330円(税込)から。
