はじめに
React エコシステムでサーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を手軽に始められるフレームワークとして Next.js と Remix が注目されています。どちらも「React が書ければすぐに使える」点は同じですが、学習コストやルーティングの書き方に違いがあります。本記事では、プログラミング初心者向けに 学習コスト と ルーティング の観点で比較し、最小のサンプルコードを交えて解説します。
1. 学習コストの違い
| 項目 | Next.js | Remix |
|---|---|---|
| 公式ドキュメントの充実度 | ★★★★★（日本語訳も多数） | ★★★★☆ |
| 必要な概念 | ページコンポーネント、getStaticProps / getServerSideProps
|
ローダー (loader)、アクション (action)、データフェッチのストリーム |
| TypeScript との相性 | デフォルトで TS 対応 | 同様に TS が利用可能だが、型定義がやや冗長 |
| 初心者が躓きやすい点 | データ取得の API が複数ある点 |
loader と action の分離概念 |
結論：ドキュメントが豊富で、ページ単位のファイル構造だけで動く Next.js の方が、最初のハードルは低いです。
2. ルーティングの書き方比較
Next.js のルーティング
pages ディレクトリにファイルを置くだけで自動的にルートが生成されます。動的ルートは角括弧で表現します。
// pages/posts/[id].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
import { useRouter } from 'next/router';
type Props = { id: string };
export const getStaticPaths: GetStaticPaths = async () => ({
paths: [{ params: { id: '1' } }],
fallback: false,
});
export const getStaticProps: GetStaticProps<Props> = async (ctx) => ({
props: { id: ctx.params?.id as string },
});
const Post = ({ id }: Props) => {
const router = useRouter();
return <h1>Post #{id}</h1>;
};
export default Post;
- ファイル構造がそのまま URL にマッピングされる
-
getStaticProps/getStaticPathsがデータ取得の入口
Remix のルーティング
app/routes にファイルを置き、loader 関数でデータ取得を行います。動的ルートは $ プレフィックスで表現します。
// app/routes/posts.$id.tsx
import { LoaderFunction, json, useLoaderData } from 'remix';
type LoaderData = { id: string };
export const loader: LoaderFunction = async ({ params }) => {
return json({ id: params.id });
};
export default function Post() {
const data = useLoaderData<LoaderData>();
return <h1>Post #{data.id}</h1>;
}
-
loaderがサーバーサイドで必ず実行され、データはuseLoaderDataで取得 - 動的セグメントは
$idのように記述し、直感的に分かりやすい
3. 小さな例で比較してみる
目的
-
/aboutページを作成し、簡単なテキストを表示するだけ - それぞれのフレームワークで最小構成を確認
Next.js
pages/about.tsx
const About = () => <p>Next.js で作った About ページです。</p>;
export default About;
Remix
app/routes/about.tsx
export default function About() {
return <p>Remix で作った About ページです。</p>;
}
どちらも ファイルを作るだけ でページが完成しますが、Next.js は pages ディレクトリが必須であるのに対し、Remix は routes ディレクトリがルーティングの中心です。初心者は「ファイルを作るだけで完結」という感覚が得られやすい点で Next.js が有利です。
4. まとめ
- 学習コスト：Next.js がやや低く、公式チュートリアルが豊富。Remix は概念が多く、慣れるまで少し時間がかかる。
-
ルーティング：どちらもファイルベースだが、Next.js はシンプルなパスと
getStaticProps系、Remix はloader/actionが中心。シンプルさだけ見ると Next.js が初心者向き。 - 実装例：どちらも数行のコードで同等のページが作れるが、Next.js の方がコード量が少なく、すぐに結果が見える。
React の基礎がつかめたら、まずは Next.js で小さなプロジェクトを作り、慣れたら Remix の高度なデータフェッチ機構に挑戦すると学習効率が高まります。