App Router

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

構築するアプリケーション

このコースでは、以下の機能を備えた財務ダッシュボードを構築します:

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

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

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

概要

このコースで学ぶ機能の概要です:

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

前提知識

このコースでは React と JavaScript の基本的な理解を前提としています。React が初めての場合は、まず React Foundations コースでコンポーネント、props、state、フックなどの React の基礎や、Server Components や Suspense などの新機能を学ぶことをお勧めします。

システム要件

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

• Node.js 18.18.0 以降がインストールされていること ダウンロードはこちら
• 対応OS: macOS、Windows (WSL 含む)、Linux

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

コミュニティに参加

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