Next.jsチームは先頃、Next.js 9.3をリリースした。これにより、スタティックWebサイトの生成とプレビューが改善され、Sassサポートが追加され、実行時間は短縮される。
Next.jsは、2年前のバージョン3でスタティックWebサイト生成のサポートを追加した。Next.js9はAutomatic Static Optimizationの概念を導入し、開発者はサーバーレンダリング (SSR) とスタティック生成ページ (SSG) の両方を含むハイブリッドアプリケーションを使用できる。Automatic Static Optimizationは、ページコード内のgetInitialPropsメソッドで示されているように、ページにデータフェッチ要件がブロックされているかどうかに依存する。
スタティックサイト生成に特化したRFCに続いて、Next.js 9.3では、SSGとSSRの違いを明確に区別することを目的とした3つの新しいメソッドが導入された。
最初のメソッド getStaticProps は、ページコンポーネントに渡される props を計算する非同期関数である。この関数はNode.jsコンテキストで実行され、動的ルートを使用するページに必要なルートパラメータを含む context パラメータを受け取る。
2番目の非同期メソッド getStaticPaths は、動的ルートを処理するときに役立つ。この関数は、ビルド時にHTMLにレンダリングする必要のあるパスのリストを計算し、生成されたアプリケーションのユーザが、生成されたパスのリストに含まれていないルートに移動するときのフォールバック動作を指定する。fallback が false の場合、ユーザがナビゲートした getStaticPaths によって返されないパスは、404エラーページになる。それ以外の場合には、ページパスがビルド時に生成されなかった場合 (計算されたリストにない場合) 、ユーザーがページを要求したときにオンデマンドで生成される。リリースノートは、動的ルートを特徴とするブログアプリケーションの次の例を提供する:
// pages/posts/[id].js
import fetch from 'node-fetch'
function Post({ post }) {
// Render post...
}
// This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get posts
const res = await fetch('https://.../posts')
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map(post => `/posts/${post.id}`)
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths, fallback: false }
}
// This also gets called at build time
export async function getStaticProps({ params }) {
// params contains the post `id`.
// If the route is like /posts/1, then params.id is 1
const res = await fetch(`https://.../posts/${params.id}`)
const post = await res.json()
// Pass post data to the page via props
return { props: { post } }
}
export default Post
このコードを使用すると、Next.jsはビルド時にすべてのブログ投稿 (const paths = posts.map(post => `/posts/${post.id}`) を生成し、ユーザが存在しないブログ投稿にナビゲートしたときはエラーページを生成する。あるブログ投稿のページを生成すると、コンテンツが取得され、それが post prop として Post Reactコンポーネントに渡される。
最後の非同期メソッド getServerSideProps は、各リクエスト (SSR) でNext.jsがページを新たにレンダリングする。したがって、getServerSideProps は常にサーバサイドで実行される。関数は、ルートパラメータ、request オブジェクトと response オブジェクト、およびクエリ文字列を含む context パラメータを受け取る。
Next.js 9.3のプレビューモードでは、スタティックに生成されたページをバイパスして、CMSなどのドラフトページをオンデマンドレンダリング (SSR) することができる。Next.js 9.3のプレビューモードは、getStaticProps と getServerSideProps の両方と直接統合され、プレビューAPIルートを作成する必要がある。プレビューモードを使用すると、開発者はヘッドレスCMSでドラフトを記述し、スタティックページを再生成せずにすぐにドラフトをプレビューできる。
Next.js 9.3では、グローバルおよびコンポーネントスコープの両方のSassサポートが (CSSモジュールを通じて) 追加された。構文には単純な import が含まれる。リリースノートには、グローバルスタイルシートの次の例が含まれている:
import '../styles.scss'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Sassファイル用のCSSモジュールは、拡張子が .module.scss のファイルに対してのみ有効である。グローバルSassファイルはプロジェクトのルートにおき、カスタム <App> コンポーネント (./pages/_app.js ファイル) にインポートする必要がある。
Next.js 9.3は、デフォルトで差分バンドルを備えており、レガシーブラウザで必要なポリフィル (polyfill) のみをロードする。新しいプラクティスにより、最新のブラウザ (ポリフィルを必要としない) を使用するすべてのユーザの最初のロードサイズから32kB以上が削除される。
Next.jsの新機能は、多くの開発者から好評を得ています。Twitterユーザは述べた:
これは素晴らしい。私はSSG RFCでの議論のいくつかをフォローしたが、これが実際の機能に変わるのを見るのは素晴らしいことです! みんなおめでとう
Next.js 9.3の新機能は互換性があり、完全な下位互換性がある。新しいバージョンに更新するには、Next開発者はnpmでインストールする必要がある:
npm i next@latest react@latest react-dom@latest
Next.jsは、MITオープンソースライセンスで使用できる。貢献とフィードバックは歓迎され、GitHubプロジェクトを通じて提供されるだろう。