Guide to fast websites with Next.js: Tips for maximizing server speeds and minimizing client burden
Tinloof is an agency obsessed with delivering fast websites such as jewelry brand Jennifer Fisher, which went from a Shopify theme to a modern Next.js website that instantly loads with 80% less JavaScript.
Node.js 16 deprecation
Following the Node.js 16 end of life on September 11, 2023, we are deprecating Node.js 16 for Builds and Functions on February 6, 2024.
Will my existing deployments be affected?
No, existing deployments with Serverless Functions will not be affected.
When will I no longer be able to use Node.js 16?
On February 6, 2024, Node.js 16 will be disabled in project settings. Existing projects using 16 as the version for Functions will display an error when a new deployment is created.
How can I upgrade to Node.js 18?
You can configure your Node.js version in project settings or though the
enginesfield inpackage.json.
Faster and more reliable Managed Infrastructure
We've upgraded our Managed Infrastructure resulting in up to 45% faster routing at p99 and reliability improvements for all plans.
When a request is made to a Vercel-managed site, traffic is routed to the nearest Edge Network region with our Anycast routing. Vercel processes the request, identifies the deployment to serve, and instantly retrieves related metadata about the requested deployment.
Now with optimized metadata retrieval and routing, this performance enhancement benefits all workloads. Responses to static resources are then fetched from storage, or dynamic content is generated through Vercel Functions, based on the routing details from the deployment metadata.
These infrastructure improvements benefit all existing and new deployments. Deploy now or learn more about Vercel's Managed Infrastructure.
The power of headless: Ecommerce success with Next.js, Vercel, and Shopify
Translating designer brand experiences to the digital world requires putting complete control in the hands of the developer. A lack of ability to fine-tune performance optimizations and application decisions often limits UI possibilities.
Upgrading Ruby v2.7 to v3.2
Ruby v3.2 is now generally available, and is the new default runtime version for Ruby based Builds and Serverless Functions. Additionally, Ruby v2.7 will be discontinued on December 7th, 2023.
Existing deployments that use Ruby v2.7 will continue to work
New deployments will use Ruby v3.2 by default, or if
ruby "~> 3.2.x"is defined in theGemfileAfter December 7th, 2023, new deployments that define
ruby "~> 2.7.x"in theGemfilewill no longer build
Only the minor version (3.2) is guaranteed, meaning we will always use the latest patch version available within the minor range.
Read the documentation for more.
The foundations of the Frontend Cloud
Core web app decisions tend to center the backend, due to its complexity and impact over huge swaths of the business.
However, frontends have grown far more important and complex in their own right. When not prioritized, the intricate infrastructure around them can quickly spin out of control, dragging teams into untold amounts of tech debt.
As decoupled architecture becomes more common, developers are turning to the Frontend Cloud to automate away the behind-the-scenes hassles of creating and growing dynamic websites.
Instead of managing infrastructure as a separate step of the development process, the Frontend Cloud provisions global infrastructure for you, based on your existing application code.
This approach to web development massively increases developer velocity, allowing your team to experiment safely and meet shifting market demands. Teams of all sizes can effortlessly scale global apps while maintaining the highest possible bars for performance, personalization, and security.
You can think of the backend cloud as your cost center and the Frontend Cloud as your profit center.
Convert Comments on deployments to Jira issues
Comments on your deployments can now be converted into Jira issues. This makes it easy to take action on feedback in the workflows your team is already using.
You can name your issue and select the project and issue type without leaving your deployment. Issues retain the full thread history with any attached images and include a link back to where the comment was left.
Jira is part of our growing collection of integrations for comments which includes Slack and Linear, available to Pro and Enterprise users as well as Hobby users with public git repositories.
Check out the documentation to learn more.
How to scale a large codebase
Scaling a codebase is an integral, and inevitable, part of growing a software company.
You may have heard many terms thrown around as answers — monoliths, monorepos, micro frontends, module federation, and more.
At Vercel, we’ve helped thousands of large organizations evolve their codebases, and we have an opinion on the optimal way to build software.
Node.js v20 LTS is now available in beta
As of today, Node.js version 20 can be used as the runtime for Builds and Serverless Functions. Select 20.x in the Node.js Version section on the General page in the Project Settings. The default version remains Node.js 18.
Node.js 20 introduces several new features including:
New experimental permission model
Synchronous
import.meta.resolveStable test runner
Performance updates to V8 JavaScript Engine and Ada (URL Parser)
Node.js 20 is faster and introduces new core APIs eliminating the need for some third-party libraries in your project. Support for Node.js 20 on Vercel is currently in beta.
The exact version used by Vercel is 20.5.1 and will automatically update minor and patch releases. Therefore, only the major version (20.x) is guaranteed.
Read the documentation for more.
Vercel Cron Jobs are now generally available
Vercel Cron Jobs let you to run scheduled jobs for things like data backups or archives, triggering updates to third-party APIs, sending email and Slack notifications, or any task you need to run on a schedule.
By using a specific syntax called a cron expression, you can define the frequency and timing of each task. Cron Jobs work with any frontend framework and can be defined in vercel.json. You can use them to run your Serverless Functions and Edge Functions.
During the beta, we made Cron Jobs more secure by providing an environment variable with the name CRON_SECRET. We also added support for Deployment Protection and Instant Rollback.
Cron Jobs are now included for customers on all plans. Per account, users on the Hobby plan will have access to 2 Cron Jobs, users on the Pro plan will have access to 40 Cron Jobs, and users on the Enterprise plan will have access to 100 Cron Jobs.
Check out our documentation or deploy an example with Cron Jobs.
Automatically detect and replay layout shifts from the Vercel Toolbar
Vercel can now automatically detect and replay layout shifts on your deployments from the Vercel Toolbar.
Layout shifts are reported and notified through the Toolbar. Each reported shift includes a summary of what caused the shift and how many elements it affected. Additionally, you replay and animate the shift to see it again.
The Toolbar is automatically added to all Preview Deployments, but can also be used in localhost and in production (likely behind your own staff authentication checks) when using the @vercel/toolbar package.
Check out the documentation to learn more.
Building towards a new default rendering model for web applications
At this year’s Next.js Conf, we discussed the developer and user experience challenges of global delivery of dynamic web applications. How can we fetch data without expensive waterfalls and also deliver content directly from the edge?
The answer to all of these current challenges: Partial Prerendering (PPR).
PPR combines ultra-quick static edge delivery with fully dynamic capabilities and we believe it has the potential to become the default rendering model for web applications, bringing together the best of static site generation and dynamic delivery.
Today, you can try an experimental preview of PPR with Next.js 14 on Vercel or visit our demo for a first impression of PPR.
Vercel has proactively protected against a vulnerability in the Sentry Next.js SDK
A security vulnerability was discovered that affects Sentry’s Next.js SDK, which made it possible to exploit Sentry’s Tunnel feature to establish Server-Side Request Forgery (SSRF) attacks.
The Sentry team has already released a patch with the latest version 7.77.0.
While we still recommend updating to the latest version of the Sentry SDK, Vercel has taken proactive measures on our firewall to protect our customers.
We will continue to proactively protect all Sentry + Next.js deployments on Vercel, regardless of Sentry's Next.js SDK version running.
Backups now available for Vercel Edge Config
Vercel Edge Config is our global low-latency data store for feature flags, experiments, and configuration metadata. Now, backups of your Edge Config are automatically created with every update to an Edge Config's items. You can restore backups from the Storage tab in your Vercel dashboard.
Customers on all plans can take advantage of backups. Hobby customers have 7 days of backup retention, Pro customers have 90 days of backup retention, and Enterprise customers have 365 days of backup retention.
Check out the documentation to learn more.
More detailed report on out of memory or disk space errors on builds
You will now see more information in the build logs when your build fails due to either exhausting the available memory (OOM) or disk space (ENOSPC).
In the case of OOM, your build logs will confirm the event. For ENOSPC situations, detailed information on disk space allocation is provided.
Check out our documentation to learn more.
Favorite teams and projects to appear in your dashboard
We recently introduced an improved project and team switcher on Vercel, including the option to favorite projects.
Now, favorited projects will also appear in your dashboard overview, and you can easily add and remove them from the context menu.
Building secure and performant web applications on Vercel
Web Apps are the ultimate dynamic use-case on the Web. As opposed to websites, web apps typically require or facilitate user-to-data interactions. Applications like customer-facing dashboards, support portals, internal employee apps, and much more require up-to-date, personalized information delivered in a performant and secure way.
Vercel's Frontend Cloud offers support for deploying complex and dynamic web applications with managed infrastructure so you have control and flexibility without having to worry about configuration and maintenance—and yes, this means everything required to serve your App.
Building the most ambitious sites on the Web with Vercel and Next.js 14
At this year's Next.js Conf, thousands of community members tuned in to learn about updates to the framework thousands of developers deploy with everyday. Among the announcements were:
Protect past Production Deployments with Deployment Protection
Ensure your past production deployments remain secure by enabling Standard Protection as the default setting for your deployments. With Standard Protection, Vercel Authentication or Password Protection will ensure that all of your preview and production deployments remain secure.
Migrating existing deployments to use Standard Protection will protect both preview and generated production URLs. Standard Protection restricts access to the production generated deployment URL
Learn more about migrating to Standard Protection in our documentation.
Deployment Protection is available on all plans.
Trusted IPs for Deployment Protection is now Generally Available
Trusted IPs are a feature of Deployment Protection that allow you to limit access to your deployments by IP address. Configure Trusted IPs in addition to Vercel Authentication to ensure only your team members can access and make changes to your deployments.
For customers who rely on a VPN or additional proxy, Trusted IPs ensure you can restrict access to your deployments to only users behind the VPN.
You can configure Trusted IPs by specifying a list of IPv4 addresses, or by CIDR ranges.
Trusted IP for Deployment Protection is only available for customers on the Enterprise plan.
Check out the documentation to learn more.
Deployment Protection is now enabled by default for new projects
Deployment Protection is now enabled by default for all new projects, and our full set of protection options is now generally available.
Deployment Protection includes a series of features that ensure you can keep your Vercel deployments secure. Secure your Preview and Production deployments with:
Vercel Authentication: Restricts access to your deployments to only Vercel users with suitable access rights. Vercel Authentication is available on all plans.
Password Protection: Restricts access to your deployments to only users with the correct password. Password Protection is available on the Enterprise plan, or as a paid add-on for Pro plans.
Trusted IPs: Restricts access to your deployments to only users with the correct IP address. Trusted IPs is available in addition to Vercel Authentication and available as a part of the Enterprise plan.
To configure existing deployments with Deployment Protection, you can use this migration guide. For all new deployments, Deployment Protection with Vercel Authentication is now enabled by default.
Check out the documentation to learn more.
Next.js 14 on Vercel
Next.js 14 is fully supported on Vercel. Build data-driven, personalized experiences for your visitors with Next.js, and automatically deploy to Vercel with optimizations, including:
Streaming: The Next.js App Router natively supports streaming responses. Display instant loading states and stream in units of UI as they are rendered. Streaming is possible for Node.js and Edge runtimes—with no code changes—with Vercel Functions.
React Server Components: Server Components allow you to define data fetching at the component level, and easily express your caching and revalidation strategies. On Vercel, this is supported natively with Vercel Functions and the Vercel Data Cache, a new caching architecture that can store both static content and data fetches.
React Server Actions: Server Actions enable you to skip manually writing APIs and instead call JavaScript functions directly for data mutations. On Vercel, Server Actions use Vercel Functions.
Partial Prerendering (Experimental): A new compiler optimization for dynamic content with a fast initial static response based on a decade of research and development into server-side rendering (SSR), static-site generation (SSG), and incremental static revalidation (ISR).
Additionally in Next.js 14 you will find:
Turbopack: 5,000 tests passing for App & Pages Router with 53.3% faster local server startup and 94.7% faster code updates with Fast Refresh.
Forms and mutations: The user experience is improved when the user has a slow network connection, or when submitting a form from a lower powered device.
Metadata: Blocking and non-blocking metadata are now decoupled. Only a small subset of metadata options are blocking, and we ensured non-blocking metadata will not prevent a partially prerendered page from serving the static shell.
Logging: More verbose logging around fetch caching can be enabled.
create-next-app:There is now an 80% smaller function size for a basiccreate-next-appapplication.Memory management: Enhanced memory management is available when using
edgeruntime in development.
Check out our documentation to learn more.
How we optimized package imports in Next.js
In the latest version of Next.js, we've made improvements to optimize package imports, improving both local dev performance and production cold starts, when using large icon or component libraries or other dependencies that re-export hundreds or thousands of modules.
This post explains why this change was needed, how we've iterated towards our current solution, and what performance improvements we've seen.
Vercel Postgres is now generally available for Hobby and Pro users
Vercel Postgres, our serverless SQL database, is now available for Hobby and Pro users.
During the beta period, we reduced cold start times to 100-200ms and fixed several bugs around handling connections. Usage prices have also been lowered from the beta:
Total storage:
reduced 60% from $0.30/GB to $0.12/GB
Written data:
reduced 4% from $0.10/GB to $0.096/GB
Data transfer: reduced 55% from $0.20/GB to $0.09/GB
Billing will begin on October 19th and Pro users have the following usage included:
1 database then $1.00 USD per additional database
100 hours of compute time per month then $0.10 USD per additional compute-hour
512 MB total storage then $0.12 USD per additional GB
512 MB written data per month then $0.096 USD per additional GB
512 MB data transfer per month then $0.09 USD per additional GB
If you were a beta participant and want to opt out of using Vercel Postgres, you can backup your database and delete it.
Check out the documentation to learn more.
Tekla's ecommerce evolution: harnessing flexibility with Vercel and Medusa
With Vercel and Medusa at the helm of their frontend stack, Copenhagen-based bedding brand Tekla can handle high traffic while providing fast, personalized digital experiences to their customers.
Agilo, a digital design and development agency, wants to provide the best solutions possible for their clients. When the ecommerce brand Tekla turned to the agency for additional development support, Agilo came with a plan. By upgrading Tekla’s composable setup, the agency provided Tekla with enough speed and reliability to handle their growing traffic volume and deliver personalized digital experiences.