コンテンツにスキップ

はじめに

Next.js ドキュメントへようこそ!

この始め方セクションでは、最初のNext.jsアプリの作成方法と、すべてのプロジェクトで使用するコア機能について学習します。

前提知識

ドキュメントは、ウェブ開発に関するある程度の知識を前提としています。始める前に、以下の内容に慣れておくと役立ちます。

  • HTML
  • CSS
  • JavaScript
  • React

Reactが初めての方や復習が必要な方は、まずReact Foundationsコースから始めることをお勧めします。また、学習しながらアプリケーションを構築できるNext.js Foundationsコースもあります。

次のステップ

インストール

`create-next-app` CLIを使用して新しいNext.jsアプリケーションを作成し、TypeScript、ESLint、モジュールパスエイリアスを設定する方法を学びます。

プロジェクト構造

Next.jsのフォルダとファイルの規約、およびプロジェクトの整理方法について学びます。

レイアウトとページ

最初のページとレイアウトの作成方法、およびLinkコンポーネントを使用したページ間のリンク方法を学びます。

リンクとナビゲーション

プリフェッチ、プリレンダリング、クライアントサイドナビゲーションを含む、組み込みのナビゲーション最適化の仕組み、および動的ルーティングや低速ネットワークのナビゲーションを最適化する方法を学びます。

サーバーコンポーネントとクライアントコンポーネント

React Server ComponentsとClient Componentsを使用して、アプリケーションの一部をサーバーまたはクライアントでレンダリングする方法を学びます。

キャッシュコンポーネント

Cache Componentsの使用方法と、静的レンダリングと動的レンダリングの利点を組み合わせる方法を学びます。

データ取得

データに依存するコンテンツの取得方法とストリーミング方法を学びます。

データ更新

Server Functionsを使用したデータのミューテーション方法を学びます。

キャッシングと再検証

アプリケーションでのデータのキャッシュと再検証方法を学びます。

エラーハンドリング

予期されるエラーの表示方法と、キャッチされない例外の処理方法を学びます。

CSS

Tailwind CSS、CSS Modules、Global CSSなど、アプリケーションにCSSを追加するさまざまな方法について学びます。

画像最適化

Next.jsでの画像最適化方法を学びます。

フォント最適化

Next.jsでのフォント最適化方法を学びます。

メタデータとOG画像

ページへのメタデータの追加方法と、動的なOG画像を生成する方法を学びます。

ルートハンドラー

Route Handlersの使用方法を学びます。

プロキシ

Proxyの使用方法を学びます。

デプロイ

Next.jsアプリケーションのデプロイ方法を学びます。

アップグレード

Next.jsアプリケーションを最新バージョンまたはカナリアバージョンにアップグレードする方法を学びます。