Zenn
🤷‍♂️

Next.jsとRemixって何が違うの？

2022/12/25に公開
Next.js
Remix
tech

Next.jsとRemixって何が違うのかを把握していなかったので、ちょっと今更感ありますが調査した内容を軽くまとめます。

この記事を読んでもらいたい人

  • 普段Next.jsを使っていて、Remixについて無知な人
  • フロントエンドフレームワークの技術選定で迷っている人

この記事のゴール

  • Next.jsとRemixの違いをざっくり把握できた状態になる

結論

  • 状況やどこまでチューニングできるか次第だが、RemixはNext.jsよりもレンダリング速度を早くできそう?なので、とにかくパフォーマンス重視ならRemixという印象を受けました。
  • ただ、SSGやISRが利用できないことやユーザーコミュニティの大きさを鑑みると、参考サイトも多いためNext.jsの方が扱いやすそう。

Next.jsとは？

  • 同じくReactをベースにしたフルスタックフレームワーク
  • 提供元はVercel
  • 2020年3月の時点で、Netflix、GitHub、Uber、Ticketmaster、 Starbucksなどの多くの大規模なWebサイトで使用されている

https://nextjs.org/

Remixとは？

  • Reactをベースにしたフルスタックフレームワーク
  • react-routerの開発元で知られている
  • SSRを基本としている

https://remix.run/

ルーティング

どちらもファイルベースのレンダリングシステムを使用している

  • Next.js

    • pages/配下にセットすると、自動でルーティングされる

      pages/index.js ==> /

pages/users/index.js ==> /users

pages/users/create.js ==> /users/create

  • Remix

    • app/routes/配下にセットすると、自動でルーティングされる

      app/routes/index.js ==> /

app/routes/users/index.js ==> /users

app/routes/users/create.js ==> /users/create

データの読み込み

  • Next.js
    • SSR・CSR・ISR・SSG対応
  • Remix
    • SSR・CSR対応

デプロイ

  • Next.js
    • Node.js対応しているサーバーにデプロイ可能
  • Remix
    • Node.js非対応のサーバーでもデプロイ可能

スタイリング

  • Next.js
    • CSSモジュールに対応
  • Remix
    • Link機能を使い、必要なCSSファイルを読み込むことで適用される

Cookie・Session操作

  • Next.js

  • Remix

    • createCookie関数で対応している

画像最適化

  • Next.js
    • next/imageで対応している
  • Remix
    • 現時点では非対応

SEO

  • Next.js
    • next/headで、ページやルートでimportして使うことができ、metaタグ設定可能
  • Remix
    • meta exported関数が用意されていて、metaタグ設定可能

TypeScriptの導入

どちらも導入できる

AMP対応

  • Next.js
    • next/ampで対応している
  • Remix
    • 現時点では非対応

※AMPについて補足

AMP（Accelerated Mobile Pages）とは、モバイル端末でWebページを高速表示するためのプロジェクトやフレームワークのことで、GoogleとTwitterが共同開発しています。

https://www.seohacks.net/blog/1004/

参考サイト

https://remix.run/blog/remix-vs-next

https://blog.bitsrc.io/remix-vs-next-js-a-detailed-comparison-6ff557f7b41f

https://apiumhub.com/tech-blog-barcelona/remix-vs-next-js-which-one-should-you-use/#Deployment

Discussion