なぜNext.jsを使うのか

Transcript

1. なぜNext.jsを使うのか
   川上 奈津美
   

   View Slide

2. 自己紹介
   ・川上 奈津美
   ・LaravelやReact Native書いてる人
   ・最近個人開発アプリをリリースした
   

   View Slide

3. 本日おはなしすること
   なぜNext.jsをつかうのか、ユーザー側のメリットと開発者側のメリット
   

   View Slide

4. Laravel,React,Next.jsでユーザーにHTMLが表
   示されるまで
   

   View Slide

5. Laravelでのレンダリング
   TODO一覧画面を表示して！
   
   
   
   はなこのTOD
   
   手紙をだす
   ジムに行く
   
   
   
   
   

   View Slide

6. 素のReact(CSR)でのレンダリング
   TODO一覧画面を表示して！
   
   
   
   
   
   S3などの静的ホスティングサーバー
   

   View Slide

7. 素のReact(CSR)でのレンダリング
   めっちゃでかいJavaScript読み込んだのにデータ何もないやん・・・
   APIサーバーくんたのむで・・・
   {
   “title”: “はなこのTODOリスト”,
   “todos”: [{“title”: “手紙を出す”}]
   }
   これがSPAの初回読み込み遅い問題
   

   View Slide

8. Next.js(SSR)でのレンダリング
   TODO一覧画面を表示して！
   
   
   
   はなこのTOD
   
   手紙をだす
   ジムに行く
   
   
   
   
   

   View Slide

9. Laravelとやってること同じじゃない？
   

   View Slide

10. 同じようで違う技術の螺旋階段
    ● Next.jsは、画面遷移時にページの再読み込みをしない
    ○ 素のReact同じく、JSONを取得してDOMを書き換える
    ● プリフェッチによるデータの先読み
    ○ Viewportに現れたら、そのリンク先の画面構築に必要な情報を事前に取得する (js,json)
    

    View Slide

11. 開発者側のメリット
    

    View Slide

12. 従来のMPAにおけるFE開発のペインポイント
    ● 状態に応じてDOMを追加/削除/編集するJavaScriptコード
    ● どこで使われいるのか分からないCSS
    ● 存在するかわからないデータやプロパティ
    ● 散らばるロジック
    

    View Slide

13. 従来のMPAにおけるFE開発のペインポイント
    ● 状態に応じてDOMを追加/削除/編集するJavaScriptコード
    →宣言的UI
    ● どこで使われいるのか分からない
    CSS
    → Styled Component
    ● 存在するかわからないデータやプロパティ
    → TypeScript
    ● 散らばるロジック
    → Hooks
    

    View Slide

14. ではLaravelはもう使わないのか？
    

    View Slide

15. 必ずしもそうではないが、FE側はNext.js載せたほうがベター
    ● APIサーバーとして使う
    ○ Next.jsにもAPI Routesはあるが、がっつりDB操作を書くには貧弱
    ○ EloquentなどのDB周りは資産をそのまま引き継げる
    ● 求められるユーザー体験がノーコード以上Next.js未満のプロダクト
    ○ エッジケースかつ事業側要求は常に変化するので・・・
    ○ フルリプレイスも段階リプレイスも過酷なので最初から Next.js載せられるならそうした方がいいと思
    う
    ● LaravelやRailsのようなMPA扱ってるエンジニアならNext.jsもすぐ使いこなせると
    思う(個人の感想)
    

    View Slide

16. Vercel Templateのご紹介
    https://vercel.com/templates
    git cloneしてVercelのアカウントを繋
    げばすぐ動かせるNext.jsテンプレー
    トたち
    Hobbyプラン無料なのでぜひ動かし
    てみて！
    

    View Slide

17. ご清聴ありがとうございました
    

    View Slide