Next.js14で掲示板Webアプリケーションを作ってみよう【Supabase/react-hook-form/zod/shadcnを利用】

Рет қаралды 16,127

3 ай бұрын

#入門 #プログラミング #nextjs #supabase #react #shadcn #tailwindcss #typescript #webエンジニア #独学 #webアプリ開発
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2021/12/31/udemy...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業が学べるプラットフォーム🚀
🎁月額2500円でWebプログラミング全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁定期的にお仕事・副業の発注
🎁ShinCodeと1対1で話せる
🎁コミュニティ機能付き
↓↓↓↓↓
code-s-school-5bc2.thinkific....
🌟Web開発案件も募集中です🌟
shincode-hp.pages.dev/for-bus...
Webの開発案件も募集しております。
-----------------------------------------------------------------------------------------------------------------------------
おすすめWeb系IT企業はこちら ↓
株式会社WorldHacks（ワールドハックス）
【HP】worldhacks.co.jp
【X】 / worldhacks20220324…
採用も拡大中のため、HPやWantedlyの採用基準をご覧の上ご応募ください。
社長の紹介
森下浬（もりしたかいり）
【X】 / kairi_morishita
株式会社WorldHacks代表取締役。
日本体育大学体育学部卒。完全未経験からエンジニアに転職後、株式会社WorldHacksを設立。現在はWeb、アプリの受託開発をメインで行っており、新規のサービス立ち上げから既存サービスの保守運用まで業界問わず様々な企業様の開発を支援。
-----------------------------------------------------------------------------------------------------------------------------
【この動画を視聴するメリット】
・Next.js14の基礎が分かる
・Supabaseを利用してDB保存ができる
・react-hook-formとzodでバリデーションチェックができる
・shadcn/uiライブラリの使い方が分かる
・Next.jsのServerActionsの実装方法が分かる
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ3000人突破
・Webアプリ/サイト開発数：200以上
・生きがい：プログラミングでサイトやアプリを作ること
★チャンネル登録はこちらから★
/ @user-hl9uv6cv7k
★今回のソースコード★
github.com/Shin-sibainu/bbs-w...
★運営者SNS★
Twitter： / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンドマイクアームスタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。

Пікірлер: 52

@user-en4ys7om7n 3 ай бұрын

こういう実際に作る系の動画本当に神…ありがたいです！

@user-hl9uv6cv7k 3 ай бұрын

ありがとうございます！これからもぼちぼち動画は上げていく予定です

@user-jl9ki6ih5p 3 ай бұрын

shinさんのおかげでreact、nextがむっちゃ使えるようになった！ありがとう😊感謝です😊

@user-hl9uv6cv7k 3 ай бұрын

よかったです！ ReactやNextは結構奥が深いので、これからもぼちぼち動画出していきますね😇

@user-qt9do5pe8j 3 ай бұрын

すごくすごく助かります！！ 13の動画はあっても14は少なかったので…

@TakumiY46 3 ай бұрын

有料級の動画ありがとうございます！知りたかった事が全部紹介されていてありがたいです😂 これからも応援してます！

@user-hl9uv6cv7k 3 ай бұрын

ご視聴ありがとうございます！認証がこの動画ではないので、また別のKZbin動画かUdemyの方を参照していただければ、より理解が深まると思います

@TakumiY46 3 ай бұрын

@@user-hl9uv6cv7k 返信いただきありがとうございます！ Udemyでも勉強させていただきます〜！業務上オンプレ環境なので、supabase使えないんですよねぇ、、と思っていたらローカル版supabaseがあるようなので、ローカル版が使えるか試してみます！

@TakumiY46 3 ай бұрын

@@user-hl9uv6cv7k 返信ありがとうございます！認証についてもUdemy等で勉強させていただきます！業務上オンプレ環境に限定されているので、ローカル版のsupabaseの構築を試してみます！どうやらDocker上で動くようなのですが、、色々調べながら頑張ってみます！（もしよければ動画で解説していただけると助かります😂）

@nmv8592 2 ай бұрын

いつも素敵な動画をありがとうございます。最近Nextjsの勉強をし始めて、シンさんの動画を見つけました。とても役立っていて、出会えて良かったです。udemyでも買って勉強しています！ちょっとミスした所もカットせず見せてくれるので、初心者の私にはとても分かりやすいです。next.js typescript tailwindで全てresposibleなecommerceのwebsiteの作り方の動画あげて欲しいです！これからも動画楽しみにしています！！🌷

@user-hl9uv6cv7k 2 ай бұрын

いえいえ！こちらこそ、ご視聴ありがとうございます。ミスした部分も見せた方がいいですかね。これからもそう編集するようにします。 Eコマースサイトですね。結構ヘビーな動画になりそうですので、出すのであればUdemyかなと思います！動画講座販売アプリケーション開発は来週あたりにUdemyで出す予定です！はい！どうもありがとうございます！

@shinyapython5260 Ай бұрын

いつも楽しく勉強させていただいています。ところでこのアプリをVercelにデプロイするところの方法や、注意点などあれば動画見てみたいです！

@user-dx2pv2bo3f 3 ай бұрын

いつもありがとうございます! Server action 詳しく解説して欲しいです! Serveractionで全てが代替できる訳では無いという記事をみつけ、Apiルートを使う場合との違いや、form外での状態変化(starttransition?)の扱い方などが自分で調べてもイマイチ理解できませんでした。いつものようなわかりやすい解説していただけたらなあと思っています!!

@user-hl9uv6cv7k 3 ай бұрын

いえいえ、こちらこそご視聴ありがとうございます！useFormStatus等のHooksは確かformのaction属性でserveractionを使ったときしか機能しないようなので、今回は説明ができませんでした。そうですね。Serveraction用に動画とるのもありですね。リクエスト、感謝です！

@user-ny1bn4xb8f 2 ай бұрын

Next.jsは触ったことなかったので、入門になりました。reactベースで運用分が完成したら、リッチなNext.jsを技術採用していたいです。

@yomobi0 2 ай бұрын

クオリティの高い動画をいくつもあげていてすごいです… とても勉強になってます！！ただ1点のみ気になったので指摘させてください🙇 useStateなどhooksにおけるuseの発音はユーズじゃないでしょうか？名詞としてuseを使う際はユースで合っているのですが💦

@user-hl9uv6cv7k 2 ай бұрын

ご視聴ありがとうございます！そうですね！ユーズと発音していたつもりがユースになっていたみたいです。ご指摘ありがとうございます。今後気を付けたいと思います。

@user-xz7eg8jl8m 3 ай бұрын

5:04 拡張機能の名前 ES7+ React/Redux/React-Native snippets

@user-zc8jx4xx8d 3 ай бұрын

動画投稿ありがとうございます！非常に勉強になります。 Githubは、initial commitだけなので、プッシュ忘れていませんか？cssをコピーできません。

@user-hl9uv6cv7k 3 ай бұрын

pushし忘れておりました... ありがとうございます。pushしましたのでもし宜しければご確認いただければと思います。

@tatsuya_yamakawa 3 ай бұрын

Next.jsとSupabaseを使ったフルスタックブログ興味あってチュートリアル動画よく見るのですが、本文の任意のところで画像を挿入するようにはできるのでしょうか。

@user-hl9uv6cv7k 3 ай бұрын

ブログに関してはマークダウン形式での投稿orCMSを使った投稿が一般的だと思います。そうすれば本文の途中に画像挿入することができますね。

@tatsuya_yamakawa 3 ай бұрын

@@user-hl9uv6cv7k クライアント用にオリジナルで作りたかったのですが、やっぱりCMS使うのが現実的ですかね。だからチュートリアル動画ないのかな……。そちらで検討してみます、ありがとうございました。

@user-hl9uv6cv7k 3 ай бұрын

@@tatsuya_yamakawa スキーマとデータ保存だけCMSに任せてレイアウト自体は全部CSSでカスタマイズできるので、MicroCMSとか使ってみてはどうでしょうか。日本だと有名なCMSですね。

@user-lz2gt9fs6z Ай бұрын

いつもお世話になっております！ onSubmitに型エラーがでるのですがなぜでしょうか？型 '(value: FormSchemaType) => Promise' の引数を型 'SubmitHandler' のパラメーターに割り当てることはできません。パラメーター 'value' および 'data' は型に互換性がありません。型 'FieldValues' には型 '{ username: string; title: string; content: string; }' からの次のプロパティがありません: username, title, content　ts(2345)

@user-hl9uv6cv7k Ай бұрын

以下はどうでしょうか。型の確認と修正: FormSchemaType が具体的にどのようなプロパティを持っているかを確認し、FieldValues 型で期待される { username: string; title: string; content: string; } と一致するように調整する必要があります。型定義の一致: onSubmit 関数で使用する関数の型定義を、SubmitHandler に適合するように変更します。具体的には、関数の引数を FieldValues 型にして、以下のように定義すると良いでしょう： typescript Copy code interface FormSchemaType { username: string; title: string; content: string; } const onSubmit: SubmitHandler = async (data) => { // ここに処理を書く }; ここで、SubmitHandler は react-hook-form などを使用している場合に見られる型で、FormSchemaType を FieldValues の代わりに使用しています。型キャストの使用: 型が異なる場合に強制的に一致させる必要があるときは、型キャストを使用することもできますが、これは型安全性を低下させる可能性があるため推奨されません。最も適切なのは、FormSchemaType と FieldValues の定義を見直して、適切に一致させることです。これにより、型エラーを解消し、コードの安全性を保つことができます。

@user-lz2gt9fs6z Ай бұрын

@@user-hl9uv6cv7k ありがとうございます！

@tikyuto6208 7 күн бұрын

素敵な動画ありがとうございます！他の方もコメントで書かれていますが、57分あたりのConsoleでgetDetailBBSDataを呼ぼうと思っても、エラーが出ていしまいます。Unhandled Runtime Error　Error: Unexpected end of JSON inputというのが表示されるのですが、同改善したらいいでしょうか？paramsの指定含め全て確認しましたが、どうしてもエラーが出てしまします。ご教授のほどお願いいたします。

@user-hl9uv6cv7k 6 күн бұрын

ご視聴ありがとうございます！ apiが正常に叩けていない可能性がありますね。コード貼り付けていただけると何かアドバイスできるかもです。

@tikyuto6208 6 күн бұрын

@@user-hl9uv6cv7k ご返信ありがとうございます！ APIのコードは以下の通りになります！ async function getDetailBBSData(id: number) { const response = await fetch(`localhost:3000/api/post/${id}`, { cache: "no-store", }); const bbsDetailData: BBSData = await response.json(); return bbsDetailData; } Shinさんと同じコードなのですが、何度やってもデータが取得できません。 URLはlocalhost:3000/bbs-posts/$%7Bid%7Dとなります。何か改善方法がございますでしょうか？よろしくお願いいたします。

@user-qi1sg7iz1i 3 ай бұрын

動画投稿ありがとうございます！ Githubのappディレクトリにcomponentsが無いのですがご確認いただけますか？

@user-hl9uv6cv7k 3 ай бұрын

すみませんでした！！たった今さっき追加しました。お手数をおかけして申し訳ありません。

@user-qi1sg7iz1i 3 ай бұрын

@@user-hl9uv6cv7k いつも有益な動画をありがとうございます！もしよろしければ一つ質問なのですが初学者はこういった動画１つを何も見ずに書けるくらいマスターすべきでしょうか？それとも幅広く知識を身につけた方が良いでしょうか？

@user-hl9uv6cv7k 3 ай бұрын

@@user-qi1sg7iz1i 僕の意見ではまずは1つのフレームワークや言語をマスターするべきだと思います。たとえばNext.jsとかReactとか。今だとNext.jsでAPIまで作れちゃうので、バックエンド言語すら学ばなくても良くなってきました。Javascriptだけで完結するなんてことも近々あるかもです。そうですね。GPTやブログや公式ドキュメントはふんだんに使って、動画などを見ずに作れるようになると自信にもなるはずです。動画はあくまでも「流れ」を理解する用に利用してもらうといいですね。何度も作っていくと簡単に作れるようになるので、がんばってくださいね。

@user-qi1sg7iz1i 3 ай бұрын

@@user-hl9uv6cv7k ありがとうございます！とても参考になりました!!

@user-hj9lc4jq9c Ай бұрын

これTypescriptじゃなかったらimportとか手動でしないといけないですよね？　create-next時にtsを選択しないとjsになると思うのでそれで補完が効かないんじゃないかって思っているのですが

@user-hl9uv6cv7k Ай бұрын

importの機能は確かEmmet機能だった気がします。typescriptであれば型定義ができるのでプロパティなどの補完が効くようになります。自動importで検索などしていただくと良いかなと思いますね。

@user-hj9lc4jq9c Ай бұрын

@@user-hl9uv6cv7k ありがとうございます！！

@user-yr3yw6vv5v 3 ай бұрын

supabaseがpnpmに対応してくれればいいんだけどな・・・

@user-cu3zc3hv2w 3 ай бұрын

「開発者を魅了するオープンソースソフトウェア Supabase とは」という動画にて、Supabaseの中の人で知られるタイラーさんが「スーパーベース」と発音しています。日本語においてはスーパーベースやスーパベースと呼ぶのが良いかもしれません。

@user-hl9uv6cv7k 3 ай бұрын

あ、その発音なんですね笑英語圏の講座も見るんですけどスパベースっていう発音の方がおられたような気がしたので、これでいっちゃってます。。

@user-jl9ki6ih5p 3 ай бұрын

英語の発音的にスパが明らか合ってるんだよね、、、厳密にはス↑パだけども、いちいちしてきすることじゃないよ。細かいな。

@user-cu3zc3hv2w 3 ай бұрын

@@user-jl9ki6ih5p 中の人が日本語ではそう読んでるよ～ってソース付きで共有しただけなんだけどなぁ。文句あんならタイラーさんに『お前の発音間違ってるから「スパベース」って呼べ』って指摘してきてください。

@apex4504 9 күн бұрын

npx prisma migrate dev --name initを打っても、Environment variables loaded from .env〜は表示されるのに、いくら待っても開始されないです・・・

@user-hl9uv6cv7k 8 күн бұрын

以下、GPTからの返答ですが参考になるかもです。 npx prisma migrate dev --name init コマンドがうまく動かないとのこと、問題解決に向けていくつかの可能性を確認しましょう。 .env ファイルの設定確認: Prismaはデータベース接続情報を .env ファイルから読み込むため、正しく設定されているか再確認してください。特に DATABASE_URL の値が正しいかどうかを確認してください。データベースのアクセス: データベースが正しく動作しているか、またアクセスできる状態にあるかを確認してください。ローカルのデータベースであれば、該当のデータベースが起動しているか、リモートのデータベースであれば接続情報が正しいかを確認します。 Prisma スキーマの確認: prisma/schema.prisma ファイルがプロジェクトのルートに存在し、構文エラーがないかを確認してください。依存関係の確認: node_modules を削除し、package-lock.json または yarn.lock を削除後、npm install または yarn を実行して依存関係を再インストールしてみてください。ログの詳細確認: コマンドを実行するときに、追加のログを出力するために DEBUG=* を前に置いて実行してみてください。例えば、DEBUG=* npx prisma migrate dev --name init としてください。これにより、何が問題であるかの詳細が得られるかもしれません。これらのステップを試しても問題が解決しない場合は、具体的なエラーメッセージや、.env ファイルと schema.prisma ファイルの設定（機密情報を除外して）を共有していただけると、さらに具体的なアドバイスが可能です。ご参考までに。

@apex4504 8 күн бұрын

@@user-hl9uv6cv7k ありがとうございます！上記で解決できなかったので、自分でもGPTで調べてみます！

@sorayuzu-hp5im 2 күн бұрын

.envのDATABASE_URLの末尾のport番号を5432に変更してみてはどうでしょうか？