K.Takahashiをフォローする

【Next.js】フロントエンド開発が捗るReactフレームワークの魅力

フロントエンド

これまで弊社のフロントエンド開発は主にVue.jsを使っていましたが、昨年から巷で有名なReactも取り入れはじめました。

その中でNext.jsという言葉を聞く機会が何度かあったのですが、正直なところ何がいいのか不明でした。

(むしろSSRなど聞き慣れない言葉に嫌悪感を感じていたくらいです)

そんな私が半年前くらいからNext.jsを使ったプロジェクトにアサインして言えることは…

「Next.jsめっちゃ便利!!!」ですw

今回は私と同じようにNext.jsがよく分からず敬遠している方へ、実際に使ってみた感想を踏まえて、その魅力を解説していきます。

Next.jsのメリットとは?

公式サイトには色々なメリットが記載されていますが、ここでは3つにピックアップしてご紹介します。

  1. Zero Config ~ 面倒な設定不要 ~
  2. Optimization ~ 自動最適化 ~
  3. API Routes ~ 何ならAPIもつくれる ~

Zero Config ~ 面倒な設定不要 ~

Next.jsを使うと具体的にどんな設定が不要になるのか、通常のReactを使った場合と比較してみましょう。

設定項目ReactNext.js
ルーティングreact-router-domといったパッケージをインストールして設定する/src/pages/配下のファイル・フォルダがそのままURLになる(補足①)
WebPackwebpackといったパッケージをインストールして設定する特に設定不要
※必要に応じてnext.config.jsに設定を書き加える
Fast Refresh / Hot Reloadreact-refreshreact-hot-loaderといったパッケージをインストールして設定する特に設定不要(補足②)

上記はあくまで一例ですが、必要最低限の設定はNext.js側で行ってくれるので、開発者はプロジェクトに合わせたパッケージのインストールと設定を行うだけで済みます。

ルーティング

例えば、/src/pages/配下を下部の画像のようにしますと、このようなルーティングが自動で出来上がります。

  • http://localhost:3000/login
  • http://localhost:3000/home
  • http://localhost:3000/user
  • http://localhost:3000/user/12 ← 角括弧[]の部分は可変になります(=動的ルーティング)

Fast Refresh

Fast Refreshとは、ファイルの変更をブラウザのリロードなしで即時反映してくれる機能です。

私はこの機能をNext.jsで初めて使ったのですが、ファイル変更のたびに発生するブラウザのリロード地獄から開放され、コーディングがかなり捗ります。

Optimization ~ 自動最適化 ~

画像最適化

Webページの表示速度を上げるうえで、画像のファイルサイズは非常に重要な要素です。

Next.jsに搭載されている「next/image」は、画像のリサイズ・遅延読み込み・レスポンシブ対応の最適化をすべて自動で行ってくれます。

設定にもよりますが、もともと738KBのJPG画像を10.4KB(約98.6%減)にリサイズしてくれたりと、ファイルサイズの節約効果がかなり大きいです。

レンダリング最適化(SSG/SSRなど)

この概念がなかなか難しいところだと思います。

これを説明するにあたって、通常のReactアプリのソースをブラウザで見てみましょう。
(ブラウザで右クリック→ページのソースを表示)

<body>
  <div id="app"></div>
  <script src="/js/app.js?id=xxxxxxxxxxxxxxxxxxx" defer></script>
</body>

見てお分かりのとおり、<div id=”app”></div>の中身が何もありません。

現在はGoogleのウェブクローラ(Googlebot)も進化して、JavaScriptベースのアプリも処理してくれるようになりましたが、静的ページに比べて処理が多く、インデックスが遅くなるのではないか?という懸念からSEO上不利と言われています。

参考:JavaScript SEO の基本を理解する / Google検索セントラル https://developers.google.com/search/docs/advanced/javascript/javascript-seo-basics?hl=ja

それに比べて、Next.jsのアプリのソースを同様に見てみてると、静的ページになっていることが分かります。

正確には違いますが、このようにサーバー側でHTMLソースを生成して配信する仕組みをSSR/SSGと言います。

<body>
  <div id="__next" data-reactroot="">
    <div class="Master_root__s6fJp Master_bgLight__29ltg Master_isFullScreen__ngDYS">
      <div class="login_root__hoEdE">
        <div class="Panel_root__ESreI Panel_shadow__xLG_y Panel_rounded__YMCFg Panel_pad__pDW_I white">
          <form>
            <div class="Input_root__fF3Yc">
              <label>ログインID</label>
              <input type="text" id="loginId" name="loginId" class="Input_input__90wB3"/>
            </div>
            <div class="Input_root__fF3Yc">
              <label>パスワード</label>
              <input type="password" id="password" name="password" class="Input_input__90wB3"/>
            </div>
            <div class="login_forget__Nk3I2" role="button" tabindex="0">ID・パスワードをお忘れの方はこちら</div>
            <button type="submit" class="Button_root__S3Vpm Button_primary__ikEHo Button_rounded__Jhvoi Button_md__wzdJs login_loginBtn__j8Njx">ログイン</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="/_next/static/chunks/react-refresh.js?ts=1649931279038"></script>
  <script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/login","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
</body>

API Routes ~ 何ならAPIもつくれる ~

Next.jsは/src/pages/api/配下にファイルやフォルダを追加することで、GraphQLなどと組み合わせてAPIも作成することができます。

例えば、/src/pages/api/配下を下部の画像のようにしますと、このようなAPIが出来上がります。

  • http://localhost:3000/api/login
  • http://localhost:3000/api/user
  • http://localhost:3000/api/user/12 ← 角括弧[]の部分は可変になります。

まだ使ったことはありませんが、APIもNext.jsで作れるのであれば、Laravelといったバックエンドのフレームワークを使用せずにWebアプリの開発を行うことも可能になります。

まとめ

今回はNext.jsの具体的な機能や使い方には触れることができませんでしたが、導入を検討するメリットが非常に大きいフレームワークであることがお分かりいただけたかと思います。

私自身、まだまだ勉強中なところが大きいので、これから実務で理解を深めて、具体的な使い方や有益な情報をまとめていきます。