OpenCourser brand icon
Sign in
Sorry, this page is no longer available
Sorry, this page is no longer available
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座

4.4 Filled star Filled star Filled star Filled star Empty star
Based on 95 ratings
see reviews
Shin Code

Next.js App Routerの利用とshadcn/ui, contentLayer, NextAuth, Supabase, Prismaを利用したブログポストWebアプリケーション開発を行って実践力を身に着ける講座です。

世界トップWebエンジニア「shadcn」が開発したプロジェクトを参考にして作るWebアプリを通して、実務で通用するWeb開発スキルを習得します。

■ 本コースの対象者

  • 世界トップエンジニアのプロジェクトから学びたい方

  • 1から本格的なWebアプリケーション開発の流れを知りたい方

  • shadcn/uiに興味がある方

  • フルスタックエンジニアとして活躍していきたい方

  • Next.js AppRouterで実用的なアプリケーションを作りたい方

■ 本コースを受講する際の注意点

Read more

Next.js App Routerの利用とshadcn/ui, contentLayer, NextAuth, Supabase, Prismaを利用したブログポストWebアプリケーション開発を行って実践力を身に着ける講座です。

世界トップWebエンジニア「shadcn」が開発したプロジェクトを参考にして作るWebアプリを通して、実務で通用するWeb開発スキルを習得します。

■ 本コースの対象者

  • 世界トップエンジニアのプロジェクトから学びたい方

  • 1から本格的なWebアプリケーション開発の流れを知りたい方

  • shadcn/uiに興味がある方

  • フルスタックエンジニアとして活躍していきたい方

  • Next.js AppRouterで実用的なアプリケーションを作りたい方

■ 本コースを受講する際の注意点

  • HTML/CSS/JavaScriptに関する基本的な知識があることを前提としています。

  • Reactの基礎（コンポーネント、JSX記法など）についての理解が必要です。

  • JavaScriptに関する実務経験があると、よりスムーズに講座を進めることができます。

世界トップエンジニアのプロジェクトを通してアプリ開発を学びましょう。この講座が終われば自由自在にアプリ開発ができるようになるはずです。ChatGPTでも分からない内容をより丁寧に詳しく解説しています。

Enroll now

What's inside

Learning objectives

  • Nextjs/shadcn/uiを使って本格的なwebサービスが作れる
  • Nextjs approuterでの実装とrscを考慮しながら開発ができる
  • トップwebエンジニアshadcnのプロジェクトからコーディングが学べる
  • Nextjsのルートグループのディレクトリを作成して開発できる
  • Tailwindcssとshadcn/uiベースでレスポンシブに対応できる
  • メタデータ情報をページ毎に付与できる
  • Contentlayerを使ってマークダウン形式でブログ投稿できる
  • Tailwindcss/typographyの導入方法が分かる
  • ログイン/新規登録機能が実装できる
  • Githubとgoogleを使ったoauth認証ができる
  • Nextauthjsのv4を使って認証とセッション管理ができる
  • Nextjsのmiddlewareを実装してトークン有無によってリダイレクト制御ができる
  • Supabaseとprismaとnextauthを組み合わせた認証とdb管理ができる
  • モデル作成と外部キー接続ができる
  • セッション管理とjwt管理の切り替えができる
  • ユーザー管理ページの作成とサイドバー作成ができる
  • 記事投稿機能が実装できる
  • Typescriptベースでアプリ開発ができる
  • Nextjsのapi routeを使ってcrudのapi実装ができる
  • Zodを使ったバリデーションチェックができる
  • React-hook-formを使って堅牢性のあるフォーム管理ができる
  • Editorjsとreact-textarea-autosizeライブラリの扱い方が分かる
  • 関数のメモ化とuseeffectのクリーンアップの実装ができる
  • フェッチ時のローディング実装ができる
  • アラートダイアログの追加、エラーハンドリング、アクセス制御等
  • ビルドとプレビュー、vercelへのデプロイができる
  • Oauthやsupabaseで本番環境でも認証を機能させられる
  • Show more
  • Show less

Syllabus

本講座で学べる事が理解できます。
本講座で学べる事
完成品のデモ
参考にしたGithubリポジトリとshadcnの紹介
Read more

Traffic lights

Read about what's good
what should give you pause
and possible dealbreakers
Teaches the use of Nextjs, shadcn/ui, contentLayer, NextAuth, Supabase, and Prisma for building a blog post web application, developing practical skills that are applicable in real-world settings
Utilizes a project developed by world-renowned web engineer "shadcn" as reference, to learn from industry-leading coding practices
Suitable for learners seeking to build full-stack web applications and develop proficiencies as full-stack engineers
Assumes prior knowledge of HTML/CSS/JavaScript and a foundational understanding of React
Requires JavaScript experience for a smoother learning process
Covers a wide range of topics, including Nextjs AppRouter implementation, RSC considerations, responsive design, content management, user authentication, database management, form validation, and more

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.
Save

Reviews summary

最新スタックで実践web開発

受講者によると、このコースはNext.js App Router、shadcn/ui、Supabaseといった最新のフルスタック技術を用いて本格的なWebアプリケーション開発を学ぶ上で非常に実践的であると期待されます。複数の最新ライブラリとフレームワークを組み合わせ、実務レベルのアプリケーションをハンズオン形式で構築できるため、包括的なスキル習得が見込まれます。特にshadcn/uiの活用や堅牢な認証システム実装、デプロイまでの一連の流れを習得できる点が強みとなるでしょう。HTML/CSS/JavaScriptおよびReactの基礎知識がある学習者向けです。
HTML/CSS/JavaScript、Reactの基礎知識がある方向け。
"HTML/CSS/JavaScriptの基本的な知識とReactの基礎は、受講前にしっかり準備しておくべきだと感じました。"
"JavaScriptの実務経験があると、よりスムーズに講座を進められるので、経験者におすすめです。"
"前提知識が不足していると、一部のコンセプトを理解するのに苦労するかもしれません。"
TypeScript、Zod、react-hook-formで型安全な開発を習得。
"TypeScriptベースでの開発や、Zodとreact-hook-formを使った堅牢なフォーム管理は、実際の開発現場で非常に役立つと感じました。"
"バリデーションチェックの重要性と実装方法を実践的に学べ、コードの品質向上に貢献します。"
"型安全なアプリケーション開発の基盤を築くことができました。"
ブログアプリ開発を通じて、実践的なWeb開発フローを習得。
"世界トップエンジニアのプロジェクトを参考に、本格的なWebアプリ開発の流れを体験できるのが魅力的です。"
"単なる知識だけでなく、実際に手を動かしながらアプリケーションを完成させることで、理解が深まりました。"
"デプロイまでの一連のプロセスを学べたので、自分のプロジェクトにも自信を持って取り組めます。"
Next.js App Routerを含む最新技術を網羅的に学べます。
"Next.js App Router、shadcn/ui、Supabaseといった現代的な技術を一度に学べるのが素晴らしいです。"
"フルスタック開発に必要なPrismaやNextAuth.jsなど、最新のライブラリが網羅されており、体系的に学習できました。"
"このコースで、実務で必要とされるWeb開発スキルを習得できると確信しました。"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座 with these activities:
Next.jsの公式ドキュメントを読む
Next.jsの公式ドキュメントを確認し、基本的な概念や使用方法を復習します。
Browse courses on Next.js
Show steps
  • Next.jsの公式サイトにアクセス
  • ドキュメントの「はじめに」セクションを読む
  • ルーティング、データフェッチング、コンポーネントなどのトピックに関するドキュメントを読む
Vue Routerでアプリケーションのルーティングを実装する
Vue Routerを使用してアプリケーションのルーティングを学び、アプリケーションのURL構造と画面遷移を制御します。
Show steps
  • Vue Routerのインストールと設定
  • ルートの設定とコンポーネントのマッピング
  • パラメーターとクエリ文字列の使用
  • 動的ルーティングの設定
  • ナビゲーションガードの使用
他の学習者とディスカッションする
他の学習者とつながり、アイデアを共有し、理解を深めます。
Show steps
  • ディスカッションフォーラムやチャットに参加
  • 質問を投稿し、他の学習者の回答に反応
  • 自分の理解を説明し、他の学習者の理解を支援
Five other activities
Expand to see all activities and additional details
Show all eight activities
Next.jsのルーティングに関する問題を解く
Next.jsのルーティングに関する練習問題を解き、理解を強化します。
Browse courses on Next.js
Show steps
  • オンラインプラットフォームや問題集で問題を探す
  • 問題を注意深く読み、解く
  • 必要に応じてドキュメントやチュートリアルを参照
Next.jsアプリケーションでブログを作成する
Next.jsを使用してブログを作成し、コンテンツの作成、管理、表示に必要な機能を習得します。
Browse courses on Next.js
Show steps
  • Next.jsプロジェクトを作成
  • ブログの投稿を作成するためのページを作成
  • 投稿のフォームを作成して、入力を受け付ける
  • 投稿データをサーバに送信して保存
  • 投稿を一覧表示するページを作成
Next.jsに関するワークショップに参加する
Next.jsに関するワークショップに参加し、専門家から直接学び、実践的な経験を積みます。
Browse courses on Next.js
Show steps
  • 関連するワークショップをオンラインまたはオフラインで探す
  • ワークショップに登録して、参加する
  • 講師の指示に従い、実践的な課題に取り組む
個人プロジェクトに取り組む
独自のNext.jsアプリケーションを構築し、ルーティング、データフェッチング、スタイリングなどのスキルを応用します。
Show steps
  • プロジェクトのアイデアを考え出す
  • アプリケーションの構造を計画
  • 必要なコンポーネントとページを作成
  • ルーティングを設定して、ページ間を移動
  • データフェッチングを実装して、APIからデータを取得
業界のイベントに出席する
業界のイベントやカンファレンスに参加して、他の専門家とつながり、新しいトレンドや技術を学びます。
Show steps
  • 関連するイベントをオンラインまたはオフラインで探す
  • イベントに登録して、参加する
  • 他の参加者に会い、名刺を交換する

Career center

Learners who complete Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座 will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Course image
Rating
4.4 Filled star Filled star Filled star Filled star Empty star
Effort
8.5 total hours
Via
Udemy
Instructor
Shin Code
Language
日本語
Traffic lights
Read about what's good
what should give you pause
and possible dealbreakers
Teaches the use of Nextjs, shadcn/ui, contentLayer, NextAuth, Supabase, and Prisma for building a blog post web application, developing practical skills that are applicable in real-world settings
Utilizes a project developed by world-renowned web engineer "shadcn" as reference, to learn from industry-leading coding practices
Suitable for learners seeking to build full-stack web applications and develop proficiencies as full-stack engineers
Assumes prior knowledge of HTML/CSS/JavaScript and a foundational understanding of React
Requires JavaScript experience for a smoother learning process
Covers a wide range of topics, including Nextjs AppRouter implementation, RSC considerations, responsive design, content management, user authentication, database management, form validation, and more
Share this
Share to help others discover this course.
Facebook LinkedIn X Reddit Link Email
Begin learning today
Enroll now to gain full access to Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座.
Enroll now
Save for later
Add this course to your list. Find it anytime.
Save
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser