BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Next.js 9.3がリリースされ、スタティックサイト生成が改善された

Next.js 9.3がリリースされ、スタティックサイト生成が改善された

ブックマーク

原文(投稿日:2020/03/25へのリンク

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にレンダリングする必要のあるパスのリストを計算し、生成されたアプリケーションのユーザが、生成されたパスのリストに含まれていないルートに移動するときのフォールバック動作を指定する。fallbackfalse の場合、ユーザがナビゲートした 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のプレビューモードは、getStaticPropsgetServerSideProps の両方と直接統合され、プレビュー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プロジェクトを通じて提供されるだろう。

この記事に星をつける

おすすめ度
スタイル

BT