目次
はじめに
Next.js の ver13 が出てから少し経ったのですが、出遅れながらもこれからの制作物で 13 を使ってみたいと思っていたので、今更ながらキャッチアップしていこうと思います。
私のような情報弱者にとっては、こうして時間が経ってからたくさんの優秀な方々が日本語の情報を共有してくださっているので、そこから個人的に気になったところや印象に残ったところのみをまとめていきたいと思います。
Layouts
いろんな記事を見たり公式の記事を読んでみると、この辺が 13 においての主要なアップデートだったみたいですね。
ただ、app ディレクトリで管理するというやり方はまだベータ版のようで、"本番環境での app 使用はまだお勧めしません。"と書かれています。
なので、趣味や遊びで取り入れる分にはいいかもしれませんが、会社の案件で本格的に取り組むのは避けたほうが良さそうですね。
しかし、app ディレクトリの概要を聞くとやはり魅力的な特徴があるように感じます。
レイアウト内で持つ状態の維持が行われて再レンダリング時の負担を軽減。そのほかにもレイアウトのネストが可能になりページごとに表示のカスタムを行うことができるようになったことで、比較的簡単に幅広いデザインへの対応もできるようになるのかな。と感じました。
next/font
こちらに関しては Youtube を見ていて、Lee さんという vercel の中の方が(解説動画)[https://youtu.be/L8_98i_bMMA]を出されて知りました。
パッと見た感じでも、フォントの読み込み速度が全然変わってくるんだな。というのが印象的でした。
公式より
CSS とフォント ファイルはビルド時にダウンロードされ、残りの静的アセットと共に自己ホストされる。
という仕組みを用いることで、ページ読み込み時のパフォーマンスを向上させているようですね。
import { Inter } from '@next/font/google';
const inter = Inter();
<html className={inter.className}>
個人的な制作物を作る場面では、Google Fonts を使用することが多いので、この機能は嬉しいですね。
ちなみに、カスタム フォントもサポートされているようです。
公式より
import localFont from '@next/font/local';
const myFont = localFont({ src: './my-font.woff2' });
<html className={myFont.className}>
Google Fonts の時とは少し記述が変わりますが、こちらも簡単に導入することができそうです。
next/image
公式ドキュメントにも「ファイルをオンデマンドで最適化してパフォーマンスを向上させる」とあるように、さらにパフォーマンスが改善されたとのことだったので期待できそうです。
記述的にはアクセシビリティ向上のために alt 属性が必須となったようです。
next/link
こちらはシンプルに Link タグの書き方が変わったというだけの話で、 13 以前は
<Link href="/link">
<a>link</a>
</Link>
というように、Link タグの中に a タグを入れる必要があったのですが、今回の 13 でのアップデートでは
<Link href="/link">link</Link>
というように Link タグの中に a タグを入れなくてもリンクが作れるようになったようです。
まだ調べていないですが、a タグに data 属性や aria-label などをつけたい場合には Link タグにつけて対応できるみたいな感じになるんでしょうか？
今後、また調べて検証して記事にしていこうと思います。
参考
https://nextjs.org/blog/next-13
https://zenn.dev/jtakahashi64/articles/a9d2ae3285ceb6
https://dev.classmethod.jp/articles/next-js-13-sample/
https://reffect.co.jp/react/next-js-13-app
さいごに
今回はすでに優れた記事を公式や優秀な方々が書かれていたので、個人的に気になったところのみ摘ませてもらいましたが、これから本格的に 13 で制作物を作っていく予定なので、その時にまた気づいたことや学んだことを記事にして共有していきたいなー。と思っております。