新しい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ライブラリのサポート
• Fast Refreshをサポートする開発環境
• Serverless Functionsを使用してAPIエンドポイントを構築するためのAPIルート
• 完全に拡張可能

Next.jsは、世界中の多くの大手ブランドを含む、数万もの本番環境で使用されているウェブサイトやウェブアプリケーションで使用されています。

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

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

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

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

このチュートリアルは、JavaScriptとReactの基本的な知識があることを前提としています。Reactコードを一度も書いたことがない場合は、まず公式のReactチュートリアルを進める必要があります。

代わりにドキュメントをお探しでしたら、Next.jsのドキュメントをご覧ください。

会話に参加する

Next.jsまたはこのコースに関するご質問がある場合は、お気軽にDiscordのコミュニティにお尋ねください。

さあ、始めましょう！