渡邉 臣@設計オタク | JISOU

AIに「奪われる」→ 「年収アップ」に変えるキャリア戦略 | エンジニア人生変えます | 現役メガベンチャー社員 | 技術記事で年間1位(2年連続) | 日本一のアウトプットエンジニア | JISOU( | コンサル2社

[渡邉 臣@設計オタク | JISOU @Sicut_study]

Next.jsを手を動かしながら学ぶ
無料チュートリアルを公開しました！！

Next.jsを書いていてこんな不安ないですか。

「SSRとSSG、どっちを使えばいいんだろう」
「Server ComponentとClient Componentの境界がわからない」

その感覚の正体は「Next.jsの全体像が見えていないこと」
そしてAI時代、これがより重要になっています。

AIはコードを書いてくれます。
でも「どのレンダリング戦略を選ぶか」は人間が決める。

AIに正しい指示を出せる人
AIが書いたコードを正しく判断できる人
その前提に必要なのがNext.jsの基礎知識です。

【今回扱う内容】
・App Routerとルーティング
・Server Component / Client Component
・SSR / SSG / ISR / PPRの使い分け
・Server Actionsでサーバー処理
・use cacheディレクティブ
・Next.js × MicroCMS連携

テックブログサイトを実際に作りながら
「なぜこの設計にするのか」をセットで学べます。

自分が初心者の頃に欲しかったものを
そのまま形にしました。

・図解でサクッと理解できる
・手を動かしながら実践
・完全無料

【教材はスレッドにて】

見逃さないように
ブックマーク&リポストしておいてください！

https://t.co/ncff2syhKU

[渡邉 臣@設計オタク | JISOU @Sicut_study]

本日アジャイルの招待制のイベントであるAgile Infuseでユーザベース Product Teamを代表してLTを行いました！

最近はイベントに参加してなかったので、メンバー��員気づきがありました！

https://t.co/b2Nzhh2vl5

[渡邉 臣@設計オタク | JISOU @Sicut_study]

@jyota9613 ニッチ開発すぎておもろいですね

[渡邉 臣@設計オタク | JISOU @Sicut_study]

ユビキタス言語って用語集に思われがちだけど、言語の設計をするものっていう認識だったから綺麗に言語化されてた

仕��モデルは本当に大事
DDDしてますが軽量ば��かりなのはこういうとこにありそう

ドメインモデリング始めようについての言及が面白かったので必見

[kawasima@99卒 @kawasima]

ユビキタス言語について長年思ってきたことを書きました。
https://t.co/M2ZCq3Q2AF

[渡邉 臣@設計オタク | JISOU @Sicut_study]

これは絶対読んだ方が良いやつだ👀
仕様モデルも楽しみにしてます！！(UBの勉強会でやらせてもらってすごく役��ってます)

[kawasima@99卒 @kawasima]

以前、吉祥寺.pmで話した「古典ドメインモデルパターンの解脱」を原作として本にしました（フリーブックです！）。拙作のRaohのプロモーションを兼ねているのでJava前提ですが、読んでもらえると喜びます。 https://t.co/sNajAFJ66S

[渡邉 臣@設計オタク | JISOU @Sicut_study]

@jyota9613 お、次が見つかりそうですか？？

[渡邉 臣@設計オタク | JISOU @Sicut_study]

ぜひ！！手を動かすのがおすすめではあります！

[あきほ @akiho_engineer]

とりあえず渡邉さんのこれを流し観してみるか……。

[朝日奈 @ashunar0_mui]

next.jsはなんでもできる分、すごく複雑ですもんね…😢
これ読んですっきりしましょう！

[渡邉 臣@設計オタク | JISOU @Sicut_study]

ありがとうございます！！周辺知識もまとめて抑えられるように書いてるので良かったです！

[Ichi 個人開発 @prohorse777]

チュートリアルを一通りするとNext.jsのレンダリングの使い分けや、どのようにデータを取得すればよいかなど一通り理解できました！
環境変数の扱いなどにも触れており知識がない方でもどのように値を保持するかなども理解できるので、より実務に近い形で実装���流れをつかめると思いました！

[渡邉 臣@設計オタク | JISOU @Sicut_study]

本当にその通りですね！！
ありがとうございます！

[かい @uryu0000]

レンダリング戦略について、いつレンダリングするか、どこで処理するかを手を動かしながら学べてどの場合にどの戦略を使えば良いのか使い分け基準を自分の中で定義できた
AIがコードを書いてくれる時代だが、最終的に実装判断するのは人間でその判断のための基礎を学ぶチュートリアルとしておすすめ

[渡邉 臣@設計オタク | JISOU @Sicut_study]

@kXcS62x2VT51700 ありがとうございます！！

[渡邉 臣@設計オタク | JISOU @Sicut_study]

丁寧にありがとうございます！
全体的に要点抑えたのでよかったです！

[ARISA @ar1sa1115]

【感想】Next.jsの環境構築からApp Routerでのルーティング、動的ルートの実装まで一通り確認しました。Server Componentでasync/awaitを直接使い、useEffectなしでデータ取得できる点と、Qiita APIをSSRで取得することで環境変数が扱える一方、CSRではNEXT_PUBLICが必要になる違いを実装で理解できました。

[渡邉 臣@設計オタク | JISOU @Sicut_study]

ありがとうございます！！！
ギブアップがないのはすごく嬉しい言葉です😭

[ho@社会人8年目の備忘録 @ChaseEngineer]

CSR/SSR/SSG/ISRの違いを理解するのは手を動かしてみることだと実感！
2時間で一通りできるので、時間を理由にギブアップすることもないと思います！

[渡邉 臣@設計オタク | JISOU @Sicut_study]

こちらこそ楽しんでやっていただきありがとうございます！！

これからもどんどん学んでいつまでください🐈

[にゃん🐾猫好きエンジニア🐈 @nyan_p177]

いつもわかりやすい解説ありがとうございます😼

[渡邉 臣@設計オタク | JISOU @Sicut_study]

ありがとうございます！！
レンダリング戦略は実際に触るのが1番���いですし、React19の知識はISRで結構理解できます！！

クオリティを評価いただけるの嬉しいです🙆‍♂️

[jota@プロのエンジニア @jyota9613]

正直Next.jsって最初とっつきにくかったんだけど、
このチュートリアルやったら一気に楽しくなった。

「CSR/SSR/SSG/ISRの違い？まぁなんとなく…」
状態だった自分が、手を動かして2時間で腹落ちした。

無料でこのクオリティはやばい。
初���者は絶対やるべき。

アウトプット最強！🔥

[渡邉 臣@設計オタク | JISOU @Sicut_study]

@nyan_p177 ぜひぜひ！！楽しいチュートリアルになりました！

[渡邉 臣@設計オタク | JISOU @Sicut_study]

Next.jsを手を動かしながら学ぶ
無料チュートリアルを公開しました！！

Next.jsを書いていてこんな不安ないですか。

「SSRとSSG、どっちを使えばいいんだろう」
「Server ComponentとClient Componentの境界がわからない」

その感覚の正体は「Next.jsの全体像が見えていないこと」
そしてAI時代、これが��り重要になっています。

AIはコードを書いてくれます。
でも「どのレンダリング戦略を選ぶか」は人間が決める。

AIに正しい指示を出せる人
AIが書いたコードを正しく判断できる人
その前提に必要なのがNext.jsの基礎知識です。

【今回扱う内容】
・App Routerとルーティング
・Server Component / Client Component
・SSR / SSG / ISR / PPRの使い分け
・Server Actionsでサーバー処理
・use cacheディレクティブ
・Next.js × MicroCMS連携

テックブログサイトを実際に作りながら
「なぜこの設計にするのか」をセットで学べます。

自分が初心者の頃に欲しかったものを
そのまま形にしました。

・図解でサクッと理解できる
・手を動かしながら実践
・完全無料

【教材はスレッドにて】

見逃さないように
ブックマーク&リポストしておいてください！

https://t.co/ncff2syhKU

[渡邉 臣@設計オタク | JISOU @Sicut_study]

動画教材
https://t.co/25jtJASYoQ

[渡邉 臣@設計オタク | JISOU @Sicut_study]

@nyan_p177 ありがとうございます！自信作です！

[渡邉 臣@設計オタク | JISOU @Sicut_study]

日曜17時
YouTube動画を投稿します！

Next.jsを初心者でも理解しやすいように
0から徹底的に解説！これ1で本完全理解！

SSR・SSG・ISR・PPRを
実際に手を動かして体感します

初心者が難しいと感じるポイントは図解を用いて
超丁寧に解説していくので誰でも最後までできます！

お楽しみに！

[渡邉 臣@設計オタク | JISOU @Sicut_study]

@jyota9613 記事と日報お願いします！