この記事を読んだ後に理解できること

Next.js 13でリリースされた機能について

Next.js 13でリリースされた機能について

Next.js 13でリリースされた機能の一覧は以下となります。

appディレクトリ（beta）
turbopack（beta）
next/image
next/font（beta）
next/link

今回導入された機能はほとんどがbeta版であり、Next.js側も本番環境での推奨をしていません。

beta版以外の機能を使いたい場合は、以下コマンドで可能です。

$ npx create-next-app@latest

大きな変更点はappディレクトリの導入になります。

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ディレクトリ配下に指定のファイルを作成することで様々なケースに対応することができます。

page.js（拡張子はjs、jsx、tsxが可能、以下同じ）
- このファイルでメインの表示内容を設定できます。
layout.js
- 複数のページにまたがって利用できる共通レイアウトです。
loading.js
- ページ間遷移で表示するローディング画面の設定ができます。
error.js
- エラーが発生した場合に自動的に回復を試みるコンポーネントに関するファイルの設定。
- エラー内容の表示等が設定が可能。
template.js
- ページ間の遷移でアニメーションを設定するファイルです。
not-found.js
- 存在しないURLに接続した場合の表示する画面を設定できます。
head.js
- headタグの情報を設定することができる。

個人的には、layout.jsは使い勝手いいかなーと思いました。

例えば、以下のようなディレクトリ構成にしとけば、profile配下のレイアウトを共通化することができます。

└── /app
    ├── /profile
              layout.js
       ├── /over-view
                  page.js
       ├── /detail
                  page.js

使いこなすにはしっかりとしたディレクトリ設計が必要かと思います。

turbopackについて

Rustで書かれたバンドラーです。

規模が大きなアプリケーションではWebPackの700倍の速さでバンドルができます。

開発体験が爆あがりしそうです。

こちらはまだalpha版です。

Imageタグについて

より最適な画像ローディングを提供してくれます。

使用方法に変更はありません。

next/frontについて

フォントの最適化ができます。

Next.js12までは画像の最適化しかできませんでした。

Linkタグについて

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の詳細な部分を深掘りしていきます。

※こちらを参考に記事作成をしております。

今更ながらNext.js 13の変更点について解説

目次

RECOMMEND