Sota Tech Blog.

今更ながらNext.js ver13投稿日: 2023年 4月24日

新機能続々

最近ようやくひと段落した。
最近結構忙しい毎日を送っていたのであまり、キャッチアップする時間がなかった。
友達にちょろっとApp directoryという単語のみ聞いたのでどんな内容になったのか気になっていたのでちょうどよかった。
最近どんどんフロントエンドがすごくなっている。
だが、それと同時に今回のNextjsのバージョンもReactの最新版についていけなければ意味がわからない部分が多い。
いずれにしてもReactに大きく依存していることを忘れてはいけない。
とても使いやすくなりつつあると感じることができるようになっている。

参考

ここもogpを実装しようか迷っている....
Next.js version13
Upgrade guide

このブログについて

結論としてこのブログについてはしばらくは様子見にしていこうと思う。
過去の記事でも挙げているがこのブログはNext.jsのバージョン12によって作成されており、おそらくバージョンアップすること自体は容易ではあるが公式でもあるようにまだ本番環境は非推奨となっているので実際に使ってみるとはまだだが、概念としてキャッチアップしていきたいと思っていた。
もしかして、これも他の技術で作り直してくるかもしれない。Astroが静的サイトを作成するためのフレームワークや拡張子ということは理解することが出来たので、これからは大きな違いなどもキャッチアップしていきたい。
けれど、ImageやText、Link周りやOGPの作成機能はとても斬新なので利用することができるならしてみたい

新機能

App directory


こんな感じに変更されている。
今まではpagesディレクトリを利用していて、パスの作成をしていたが今度からはappディレクトリの配下に置くことになる。
個人的にはpage.tsxがrootページになるという部分は大賛成でindex.tsxだと少し違和感があったのでこの問題が解決しそうになるのはとてもいいがディレクトリ名としての違和感は少しあるように感じる。
公式でもしばらくの間はpagesディレクトリはサポートを続けていうと言っているので問題はないと思う。

Layouts

詳しくはこちらから
複数のページで利用することができるようなファイルになっている。
状態を保持しており、状態を保持しており、再レンダリングをしないといった特徴がある。
また、それぞれのページのディレクトリでも共通のレイアウトを作成することが出来、もちろんrootページでも作成可能になっている。
ヘッダーやフッターなどの共通部分の利用の時にすごく便利になっている。

app/hoge/layout.tsx

const  HogeLayout = ({ children, }: { children: React.ReactNode, }) => {
  return (
    <section>
      <nav></nav>
      {/* Childrenを利用することでページディレクトリ全体に反映することができる*/}
      {children}
    </section>
  );
}
export default HogeLayout

Server components

詳しくはこちら
これは新しくNextではなくReactの方に追加された機能である。
正直、フロントエンドがどんどん進化していっているのでまた次のバージョンなどでは消えているような可能性がなくはないが...
どんなことかというと従来はクライアントでJavaScriptバンドルのサイズに影響を及ぼしていた大規模な依存関係を、サーバに完全に残すことができ、パフォーマンスの向上につなげることができるようになっている。
このブログなどでもそうだが、page speed insightsなどといったサイトの評価ツールなどで測定してみると大抵の場合はJavascriptの部分でパフォーマンスが減少してしまっていることがわかる。
そこの部分に着目して初期の非同期でのロードを行い、パフォーマンスが向上しているということになる。
また、書き方自体もPHPやRuby on Railsに近い感覚で作成でき、Reactのパワーと柔軟性を使ってUIをテンプレート化させることが可能になっている。
今後Reactの書き方自体がどのようになっていくのかがとても興味深い。少なくてもレンダリング方法にも大きく影響していくことが増えていくような感じはある。

Client components

詳しくはこちら
クライアントコンポーネントの利用方法について、ファイルに「use client」が定義されると、子コンポーネントを含め、そのファイルにインポートされた他のすべてのモジュールは、クライアントバンドルに含まれるとみなされる。
しかし、基本的にはReactはサーバーサイドコンポーネントが標準であり、従来の様々なデータフェッチの方式などはプロダクションでまだ利用していないのでなんとも言えないが、おそらく消えているという話をよく聞く。

// クライアントコンポーネントで
'use client';

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
export default  Counter;

上記の例などはStateと簡単なクリック時の参考例だけで完結していると思うので、この子部分などの表現方法もしっかりと再度理解しておきたい。

使い分け

本当にざっくりと説明するとサーバーコンポーネントとクライアントコンポーネントの使い分けについて、必要性が出てくるまではServer componentsを使用し、イベントアクションの利用やステートとライフサイクルの利用にはClient componentsを使用というのがいいのではないかと個人的に思っている。

おそらくブログとして利用することになったら以下のようになるだろう。

ストリーミング

Next.JSのサーバーコンポーネントを使用することで、ネストされたレイアウトに必要ない部分を先にレンダリングし、ロード表示と分けることができるようになっている。また、Lazy遅延表示のように、ページ全体を読み込む必要がない場合でも、一部のコンポーネントを先に表示することができるようになっており、これにより待たずに表示できる部分は先に表示されるようになっている。
個人的には今までも出来たようなという勘違いをしているのか本当にできたかどうかは定かではないがパフォーマンスの向上により最初のページの表示スピードが上がったのは間違いないのでとてもいい

データの取得

Reactの新しい仕様であるRFCにより、SSR、SSG、ISRの全ての利点が一つのAPIで利用可能になった。この新しいAPIを用いることで、Server componentsは自動的にフェッチ要求を行い、コンポーネントレベルでデータをフェッチ、キャッシュ、再検証することができるようになり、今後さらに改善されることが期待されている。
改めて、以前の記事でデータフェッチの考えを示したがそれさえもいらなくなるとは...
どんどんフロントエンド自体も変化しておりこれからどうなるかわからないがしっかりとやって行かなければと改めて思う事件。

軽微な大改良

個人的にここの部分は大きな刷新につながっていない分、改善する余地がたくさんあると考えることができるようになっているような部分。特にNext独自の技術の部分も多いのでしっかりと新バージョンで利用することができればパフォーマンスの向上に大いに役立つと思う。

Turbopackの導入

今までのWebpackはおそらくJSにて限界性能となったので、バージョン12からRustコンパイラのものに刷新され飛躍的にパフォーマンスが向上しており、公式でもしっかりとバージョンが上がるごとに速くなっていることがわかる。
勘違いかもしれないが自分自身がバージョン12の時からRust版に乗り換えていることもあってあまり驚きもない。
もちろんまだAlpha版なので修正はいくらでも入ると思う。

Imageタグ

Next.jsの画像最適化機能であるnext/imageが改良され、Altタグの指定が必須になった。また、クライアントのJavascriptも削減されて、既存の画像コンポーネントはレガシー版として扱われ、新しいコンポーネントにアップグレードするには、
$ npx @next/codemod next-image-to-legacy-image ./pages
のコマンドを使用する必要がある。
個人的に画像周りの修正は大賛成で少しでもこの思い画像の最適化が行われるならどんどん改良してもらいたい。

Fontタグ

Next.jsでは、フォントの最適化が行われ、外部からのネットワーク要求を削減し、プライバシーとパフォーマンスの向上を実現している。ブラウザからGoogleにリクエストが送信されることはなく、大枠のタグに利用することができるため、利便性が向上している。
大枠のタグに利用することができればアプリケーション全体をラップすることができると思うので今までフォントに関して考慮することはなかったが最適化されたフォントが利用できる安心感はとても大きいものである。

Linkタグ

Next.jsの新しいリンクコンポーネントも登場し、従来のaタグを置き換えることができるようになった。アップグレードには、
$ npx @next/codemod new-link ./pages
のコマンドを使用する必要があり、Aタグは本当に必要ない邪魔者でなんの意味があるかわからなかったのでこれも嬉しい変更である
どれに関しても今までのものを利用しているだけでよりパフォーマンス向上につながっているのが楽でいい。

その他

後の変更としてOGP周りの設定をVercelでできることとミドルウェア部分の改良だが、自分の場合はNextSEOを使っている点やJamstackな構成で構築しているのでこの二つは当面の間は利用しない方向で大丈夫だなと思っているのでここでは特に考慮はしない。
しかし、大きくアーキテクチャを変更し利用する機会があればぜひ使っていこうと思うしその時にまたブログにしたい。

終わりに

フロントエンドは本当に流れが早いと最近感じる。
自分はReact自体はクラスコンポーネントから書いておりそこからHooksの登場やフレームワークの登場などどんどん進化しているが根本的に変化しているのかどうかと言われればそんなことなくて、あくまで無駄を減らしているという範囲で止まっていると考えている。
また最近はDenoなどのNode.jsへの対抗勢力なども次々登場しつつあるのでさらにフロントエンドの技術は複雑化していくことになるとも思いつつ、Figmaなどのツールも一通りは利用しなければいけなそうという雰囲気がある。
バージョン13のキャッチアップもこれほど遅れてしまっているが、少しでも時間がある時などにしっかりと新しい技術を学んでプロダクトをより良くしていきたい。そして楽しみたい。

匿名でコメント