Next.js new release helps Netlify bring web personalization to the edge

Were you unable to attend Transform 2022? Check out all of the summit sessions in our on-demand library now! Watch here.


Next.js is a popular open-source web development framework — it is used by roughly 40% of developers. Built on React, it enables developers to build highly performant web applications and fast static websites. 

“Technical decision-makers use Next.js to deliver responsive, interactive websites that still benefit from the SEO optimization commonly associated with static web pages,” explained Devin Dickerson, principal analyst at Forrester. “This can improve business outcomes for ecommerce, landing pages and digital marketing.” 

Still, building personalization with Next.js has been at times cumbersome and time-consuming for developers and lagging for end users. This is because implementation has often required server-side rendering (SSR) or client-side JavaScript, explained Matt Biilmann, cofounder and CEO of Netlify.

With the release today of its new Next.js Runtime that supports advanced Next.js Middleware, Netlify aims to enhance personalization — and at the edge.

Event

MetaBeat 2022

MetaBeat will bring together thought leaders to give guidance on how metaverse technology will transform the way all industries communicate and do business on October 4 in San Francisco, CA.

Register Here

“Today, Next.js is the most popular framework in our space and is a key part of how developers adopt and experience our platform,” said Biilmann. “Netlify has invested in Next.js for years, but now we’re moving from natively supporting Next.js to also extending the possibilities of the framework.”

Next.js pros and cons

Released in 2016, Next.js is a React framework built on top of the Node.js JavaScript runtime environment. 

Developers choose it for its security, adaptability, SEO and overall experience, said Dickerson.

“Next.js is gaining in popularity among React developers primarily because of its enhanced, streamlined developer experience,” he said. 

Static sites generated by Next.js have no direct access to a database or user data, making it a secure approach to developing web applications, said Dickerson. Meanwhile, another plus for developers is that websites and applications built with the framework adjust to the screen size of the end user’s device. 

Next.js also has many reusable React components, as well as popular features such as faster refreshes, TypeScript support, flexible data fetching and incremental static regeneration — and, it has a “robust community” with a large number of contributors, Dickerson noted. 

Still, out of the box, Next.js has limited routing capabilities and is constrained to using file routing, thus often limiting developer flexibility. For websites with multiple pages, meanwhile, build times can be long, said Dickerson. 

“While the avid community of contributors is a strength, the ecosystem of plugins is still developing and has room to grow,” said Dickerson.

So, compared to some other frameworks, developers may lack easy-to-use plugins. 

But ultimately, web applications built with Next.js can have a high degree of interactivity and functionality, while still boasting the SEO benefits of static text-based websites, he said.

“One of the main selling points of Next.js is that it reduces the common trade-offs between the user experience and SEO,” Dickerson said.

Enhanced approach to Next.js

Netlify, a platform-as-a-service (PaaS) that builds, deploys and hosts websites and apps, supports many of the largest Next.js projects — including DocuSign, TripActions and Twilio. 

With its newest release, the company says it is the only runtime environment to support Next.js Advanced Middleware. Its new capability will help developers build websites and apps faster, at scale and with control to rewrite and transform HTML content at the edge, said Biilmann — without additional client-side JavaScript or complex server-rendering strategies.

“We’ve consistently heard from customers that they’re looking for better ways to solve for personalization, rapid experimentation and localization without compromising on performance,” he said.

Netlify’s Deno-based Edge Functions layer offers tools for this and works out-of-the-box with popular web frameworks including Next.js, Nuxt, Astro, Eleventy and SvelteKit, as well as newer edge-first frameworks including Hydrogen and Remix.

Pushing the edge

Netlify competes in the webops platform market with Vercel, Cloudflare, Pantheon, HubSpot CMS, Contentful and Quest (among others). And, it is homing in on an edge-computing market valued at $176 billion — an increase of nearly 15% over 2021 — according to International Data Corporation (IDC). Enterprise and service provider spending on hardware, software and services for edge solutions will sustain a strong pace of growth through 2025, when spending will reach nearly $275 billion, IDC predicts. 

Dickerson noted that, “we expect Next.js adoption to continue increasing at the edge, with Netlify’s Next.js Runtime further evidence of that trend.”

Biilmann, for his part, anticipates that more Next.js apps will move to serverless architecture, ultimately simplifying development and improving speed. 

This is true for longer-running serverless functions, where developers can enable features like incremental static regeneration or use deeper serverless controls like schedule functions (or run those in the background). It is also true for shorter running serverless tasks that run right from the edge, “making things like personalization and customer authentication incredibly fast,” said Biilmann. 

Netlify’s new capabilities, for example, could enable developers to show different content to site visitors based on their geolocation, authenticate users to an app without revealing private keys in the request, or modify cookies for analytics and reporting. 

All this could be achieved “without needing to manually create and redirect to alternative URLs or run client-side scripts that swap content after a page loads,” said Biilmann. 

Additional capabilities

Next.js on Netlify includes the following capabilities:

  • Full control to modify request headers and entire responses on the fly: Supports HTML rewrites and page data transforms from the edge, making it easier to deliver custom user experiences such as personalization, localization, authentication and more, while achieving optimal performance.
  • Zero configuration for Next.js: Netlify auto-detects Next.js and preconfigures the build environment, form-fitting the platform to the Next.js framework.
  • Day-one feature support: New Next.js features are typically natively enabled, tested and supported on the Netlify platform the day they launch from the Next.js open-source team.
  • Enhanced UX: Next.js developers have a seamless experience across the build and deploy workflow for their sites and apps.

Furthermore, customers have access to Netlify’s platform features including deploy previews with on-page feedback and quality assurance, synchronized to Git and issue-tracking systems.

Additional abilities include 

  • Access to advanced continuous integration and continuous deployment (CI/CD).
  • Serverless, edge, background and scheduled functions.
  • A unique GraphQL-powered API mesh for easily connecting data and services.
  • Advanced observability integrations.
  • Multicloud edge network with 99.99% uptime SLA.
  • Enterprise-ready security.
  • Around-the-clock support with escalation paths.

VentureBeat’s mission is to be a digital town square for technical decision-makers to gain knowledge about transformative enterprise technology and transact. Learn more about membership.

Source

By admin