自分用 1:16　Next.js13インストール 2:28　Next.js13の雛形ディレクトリの説明 4:16　開発環境立ち上げ 4:30　HTML作成 6:26　Tailwind css作成 9:15 AddTask.tsxコンポーネント作成 11:57　TodoList.tsxコンポーネント作成 14:45　JsonServer作成 18:30　api.ts作成 20:46　SSR、SSG、ISRについての説明 24:33　page.tsxでapi.tsを呼び出す 27:15　TodoList.tsxの一部をTodo.tsxコンポーネントに分離 29:30　AddTaskボタンを押したら、入力内容がタスク一覧に反映される機能作成 34:23　uuid追加方法 35:34　タスクの編集機能追加 42:43　editを押したらタスク欄に自動でフォーカスが当たる機能追加 44:32　削除機能を追加 46:14　SSR・SSGまとめ

React、next勉強始めたばかりですがReactチュートリアルをnextで再現できずに困ってました 神すぎて途中から全く何言ってるか分からなかったですが3万回くらい見たいと思います！

初めてNext.jsでアプリケーション作成できました。ありがとうございました。

初心者なので分からない部分を止めて学んで再開してをやってたら４日かかっちゃいました。JavaScriptは一通り触れてある程度理解していることがある前提で、非同期処理の理解やTailwind CSSを記述するためのCSSの基礎と、TypeScriptの記法とJSXの記法を理解してないとついていくのも難しいかなと思いました。フロントエンドでサーバまで触るのでおおむね全部このTODOアプリの実装チュートリアルで触れられるなと思いました。ここにpythonなどで処理を行わせたり、実装のためのgit、firebase、AWSなどが絡むと更に学ぶことが多そうだなと感じました。非常に有益な動画だったと思いました！ありがとうございました。

CRUD勉強になりました！！ありがとうございます！

毎度毎度、勉強になります

ありがと！役に立った！

シンプルな構成で分かりやすかったです。　 今回はデータを追加するのに別の関数にしてますが、新しいnextjs のapi routesの使い方が知りたいです。😂

いつも拝見しています。色々な場面でたすかっています。 vscodeの“ターミナル”の使い方がよくわかりません、 基本的な概念、操作方法、どんな作業のときに適しているのか？ よろしくお願いします。

いつも楽しく拝見さしていただいております。 nextjsとelectronでデスクトップアプリを作るのは非効率でしょうか？ electronでサーバーサイドの処理を書く際にnextjsが邪魔になって使えないというようなことが考えられますか？

これを機にTypescriptの勉強をしようと思います....

@onigiriJRuchiBoost

4 ай бұрын

個人情報書くなW

型定義するときTodoとかUserとかに命名してしまうと コンポーネント名と被らない？？？ 自分はTodoならTodoTypes、UserならUserTypesのようにTypesとかによくする。 こうしておけばコンポーネント名と被らない、どのコンポーネントの型定義なのかわかりやすくなるし。

いつも勉強になります。かなり変わりましたね。

app routerのrouter handlerは使用せず、api routesを従来通り使用するのが良いのですか？

自分がデザイナーなのかどうしてもtailwind cssのようなcssフレームワークは使いたくないって思ってしまいます。基本はscssで作るのが好きなので。 あとプログラムの仕組みを作るときはcssは当てないように心がけています。 css当てちゃうとそのプログラムをプロジェクトで使いたいと思ったときcssのリセットが面倒だし、cssを組み込むとコードが最小単位じゃなくなって仕組みを理解するのが難し苦なるから。

getAllTodosをSSR(cache: 'no-store')に設定していても、addTodoやeditTodoを行ったとき、その作成内容や編集内容が、ページをリロードしないと取得できません。 githubのソースコードを見ると、useRouterを使用し、データをfetchし直しているようで、こちらを追加すると無事機能しました。 SSRでは、データの更新があればすぐに更新されるものと認識していました。 この辺りのご説明をしていただけると幸いです。。。

同じものを作ろうとした時にTodoListのliタグでキー指定する時にkey={todo.id}だとエラーになります。 key{todo.id as React.key}でキャストすると一時的にエラーはなくなります。 型が違うのかなとJSONファイルから追ってましたが特にコードがおかしい部分は見受けられせんでした。 これは何故出るのでしょうか。 もしよければこの解決法を教えていただきたいです。

naisudesu

よくみたら、.tsと、.jsちょっと、アイコンが似てますね。

連投コメントすみません。 AddTaskで追加はできるのですが いちいちリロードかけないと画面が更新されません。 同じようにやってるはずなのですが、原因はわかりますか？

@user-hl9uv6cv7k

10 ай бұрын

addtaskした後に、router.refresh()を読んであげると良いかもです。 router = useRouter() を使ってみてください。import router from "next/navigation"だったはずです。

.tsxって、なんか、チャットGPTみたいなマークをしてますね...(？)

いつも学習させていただいております。 １７分ぐらいのターミナル操作で同じ打ち込みをしてもエラーになってしまいます。 どのように対処したらいいですか？ ここまでは順調でした。 お手隙の際にご返信頂けたら嬉しいです。 npm ERR! Missing script: "json-server" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found と表示されます。

@user-hl9uv6cv7k

7 ай бұрын

npm install -g json-server としてみてください。おそらくjson-serverのインストールに失敗しているのかもしれません。

@user-kg2nu7vm6z

7 ай бұрын

@@user-hl9uv6cv7k ご丁寧にありがとうございます。 早速やってみました。 up to date, audited 87 packages in 773ms 12 packages are looking for funding run `npm fund` for details 3 high severity vulnerabilities Some issues need review, and may require choosing a different dependency. Run `npm audit` for details. このように表示されました。 その後、npm run json-serverを入力しても 同じエラーが出てしまいました。 お手数をおかけして申し訳ございませんが解決方法をご教授頂けますと幸いです。

追加 等をした時に、getAllTodosをしなくても、更新されるのは何故ですか？

@user-qd7yl7fe4t

10 ай бұрын

useRouterでリフレッシュしてるっぽいです！

@user-hl9uv6cv7k

10 ай бұрын

router.refresh() が必要でしたね。僕の環境ではrefreshせずに更新できたので 動画では説明しませんでした。申し訳ありませんでした。