Next.js is a React framework for server-side rendering, which its creators present as a zero configuration single command toolchain for React applications.
This frame provides a common structure that allows you to easily create a React front-end application and transparently manages server-side rendering. Next.js version 9.3 was launched on Monday with new features and some improvements, of which we can find the ability to generate static sites as the main innovation.
What's new in Next.js 9.3?
With the release of Next.js 9.0, the framework introduced the concept of static automatic optimization. When a page has no blocking requirements data recovery like getInitialProps, will automatically render in HTML once it has been built.
There are other cases where you might want to make a page in static HTML at compile time, even with blocking data extraction requirements. This is the case, for example, of marketing pages powered by a content management system (CMS).
Next.js 9.3 introduces two new data recovery methods: getStaticProps and getServerSideProps.
These new methods they have many advantages over getInitialProps modelas there is a clear distinction between what will become SSG (Static Side Generation) and SSR (Server Side Rendering). They are API additions.
All new features are backward compatible and can be adopted gradually. There is no depreciation and getInitialProps continues to work normally. A getStaticPaths parameter has been added to obtain dynamic routing.
- getStaticProps: allows obtaining data during construction;
- getStaticPaths - Specify data-based dynamic routing;
- getServerSideProps: allows you to get data for each request.
Another change that stands out from this new version is the support for the preview mode. Introducing getStaticProps in Next.js opens up new possibilities, such as using Next.js rendering capabilities on demand under certain conditions.
For example, when previewing a draft In a CMS, you will want to skip the static rendering and render page on demand with draft content instead of published content. You want Next.js to skip static build only in this specific case. According to the Next.js team, the preview mode allows you to do this.
The mode of preview allows users to skip the generated page statically to return on request (SSR) a draft page, for example from a CMS. However, it is not limited to certain CMS systems. Preview mode integrates directly with getStaticProps and getServerSideProps so it can be used with any type of data recovery solution.
Next.js 9.2 added support for built-in CSS, but Next.js 9.3 added support for Sass. Global style sheets and CSS modules are supported, as well as embedded CSS. Next.js now supports CSS modules with Sass files using the [name] .module.scss file naming convention. Unlike the previously available support in Next.js 5+ with next-sass, the global Sass and CSS modules can now coexist.
Modules CSS allow you to manage Sass locally by automatically creating unique class names.
With version 9.0 from Next.js, there was a page that was not automatically rendered in HTML static: 404 page.
The main reason behind this is that the error page feeding the 404 was handled more than the 404. For example, it also handled errors. Since 404 pages are rendered for non-existent paths, rendering the page on demand could lead to higher costs and higher load server. Framework version 9.3 improves things and offers automatic static optimization for 404 pages.
Now when your request doesn't include an error.js custom page, the file Next.js automatically generates 404 page statically and uses it when a 404 is to be served. This happens automatically and no changes are required.
You can also customize this page. To replace the default 404 page, you can create a 404.js file.
If you want to know more about it, you can consult the following link.