Pages Router
新しい App Router コース: 現在表示しているのは Pages Router コースです。新しい App Router コースはこちらからご覧ください。
React を使用してゼロから完全なウェブアプリケーションを構築するには、考慮すべき重要な詳細が多数あります:
- webpack のようなバンドラーを使用してコードをバンドルし、Babel のようなコンパイラーで変換する必要があります。
- コード分割などの本番環境向け最適化が必要です。
- パフォーマンスと SEO のために一部のページを静的プリレンダリングしたい場合があります。また、サーバーサイドレンダリング (SSR) やクライアントサイドレンダリング (CSR) を使用したい場合もあるでしょう。
- React アプリをデータストアに接続するために、サーバーサイドコードを記述する必要があるかもしれません。
フレームワークはこれらの問題を解決できます。しかし、適切な抽象化レベルを持たなければ、あまり役に立ちません。また、優れた「開発者体験 (Developer Experience)」を提供し、あなたやチームがコードを書く際に素晴らしい体験を保証する必要があります。
Next.js: React フレームワーク
そこで登場するのが Next.js、React フレームワークです。Next.js は上記のすべての問題に対する解決策を提供します。さらに重要なのは、React アプリケーションを構築する際に、あなたやチームを成功の罠 (pit of success) に導くことです。
Next.js は最高水準の開発者体験と多くの組み込み機能を目指しています:
- 直感的なページベースのルーティングシステム（ダイナミックルート対応）
- プリレンダリング、静的生成 (SSG) とサーバーサイドレンダリング (SSR) をページ単位でサポート
- ページ読み込みを高速化する自動コード分割
- 最適化されたプリフェッチを備えたクライアントサイドルーティング
- 組み込みの CSS と Sass サポート、あらゆる CSS-in-JS ライブラリに対応
- 高速リフレッシュ (Fast Refresh) をサポートした開発環境
- サーバーレス関数で API エンドポイントを構築する API ルート
- 完全な拡張性
Next.js は数万の本番環境向けウェブサイトやウェブアプリケーションで使用されており、世界最大級のブランドの多くにも採用されています。
このチュートリアルについて
この無料のインタラクティブコースでは、Next.js の始め方をガイドします。
このチュートリアルでは、非常にシンプルな ブログアプリ を作成しながら Next.js の基本を学びます。最終的な結果の例はこちらです:
https://next-learn-starter.vercel.app (ソースコード)
このチュートリアルは JavaScript と React の基本的な知識を前提としています。React コードを書いたことがない場合は、まず公式 React チュートリアルを完了してください。
ドキュメントをお探しの場合は、Next.js ドキュメントをご覧ください。
コミュニティに参加
Next.js やこのコースに関連する質問がある場合は、Discord でコミュニティに質問してください。
それでは始めましょう！