Home SEO This is new in Next.js 9.5

This is new in Next.js 9.5

15
0

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-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 leaves the beta phase. The underlying mechanism is based on updating already loaded pages, which are re-rendered in the background when there is traffic. Static site generation methods were 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 during runtime. This allows Next.js to pre-render an unlimited number of Pages on Demand, regardless of the size of the data set. 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 is completely generated. Version 9.5 also has a preview mode – both features are now available from next start as well as supported by the Vercel Edge platform.

New basePath configuration option

Next.js projects are not always hosted by the root of a domain. Anyone who has a project from a subpath like for example /docs wanted to host, had to do a lot of extra configuration work. Version 9.5 addresses this pain point with a new configuration option called basePathwhich is supposed to simplify exactly that.
To use it, you just have to add it to 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, it would /about then to /docs/about become.

export default function HomePage() {
return (

About Page

)
}

The code snippet above then led to the following HTML output: About Page

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 useful for teams that want to integrate Next.js bit by bit into their projects.

Version 9.5 also brings a new one redirects-Key for changing the routing structure – so for example in case you /blog to /news want to move. In order to check whether redirects are set for a route, you previously had to set up a server or an error page, which probably brought 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 advantages of Next.js is that the framework allows you to combine static pages with server-side rendering. Server-side rendering allows the setting of http headers for incoming request paths, which 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 define that 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 a so-called trailing slash /about/ always returns a 404 page. This behavior has now been adjusted in favor of development teams that migrate existing projects to Next.js. Via a new configuration option called trailingSlashthat you in your next.config.js on request 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 must be reloaded between deployments so that they are not reloaded. Version 9.5 also improved Fast Refresh, a hot reloading feature that has existed since version 9.4 and now has, among other things, a new revised document. The release also brings a new one --profileflag that you can use to monitor React in production in your Next.js projects in the future. Other new features include revised catch-all-routes options and support for Webpack 5, which is currently in beta. You can find all the innovations in detail on the Vercel blog at Release blog post read up.

Suitable for this:

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.