React プロジェクトを始める

フレームワークなしで React を使うことも可能ですが、ほとんどのアプリやサイトにおいては、コード分割、ルーティング、データ取得、HTML 生成といった問題に対処するための開発が必要であることが分かっています。これらは React に限らずあらゆる UI ライブラリに共通の問題です。

フレームワークを使ってスタートすることで React での開発を素早く立ち上げ、後で実質的に独自フレームワークのようなものを作ってしまわずに済むようになるでしょう。

本番環境対応の React フレームワーク

以下に挙げるフレームワークは、アプリを本番環境でデプロイしスケールさせるために必要なすべての機能を備えており、我々のフルスタックアーキテクチャの実現に向けて開発されています。ここでお勧めするフレームワークはすべてオープンソースであり、助けになる活発なコミュニティがあり、自分自身のサーバにもホスティングプロバイダにもデプロイできます。このリストに掲載を希望するフレームワークの作者はお知らせください。

Next.js

Next.js の Pages Router はフルスタックの React フレームワークです。ほぼ静的なブログサイトから複雑でダイナミックなアプリまで、どんな規模の React アプリでも作成できる万能フレームワークです。Next.js プロジェクトを新規に作るには、ターミナルで次のコマンドを実行してください。

Next.js を初めて使う場合は、Next.js の学習コースを参照してください。

Next.js は Vercel によってメンテナンスされています。Next.js アプリは Node.js やサーバレスホスティングサービス、または自分自身のサーバーにデプロイすることができます。Next.js はサーバを必要としない静的なエクスポートもサポートしています。

Remix

Remix は、ネスト状のルーティングを備えたフルスタック React フレームワークです。複雑なアプリを階層的に分割し、並列に読み込み、ユーザアクションに応じてリフレッシュすることができます。Remix プロジェクトを新規に作成するには、次のコマンドを実行します。

Remix を初めて使う場合は、Remix のブログ作成チュートリアル（短い）や アプリ作成チュートリアル（長い）を参照してください。

Remix は Shopify によってメンテナンスされています。Remix アプリをデプロイするには、デプロイ先を選択する必要があります。Remix アプリは、アダプタを使用するか自分で書くことで、あらゆる Node.js またはサーバーレスホスティングにデプロイできます。

Gatsby

Gatsby は、CMS ベースで高速なサイトを作成するための React フレームワークです。豊富なプラグインのエコシステムと GraphQL データレイヤーにより、コンテンツ、API、サービスの統合が簡素化されます。Gatsby プロジェクトを新規に作成するには、次のコマンドを実行します。

Gatsby を初めて使う場合は、Gatsby チュートリアルを参照してください。

Gatsby は Netlify によってメンテナンスされています。完全に静的な Gatsby サイト は、どんな静的なホスティングにもデプロイ可能です。サーバーサイド専用の機能を使用する場合は、ホスティングプロバイダが Gatsby に対応しているかどうか確認してください。

Expo（ネイティブアプリ向け）

Expo は、Android、iOS、およびウェブ向けに、真にネイティブな UI を持ったユニバーサルアプリを作成できる React フレームワークです。React Native 用の SDK を提供し、ネイティブなパーツの使用を簡素化します。Expo プロジェクトを新規に作成するには、次のコマンドを実行します。

Expo を初めて使う場合は、Expo チュートリアルを参照してください。

Expo は Expo（社名） によってメンテナンスされています。Expo を使用してアプリをビルドすることは無料であり、Google や Apple のアプリストアに制限なくアップロードすることができます。また Expo では有料のクラウドサービスも提供しています。

超最先端の React フレームワーク

我々が React の進化について探求する中で、React をフレームワークと（特にルーティング、バンドル作成、サーバテクノロジーと）より密接に統合することが、React ユーザがよりよいアプリを構築する手助けをするための最大の機会となるということに気づきました。Next.js チームは、React Server Components のようなフレームワークに依存しない最先端の React 機能に関して、私たちと共同で研究、開発、統合、テストを行うことに同意しました。

これらの機能は、本番環境で使える段階へと日々近づいており、他のバンドラやフレームワーク開発者とも統合について話し合っています。私たちの希望は、このページにリストされているすべてのフレームワークが、1 年か 2 年のうちにこれらの機能を完全にサポートするようになることです。（あなたがフレームワーク作者で、これらの機能を実験するため我々と協力することに興味がある場合、ぜひご連絡ください！）

Next.js (App Router)

Next.js の App Router は、React チームのフルスタックアーキテクチャビジョンを実現するために再設計された Next.js の API です。サーバ上で、あるいはビルド時に非同期コンポーネントからデータのフェッチが行えるようになります。

Next.js は Vercel によってメンテナンスされています。Next.js アプリのデプロイはあらゆる Next.js やサーバレスホスティングサービス上で行えます。Next.js は、サーバ不要の静的エクスポートもサポートしています。

// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
  // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
  const talks = await db.Talks.findAll({ confId });

  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
  const videos = talks.map(talk => talk.video);

  // 3. Pass the data down to the components that will run in the browser.
  return <SearchableVideoList videos={videos} />;
}

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>