新しい App Router コース: 現在、Pages Router コースを表示しています。 新しい App Router コースはこちらをご覧ください。

React を使ってゼロから完全なウェブアプリケーションを構築するには、考慮すべき重要な点が多数あります。

• コードは webpack のようなバンドラーを使ってバンドルし、Babel のようなコンパイラーを使って変換する必要があります。
• コード分割などの本番環境の最適化を行う必要があります。
• パフォーマンスと SEO のために、一部のページを静的に事前レンダリングすることができます。また、サーバーサイドレンダリングまたはクライアントサイドレンダリングを使用することもできます。
• React アプリをデータストアに接続するために、サーバーサイドのコードを記述する必要がある場合があります。

フレームワークはこれらの問題を解決できます.しかし、そのようなフレームワークは適切なレベルの抽象化を備えている必要があります。そうでなければ、あまり役に立ちません。また、優れた「開発者エクスペリエンス」を備えている必要があり、コードを記述している間、あなたとあなたのチームが素晴らしいエクスペリエンスを得られるようにする必要があります。

Next.js: The React Framework

Next.js、React フレームワークをご紹介します。Next.js は上記のすべての問題に対するソリューションを提供します。しかし、さらに重要なのは、React アプリケーションを構築する際に、あなたとあなたのチームを成功の落とし穴に陥れることです。

Next.js は、クラス最高の開発者エクスペリエンスと、次のような多くの組み込み機能を備えています。

• 直感的なページベースのルーティングシステム（動的ルートのサポート付き）
• 事前レンダリング、静的生成 (SSG) とサーバーサイドレンダリング (SSR) の両方がページごとにサポートされています
• ページの読み込みを高速化するための自動コード分割
• 最適化されたプリフェッチによるクライアントサイドルーティング
• 組み込み CSSとSass サポート、および任意のCSS-in-JSライブラリのサポート
• 高速リフレッシュをサポートする開発環境
• サーバーレス関数を使用して API エンドポイントを構築するためのAPI ルート
• 完全に拡張可能

Next.js は、世界最大級のブランドを含む、数万の製品向けウェブサイトやウェブアプリケーションで使用されています。

このチュートリアルについて

この無料のインタラクティブコースでは、Next.js の使い始め方を説明します。

このチュートリアルでは、非常にシンプルなブログアプリを作成することで、Next.js の基本を学びます。最終結果の例を次に示します.

https://next-learn-starter.vercel.app (ソース)

このチュートリアルでは、JavaScript と React の基本的な知識があることを前提としています。React コードを書いたことがない場合は、最初に公式の React チュートリアルをご覧ください。

ドキュメントを探している場合は、Next.js ドキュメントをご覧ください。

会話に参加する

Next.js やこのコースに関連することについて質問がある場合は、Discord のコミュニティにご質問ください。

さあ、始めましょう！