コンテンツにスキップ

App Router

Next.js Foundationsコースへようこそ!この無料のインタラクティブコースでは、フルスタックのWebアプリケーションを構築しながら、Next.jsの主要な機能について学びます。

構築するもの

Screenshots of the dashboard project showing desktop and mobile versions.

このコースでは、次のような金融ダッシュボードを構築します。

  • 公開ホームページ。
  • ログインページ。
  • 認証によって保護されたダッシュボードページ。
  • ユーザーが請求書を追加、編集、削除できる機能。

ダッシュボードには、後続の章で設定する、付属のデータベースもあります。

コースの終わりには、フルスタックNext.jsアプリケーションの構築を開始するために必要な基本的なスキルを習得しているでしょう。

概要

このコースで学ぶ機能の概要を以下に示します。

  • スタイリング: Next.jsでアプリケーションをスタイリングするさまざまな方法。
  • 最適化: 画像、リンク、フォントを最適化する方法。
  • ルーティング: ファイルシステムルーティングを使用してネストされたレイアウトとページを作成する方法。
  • データ取得: VercelでPostgresデータベースをセットアップする方法、および取得とストリーミングのベストプラクティス。
  • 検索とページネーション: URL検索パラメータを使用して検索とページネーションを実装する方法。
  • データの更新: React Server Actionsを使用してデータを更新し、Next.jsキャッシュを再検証する方法。
  • エラー処理: 一般的なエラーと404が見つからないエラーを処理する方法。
  • フォーム検証とアクセシビリティ: サーバーサイドフォーム検証を実行する方法と、アクセシビリティを向上させるためのヒント。
  • 認証: NextAuth.jsとMiddlewareを使用してアプリケーションに認証を追加する方法。
  • メタデータ: メタデータを追加し、ソーシャル共有のためにアプリケーションを準備する方法。

前提知識

このコースでは、ReactとJavaScriptの基本的な理解を前提としています。Reactが初めての方は、まずReactのコンポーネント、props、state、hooks、そしてServer ComponentsやSuspenseなどの新しい機能の基本を学ぶために、React Foundationsコースを視聴することをお勧めします。

システム要件

このコースを開始する前に、お使いのシステムが以下の要件を満たしていることを確認してください。

  • Node.js 18.18.0以降がインストールされていること。こちらからダウンロード
  • オペレーティングシステム: macOS、Windows(WSLを含む)、またはLinux。

さらに、GitHubアカウントVercelアカウントも必要になります。

会話に参加する

このコースに関するご質問やフィードバックがある場合は、RedditのRedditまたはGitHubのGitHubでコミュニティに質問してください。

準備はできましたか?

コースの紹介は以上です。それでは始めましょう。

次へ

1: はじめに

Next.jsアプリケーションの作成方法とローカル開発サーバーの実行方法を学びます。