Next.js 9.3: 新世代の静的サイト生成、Built-in Sassのサポート #JavaScript

本日、Next.js 9.3 がリリースされました。本リリースの特徴は次のものです。

Static Site Genration のサポート
プレビューモードのサポート
ビルトインの Sass サポート
404 ページの静的化
ランタイムの縮小

各トピックごとに簡単に説明します。詳しく知りたい場合は公式のリリースノートが公開されているのでご確認ください。

Static Site Generation のサポート

Next.js では 9.0 から Automatic Static Optimization というコンセプトを打ち出し、getInitialPropsでデータを取得しない場合はビルド時に HTML ファイルを生成していました。（また、getInitialPropsでのデータ取得はnext exportで生成した場合であっても、クライアントのルーティング変更時に実行されるため、完璧な静的サイトとは言い難いものでした。）
しかし、データを取得しつつ、HTML をビルド時に生成したいケースが増えてきています。Headless CMS を使ったマーケティングブログがよい例です。そこでコミュニティ内で討論したできたのが本機能です。

Next.js 9.3 ではgetStaticPropsとgetServerSidePropsという 2 つのデータ取得方法が用意されています。また、動的なルーティングを実現する際に、パラメータを付与するgetStaticPathsも追加されています。

getStaticProps ビルド時にデータを取得する
getStaticPaths データに基づいて動的ルーティングを指定する
getServerSideProps リクエストごとにデータを取得する

後方互換性も担保されており、今までのgetInitialPropsも使うこともできますが、新しい方法が推奨されます。

公式ブログのリリースノートには各メソッドの要点がまとまっています。

またドキュメントも大きく書き直されているので一読をおすすめします。

Data fetching

プレビューモードのサポート

Static Generation は Headless CMS から取得するのに役立ちますが、下書き段階には理想的ではありませんでした。
Static Generation で生成されるのは静的なプレビューなため、変更を反映するには再生成する必要があるからです。

そこで用意されたのがプレビューモードです。静的に生成されたページを通して、下書き状態のページを SSR することができます。

Preview Mode のドキュメントも用意されているのでそちらをご覧ください。

ビルトインの Sass サポート

Next.js 9.2 では Built-in CSS がサポートされましたが、Next.js 9.3 では Sass のサポートも追加されました。
Built-in CSS と同様に、Global Stylesheet と CSS Modules がサポートされています。簡単なコード例をお見せします。

// Global Styles
import "global.scss"
// CSS Modules
// 注意: 拡張子はmodule.scssにすること
import styles from "./Button.module.scss"

const Button = () => {
  return <button className={styles.success}>Save</button>
}

CSS Modules ではコード分割も行われるので、global ではなくなるべく CSS Modules の方に寄せるといいでしょう。¹

今まで@zeit/next-sassを使っていた方は、この機能は自動的に無効化されます。Built-in の Sass に乗り換えたい方は@zeit/next-sassを外しましょう。

404 ページの静的化

上記で紹介した Automatic Static Optimization というコンセプトはありましたが、404 ページは静的にレンダリングされたページではありませんでした。

今まではpages/_error.jsにおいたファイルがエラーページとなっていましたが、Next.js 9.3 からはpages/404.jsというファイルを置くと 404 ページとして扱われます。
この 404 ページを静的に保つことでエラーページを表示する度にレンダリングされなくなり、サーバーへの負荷が減ります。

こちらもドキュメントがあるので読みましょう！

Custom Error Page

まとめ

ここ最近の Next.js は今までとひと味違う動きを見せているので要注目です。

繰り返しにはなりますが、本記事では概要のみを扱っています。詳しく知りたいと思った方は公式のリリースノートをご覧ください。

私はお仕事のプロジェクトでも移行しましたが、module.scss では IE 対応のセレクタが壊れて大変でした。 ↩