作成日: 2023-4-25
更新日: 2023-10-9
Next.js 13でリリースされた機能の一覧は以下となります。
今回導入された機能はほとんどがbeta版であり、Next.js側も本番環境での推奨をしていません。
beta版以外の機能を使いたい場合は、以下コマンドで可能です。
$ npx create-next-app@latest
大きな変更点はappディレクトリの導入になります。
このappディレクトリはNext.js12までのpageの上位互換的な存在です。
結論的に一番めんどくさい変更点について記載しておきます。
appディレクトリでgetServerSideProps、getStaticProps、getInitialPropsはサポートしていません
その他の方法により、SSG、SSR、ISRについて設定しなければなりません。
ざっくりとした説明としては、fetch関数でハンドリングすることになります。
/**
* Next.js側でfetch関数で取得したデータを自動でキャッシュしてくれます。
* これを使ってSSGが使えます。
*/
fetch('https://....')
/**
* fetch関数にcache: 'no-store'オプションを追加するとSSRを使えます。
*/
fetch('https://...', { cache: 'no-store' });
/**
* fetch関数にnext: { revalidate: 10 }オプションを追加するとISRを使えます。
*/
fetch('https://...', { next: { revalidate: 10 } })
この変更はだるすぎる。。。
読む気失せたかもしれないですが、appディレクトリに概要について説明していきます。
appディレクトリはいくつかの機能に分類することができます。
Routing
Next.js 12までは、pageディレクトリ配下でルーティング構成を展開していました。
Next.js 13では、appディレクトリ配下でルーティング構成を展開することができます。
appディレクトリ配下のフォルダ名がURLのpathとなります。
例えば、以下のような構成の場合
└── /app ├── /profile ├── /detail
https://example.com/profile/detailとなります。
基本的な使い方は、pageディレクトリと変わりありません。
なおNext.js13でpageディレクトリも引き続き使うことができます。
appディレクトリ配下に指定のファイルを作成することで様々なケースに対応することができます。
個人的には、layout.jsは使い勝手いいかなーと思いました。
例えば、以下のようなディレクトリ構成にしとけば、profile配下のレイアウトを共通化することができます。
└── /app ├── /profile layout.js ├── /over-view page.js ├── /detail page.js
使いこなすにはしっかりとしたディレクトリ設計が必要かと思います。
Rustで書かれたバンドラーです。
規模が大きなアプリケーションではWebPackの700倍の速さでバンドルができます。
開発体験が爆あがりしそうです。
こちらはまだalpha版です。
より最適な画像ローディングを提供してくれます。
使用方法に変更はありません。
フォントの最適化ができます。
Next.js12までは画像の最適化しかできませんでした。
Next.js13のLinkタグは配下にaタグを勝手に設置してくれます。
Next.js12まではSEO対策としてクローラに認識してもらいたいリンクについては、Linkタグの配下にaタグを設置する必要がありました。
import Link from 'next/link'
/**
* 12での使用方法
*/
<Link href="/link">
<a>リンク</a>
</Link>
/**
* 13での使用方法
*/
<Link href="/link">
リンク
</Link>
なんか微妙な変更だなと思いました。正直。
Next.js12と13では、使用方法が大きく変更されました。
今まで通り、pageディレクトリは使用可能ですが、appディレクトリの方がより最適なフロントエンドアプリケーションの構築が可能であることは分かりました。
ですがpageからappに切り替えるのは結構めんどくさそうというのが正直な感想です。
今後は、migrateの方法やNext.js13の詳細な部分を深掘りしていきます。
※こちらを参考に記事作成をしております。