Next.js upgrade emphasizes static site generation

Latest Next.js release introduces new data fetching methods for specifying static generation or server-side rendering

Next.js, positioned as a React framework for the enterprise, is available in a new version that emphasizes static site generation. The update, Next.js 9.3, was released on March 9.

Next.js 9.3 includes API additions that provide built-in, optimized static site generation through new data-fetching methods. These methods include `getStaticProps`, which is used to fetch data at build time and specify dynamic routes to pre-render based on data, and `getServerSideProps`, which fetches data on each request.

Next.js 9.3 also features a way to offer parameters to statically generate static pages for dynamic routes, called `getStaticPaths`. The new methods offer advantages over the previous `getInitialPaths` model, providing a clear distinction between server-side rendering and static generation. 

Other new capabilities and improvements in Next.js 9.3 include:

  • A 32KB reduction in the runtime for all Next.js applications, done through optimizations.
  • Preview Mode, for bypassing statically generated pages to display drafts from a CMS.
  • Built-in Sass support for global stylesheets, with applications now able to directly import .scss files as global stylesheets.
  • Built-in CSS module support for component-level styles, in which locally scoped CSS can be imported and used in an application, using the `module.scss` file convention.
  • Automatic static optimization for the 404 page, with improved reliability and speed by statically serving the 404 page.

All changes cited for Next.js 9.3 are non-breaking and backward-compatible. To access the upgrade, developers should run the following command:

$ npm i next@latest react@latest react-dom@latest

This story, "Next.js upgrade emphasizes static site generation" was originally published by InfoWorld.