Tweet
Tweet

Slide 1

Slide 1 text

Next.js 採用の説得材料を考える 　井内 将俊（ペンギン丸） 1

Slide 2

Slide 2 text

自己紹介 井内将俊(いうち　まさとし) X：@pengin_engineer (ペンギン丸) 合同会社DMM.com(23新卒) バーチャルライブチャット → フロントエンド 開発 2

Slide 3

Slide 3 text

ところで皆さん 3

Slide 4

Slide 4 text

技術選定してますか？ 4

Slide 5

Slide 5 text

学生〜研修期間の技術選定イメージ 新しい技術！ 面白そうな 技術！ 使ったことのあ る技術 学びたい技術 よく聞く技術 何か カッコいい 技術 5

Slide 6

Slide 6 text

これを業務でやると 6

Slide 7

Slide 7 text

業務での技術選定のイメージ図 長期的に 負債にならな いか...? 運用 コストが高くな いか...? 学習コストが高 くないか...? 採用面で 魅力的か...? 7

Slide 8

Slide 8 text

「業務で」 「説得力のある」 「技術選定」 難しい... 8

Slide 9

Slide 9 text

Reactしか使ってないチームの 新規開発で Next.jsを採用する説得材料 🤔 9

Slide 10

Slide 10 text

技術選定することになった経緯 新卒研修でNext.js、AppRouter、SSR/SSG に触れる こうやってSSRを活 用するんだ！ 楽しい！ 10

Slide 11

Slide 11 text

技術選定することになった経緯 配属先でモノレポ React フロントエンドへ触れる ｽﾝ... 11

Slide 12

Slide 12 text

技術選定することになった経緯 モノレポリポジトリとは別に、新規リポジトリでサブ的な機 能をReactで実装予定と聞く 新しくリポジトリを作る.... 今まで通りReactで.... 12

Slide 13

Slide 13 text

技術選定することになった経緯 Next.js使いましょう！ うーん　理由は？ …SSRとか便利ですし SSRするってことは 専用のサーバーを追加して運 用するってこと？ その運用コスト以上の メリットがNext.jsにあるの？ 13

Slide 14

Slide 14 text

技術選定することになった経緯 - Reactで問題なく運用できている - SEO対策も不要 - Next 導入したらNode.jsサーバーを 追加で運用？ メリットが無い... 14

Slide 15

Slide 15 text

Next.jsを使うことで追加でサーバーが 必要なら、Next.jsは無理か... 15

Slide 16

Slide 16 text

Next.jsを使うことで追加でサーバーが 必要なら、Next.jsは無理か... 勉強不足！ 16

Slide 17

Slide 17 text

SSR用のNode.jsサーバーを 用意しなくても Next.jsは利用可能....! 17

Slide 18

Slide 18 text

Next.jsで静的出力 18

Slide 19

Slide 19 text

SSRは行えないので 素のReactとそんなに違いがない...? Next.js採用のメリットは...? 19

Slide 20

Slide 20 text

Next.jsを採用するメリット 引用：React公式ドキュメント20

Slide 21

Slide 21 text

Next.jsを採用するメリット 引用：React公式ドキュメント21

Slide 22

Slide 22 text

Next.jsを採用する説得材料 - Next.jsを導入するからといって Node.jsサーバーを運用する必要があるわけではない - 今後は素のReactではなくNext.js等のフレームワークを 用いたReact活用が主流となってくる 22

Slide 23

Slide 23 text

Next.jsを採用する説得材料 - Next.jsを導入するからといって Node.jsサーバーを運用する必要があるわけではない - 今後は素のReactではなくNext.js等のフレームワークを 用いたReact活用が主流となってくる 　　無事新規開発の技術にNext.jsを採用🎉 23

Slide 24

Slide 24 text

今回の学び - 技術選定は客観的な事実を元に行う - 最新の技術のキャッチアップが欠かせない - 先輩や同期に頼り、知見を聞かせてもらうことも大切 24

Slide 25

Slide 25 text

ご清聴ありがとうございました！ 25