新しいApp Routerコース：現在Pages Routerコースを閲覧しています。新しいApp Routerコースはこちらでご覧ください。

Reactで完全なWebアプリケーションをゼロから構築するには、考慮すべき重要な詳細がたくさんあります。

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

フレームワークはこれらの問題を解決できます。しかし、そのようなフレームワークは適切なレベルの抽象化を持っている必要があります。そうでないと、あまり役に立ちません。また、あなたとあなたのチームがコードを書いている間、素晴らしい体験を保証する優れた「開発者体験」も必要です。

Next.js：Reactフレームワーク

そこで登場するのが、ReactフレームワークであるNext.jsです。Next.jsは、上記のすべての問題に対する解決策を提供します。しかし、さらに重要なのは、Reactアプリケーションを構築する際に、あなたとあなたのチームを成功の道に導くことです。

Next.jsは、クラス最高の開発者体験と、以下のような多くの組み込み機能を提供することを目指しています。

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

Next.jsは、世界有数のブランドの多くのものを含め、数万のプロダクション向けウェブサイトやWebアプリケーションで使用されています。

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

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

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

https://next-learn-starter.vercel.app（ソース）

このチュートリアルは、JavaScriptとReactの基本的な知識を前提としています。Reactコードを記述したことがない場合は、まず公式Reactチュートリアルを完了してください。

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

会話に参加する

Next.jsやこのコースに関するご質問があれば、Discordでコミュニティにご自由にお尋ねください。

始めましょう！