React-Framework Next.js reaches version 9.5: That’s inside

The popular React framework from Vercel has reached version 9.5. In addition to further performance improvements, the new version also brings SEO improvements and support for Webpack 5.

Next.js has been around since 2016. The framework enables the creation of server-side rendered React apps and is used in the development teams of Netflix, Hulu, Tiktok and, incidentally, also at t3n.

Incremental-static regeneration

With the new version, a feature called incremental-static regeneration is leaving the beta phase. The underlying mechanism is based on the updating of already loaded pages, which are rendered again in the background when there is traffic. Methods for static site generation were already introduced in version 9.3 – with the aim of combining the advantages of static site generation with the first-class support for dynamic data for which the framework is known.

About the fallback: true Option in getStaticPaths new static pages can now be registered at runtime. This means that Next.js can pre-render an unlimited number of pages on demand, the size of the data set should not matter. Inspired by state-while-revalidate, the re-rendering ensures that incoming data traffic is served without interruption and the newly rendered page is only pushed when it has been completely generated. In addition, a preview mode is available with version 9.5 – both features are now available from both next start as well as supported by the Vercel Edge platform.

New basePath configuration option

Next.js projects are not always necessarily hosted from the root of a domain. Anyone who has a project from a sub-path such as /docs wanted to host, had to do a lot of extra configuration work up to now. Version 9.5 addresses this pain point with a new configuration option called basePathwhich is supposed to simplify exactly that.
To make use of it, you simply have to become yours next.config.js Add:


// next.config.js

module.exports = {
basePath: ‘/docs’
}

 

And your project will then be routed from the path specified here – in the example above, that would be /docs.

If you via next/link and next/router linked to other pages of the project, the path is automatically adjusted. Accordingly would /about then to /docs/about become.

export default function HomePage() {
return (

<a>About Page</a>

 

)
}

 

The code snippet above then led to the following HTML output: <a href="https://t3n.de/docs/about">About Page</a>

Support for rewrites, redirects and headers

Another new configuration option for Next.js 9.5 is called rewrites – It allows the path of an incoming request to be redirected to another target path, including an external URL. The new feature could prove to be particularly useful for teams who want to integrate Next.js into their projects piece by piece.

Version 9.5 also brings a new one redirects-Key for changing the routing structure – for example in the event that your /blog to /news want to move. In order to check whether redirects have been set for a route, you previously had to set up a server or an error page, which probably brought about significant ergonomic disadvantages. From version 9.5 you can now use the redirects key to list all redirects in your next.config.js.

One of the great things about Next.js is that the framework allows you to combine static pages with server-side rendering. Server-side rendering allows http headers to be set for incoming request paths; this was previously not possible for static pages. From version 9.5 you can use the headers key to create your own header properties in your next.config.js which are applied to all next.js routes.


// next.config.js
module.exports = {
async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'Feature-Policy',
// Disable microphone and geolocation
value: "microphone 'none'; geolocation 'none'"
}
]
}
]
}
}

Control over trailing slashes

When Next.js was launched for the first time, the default was that a so-called trailing slash /about/ basically returns a 404 page. This behavior has now been adjusted in favor of development teams migrating existing projects to Next.js. Via a new configuration option called trailingSlashthat you in your next.config.js as desired true or false you can control this behavior in the future.

Further performance improvements and Webpack 5 support

With the new release, JavaScript bundles will in future be cached using content hashes instead of the build ID. Pages that have not been changed do not have to be reloaded between deployments. Fast Refresh has also been improved in version 9.5, a hot reloading feature that has existed since version 9.4 and now has a new, revised documentation, among other things. In addition, the release brings a new one --profile-flag, which you can use to monitor React in production in your Next.js projects in the future. Further innovations are revised catch-all-routes options and support for Webpack 5, which is currently still in beta. You can read all the new features in detail on the Vercel blog in the blog post about the release.

Suitable for this:

You might be interested in that too

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png