Learn Next.js

Next.jsのApp Routerコース！フルスタックのWebアプリを構築することによってNext.jsのメイン機能を学ぶことが出来ます。

構築するもの

このコースではシンプルな財務管理アプリを構築します：

• メインページ
• ログインページ
• 認証によって保護されたダッシュボード管理ページ
• 請求書を追加・編集・削除するための機能

ダッシュボードではデータベースも付属されております。こちらは後の章でセットアップされます

このコースを終了時には　フルスタックNext.jsアプリを構築する為に必要な基本的なスキルを習得することができます。

概要

こちらはこのコースで学ぶ機能の概要：

• スタイル：さまざまな異なるスタイル付与の方法
• 最適化：画像・リンク・フォントの最適化方法
• ルーティング：ファイルシステムルーティングを使用してネストされた`layouts`と`pages`を作成する方法
• データ取得：データベース設定方法。データ取得とストリーミングに最適な方法
• 🔍検索とページ分割リンク：URL検索パラメーターを使用したページネイション・検索の実装方法
• データ変更：React Server Actionsを使用したデータ変更方法とNext.jsキャッシュの再検証
• エラーの取り扱い：一般的なものと404 not foundエラーの使用方法
• フォームのバリエーションと使いやすさ：サーバー側でフォーム検証の方法と取り扱いやすさ向上の為のヒント
• 認証：NextAuth.js and Middlewareを使用した認証方法の追加の方法
• メタデータ：メタデータを追加してアプリをソーシャル共有用に準備の方法

前提知識

こちらのコースではReactとJavaScriptの基本を理解していると想定してます。もしReactが初めてな場合、Reactの基礎であるコンポーネント・props:プロップス・state:ステイト・フックスなどやサーバーコンポーネント・Suspenseのような新しい機能を学ぶために最初にReact基礎コースをお勧めします。

システム要件

このコースを始める前に次の要件を満たしているかご確認ください

• Node.js 18.18.0 or 最新 Downloadはこちら
• OS: macOS, Windows (WSL含まれている), or Linux.

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