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

構築するもの

このコースでは、以下のような機能を持つ簡略化された財務ダッシュボードを構築します。

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

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

コース終了までに、フルスタックのNext.jsアプリケーションを構築するために必要な基本的なスキルを習得できます。

概要

このコースで学習する機能の概要は次のとおりです。

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

前提知識

このコースでは、ReactとJavaScriptの基本的な理解があることを前提としています。Reactを初めて使用する場合は、まずReactの基礎コースを受講して、コンポーネント、プロパティ、状態、フックなどのReactの基本、およびServer ComponentsやSuspenseなどの新しい機能を学習することをお勧めします。

システム要件

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

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

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

会話に参加する

このコースについて質問がある場合、またはフィードバックを提供したい場合は、DiscordまたはGitHubでコミュニティに質問できます。