フルスタックエンジニアへの第一歩:Next.js16×Typescriptで認証からデプロイまで学ぶ本格ブログアプリ開発

Udemy MOOC / Non-credit USD 164.99
Enroll now →
フルスタックエンジニアへの第一歩:Next.js16×Typescriptで認証からデプロイまで学ぶ本格ブログアプリ開発

About this course

「フルスタックエンジニアを目指している」「ちゃんとしたWebサービスを自分ひとりで作れるようになりたい」「Next.jsについて、もっと深く学びたい!」そんなあなたへ、Next.jsを使ったフルスタックのWebアプリ開発を体験してみましょう。このコースでは、最新のNext.js 16を使用し、認証・データベースなどのバックエンド側の機能もしながらフルスタックのブログアプリを作成します。完成するのは、ユーザー登録・ログイン・Markdown記事の投稿・ページネーションなどの機能を備えたブログアプリ。本番環境へのデプロイまで実施して、0からWebサービス開発の全ての工程を一人で実施できるスキルと実績を手に入れましょう。【このコースで学べること】Next.js App Router の最新パターン(Pages Router との違いを理解した上で習得)Server Components を使ったサーバーサイドのデータ取得(fetch不要・直接DB参照)Server Actions を使ったフォーム処理・認証・CRUD(APIルート不要の設計)TypeORM を使ったデータベース操作(エンティティ定義・リレーション・クエリ)JWT + bcrypt によるセキュアなユーザー認証(パスワードハッシュ化・Cookieセッション管理)Markdown 記事のリアルタイムプレビュー付きエディタの実装ページネーション の実装(Server Components × クエリパラメータ)スケルトンUI / 404ページ などの本番品質のUI/UXSQLite(開発)→ PostgreSQL / Neon(本番) へのDB移行Vercel へのデプロイと環境変数の管理TypeScript による型安全なフルスタック開発の進め方【本コースの対象者】React、Next.jsの基礎は理解しており、Next.jsでの本格的なアプリ開発に挑戦したい方フロントエンドだけでなく、バックエンドやDB連携も自分で実装したい方「チュートリアルを終えたが、自分でアプリを作る自信がない」と感じている方就職・転職・副業に向けて、ポートフォリオになるアプリを作りたい方【受講する際の注意点】HTML/CSS/JavaScriptの基本的な解説は行っておりません。重要な部分の学習に集中しやすいよう、コンポーネントやプロジェクトの雛形となる部分のコードはこちらで用意したものを使っていただく前提の箇所がございます。CSSの部分など0から全てのコードを自分で書きたいという方はご注意くださいReactの機能については理解している前提で進行します。Mac + Google Chromeの環境を前提としています(Windowsでも受講可能ですが、コマンド等適宜読み替えが必要です)。本番デプロイにはGitHubアカウントとVercelアカウント(無料)が必要です。

What you'll learn

  • understanding Next.js App Router and its latest patterns
  • implementing server-side data fetching using Server Components
  • handling form processing and authentication with Server Actions
  • conducting database operations using TypeORM
  • implementing secure user authentication with JWT and bcrypt
  • creating a real-time Markdown editor for article posting
  • managing database migration from SQLite to PostgreSQL
  • deploying the application to Vercel

Course objectives

  • to help learners transition from theoretical knowledge to practical application development
  • to build confidence in developing full-stack applications independently
  • to equip students with skills for creating a portfolio-ready project

Skills you'll gain

Related courses

Course details are provided by the platform and may change — always confirm on the provider's site. Links may be affiliate links.