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

0

Couldn’t attend Transform 2022? Discover all the summit sessions now in our on-demand library! Look here.


Next.js is a popular open-source web development framework – it is used by about 40% of developers. Built on Reactit allows developers to create high-performance web applications and fast static websites.

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

Yet, building customization with Next.js has sometimes been cumbersome and time-consuming for developers and lagging behind for end users. Indeed, the implementation often required server-side rendering (SSR) or client-side JavaScript, explained Matt Biilmann, co-founder and CEO of Netlify.

With today’s release of its new Next.js runtime that supports advanced Next.js middleware, Netlify aims to improve personalization – and at the edge.

Event

MetaBeat 2022

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

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,” Biilmann said. “Netlify has invested in Next.js for years, but now we’re moving from native Next.js support to extending the framework’s capabilities.”

Advantages and disadvantages of Next.js

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

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

“Next.js is gaining popularity among React developers mainly due to its improved and simplified development 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, Dickerson said. Meanwhile, another benefit for developers is that websites and apps built with the framework adapt to the screen size of the end user’s device.

Next.js also has many reusable React components, as well as popular features like 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.

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

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

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 reaping the SEO benefits of static text-based websites, he said.

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

Improved approach to Next.js

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

With its latest version, the company claims that it is the only runtime 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, Biilmann said — without additional client-side JavaScript or complex server rendering strategies. .

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

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

push edge

Netlify competes in the Webops platform market with Vercel, Cloudflare, Pantheon, HubSpot CMS, Contentful, and Quest (among others). And, it’s heading for an edge computing market valued at $176 billion — a nearly 15% increase from 2021 — according to International Data Company (IDC). Spending by enterprises and service providers on hardware, software and services for edge solutions will continue to grow steadily through 2025, when spending will reach nearly $275 billion, according to IDC.

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

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

This is true for longer-running serverless functions, where developers can enable features like incremental static refresh or use more in-depth serverless controls like scheduling functions (or run them in the background). That’s also true for shorter-running serverless tasks that run directly from the edge, “making things like personalization and client authentication incredibly fast,” Biilmann said.

New Netlify features, for example, could allow developers to display different content to site visitors based on their geolocation, authenticate users to an application without revealing private keys in the request, or change cookies for analysis and reporting purposes.

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

Additional Capabilities

Next.js on Netlify includes the following features:

  • Full control to modify request headers and entire responses on the fly: Supports HTML rewrites and page data transformations from the edge, making it easy to deliver personalized user experiences such as personalization, localization, authentication, etc., while achieving optimal performance.
  • No configuration for Next.js: Netlify automatically detects Next.js and pre-configures the build environment, adapting the platform to the Next.js framework.
  • Day 1 feature support: New Next.js features are typically enabled, tested, and natively supported on the Netlify platform the day they are released by the Next.js open source team.
  • Improved user experience: Next.js developers benefit from a seamless experience throughout the build and deployment workflow of their sites and applications.

Additionally, customers have access to features of the Netlify platform, including preview deployment with on-page feedback and quality assurance, synced with Git and issue tracking systems.

Additional capabilities include

  • Access to advanced continuous integration and continuous deployment (CI/CD).
  • Serverless, edge, background, and scheduled functions.
  • A single API mesh powered by GraphQL to easily connect data and services.
  • Advanced observability integrations.
  • Multi-cloud edge network with 99.99% uptime SLA.
  • Enterprise-ready security.
  • 24 hour assistance with climbing paths.

VentureBeat’s mission is to be a digital public square for technical decision makers to learn about transformative enterprise technology and conduct transactions. Learn more about membership.

Share.

Comments are closed.