October 2022 Summaries

To make integrations even easier for Netlify users, Environment Variable Inputs have been added as part of the plugin onboarding process. When adding a plugin to a site, users are prompted with important variables provided by the plugin's authors, streamlining the configuration process. The new feature is now live in The Integrations Hub, allowing users to easily select and install plugins like Sentry for error reporting and user experience tracking.

In recent years, sophisticated B2B companies are shifting their focus towards using personalization techniques on their company websites as a growth driver across the buying and customer journey. The death of third-party cookies has led to an increased emphasis on first-party data-driven personalization. With advancements in Edge functions and Next.js Advanced Middleware, it is now possible to personalize various aspects of a website without compromising site speed or cumulative layout shifts. Companies can use personalization techniques such as page-based personalization, returning visitor personalization, and personalized content based on UTM parameters to enhance customer experiences, increase marketing qualified leads, and decrease cost per click and acquisition costs.

The latest release of Next.js 13 brings a host of exciting new features, including a fundamentally new data fetching and routing model, first-class support for React Server Components, streaming HTML at the edge, and a more efficient data fetching model. Netlify supports this release, allowing users to update their sites to Next.js 13 with minimal changes required on their part. The experimental app directory feature is also available, which unlocks new features such as nested routes and React Server Components, but requires the use of a pre-release version of the Netlify Next.js Runtime.

Transforming shipping rates at the edge with Next.js Advanced Middleware involves using Netlify's Next.js Runtime to deliver geography-based shipping rates to visitors. This requires determining a visitor's location, which can be done using Next.js Advanced Middleware and the Netlify SDK. The middleware function can then use this information to find the correct shipping rate from a JSON file and inject it into the page request. To achieve this, the middleware function must replace the rendered HTML with dynamic data and set the props for the Next.js application. Once deployed to Netlify, the site will be globally available and can be tested with different locations to ensure accurate shipping rates are displayed.

The tutorial demonstrates how to personalize a static HTML page based on the HTTP referer header using Netlify Edge Functions. The author, Salma Alam-Naylor, shares their experiment where they show friendly messages on their website based on the site they came from, and explains how this can be achieved using Edge Functions without relying on client-side JavaScript. The tutorial covers the steps to set up an Edge Function, modify the HTML response, and test the code in development and production environments. It also provides bonus content on using environment variables for contextual personalization.

Background and Scheduled API Routes for Next.js allow developers to build, deploy, preview, and instantly rollback API routes as background and scheduled functions right alongside other serverless functions, all maintained in the same Git repo as frontend code. This new capability is implemented through Netlify's unique Next.js Runtime, enabling developers to use scheduled and background API routes without relying on third-party services or writing scaffolding code. With this feature, developers can now handle tasks such as batch processing, web scraping, media processing, and intensive computation in the background, eliminating the need for external services or workarounds that increase complexity and cost.

Netlify has now integrated support for pnpm, a popular alternative Node.js package manager known for saving disk space and speeding up build times. This integration allows developers to share dependencies across multiple projects with ease, making it easier to manage monorepos. The implementation uses Node Corepack, providing flexibility for future additions of new package managers. To use pnpm with Netlify, users only need to check in a `pnpm-lock.yaml` file and let Netlify automatically detect and run the command, caching artifacts for performant builds. This replaces previous workarounds that required disabling npm or updating build commands.

Netlify has expanded its Technology Partner Program to deepen collaboration with partners and provide benefits such as marketing support, collaboration, and integration opportunities. The program now features three tiers: Registered Partners, Platform Partners, and Strategic Partners, each offering increasing levels of support and benefits. Netlify is committed to building a global ecosystem that connects technology providers, agencies, and organizations to empower developers. The company has also launched an Integrations Hub, which enables developers to discover, learn, and install tools that help them solve unique challenges. With this expanded program, Netlify aims to build powerful partnerships with technologies to better serve its developers and create a better web.

Netlify has integrated the Lighthouse plugin into its platform, allowing users to automatically generate full Lighthouse reports with scores for each site deploy, enabling them to compare their performance over time. The reports include scores for Performance, Accessibility, SEO, Best Practices, and Progressive Web Apps, as well as web vitals such as First Contentful Paint (FCP) and Cumulative Layout Shift (CLS). With this integration, Netlify users can easily track changes in their site's performance and make data-driven decisions to improve it. The plugin also allows for customizable testing options, including the ability to fail builds if any Lighthouse score falls below a set threshold. Additionally, on Pro plans and above, Netlify will display high-level Lighthouse scores directly on the deploy list, making it easier to spot major changes in performance over time.

The Jamstack Conference is a major event in the web development community, taking place in San Francisco on November 7-8. The conference promises an incredible lineup of talks, workshops, and panels featuring industry experts and senior engineers from top companies. Attendees will have opportunities to network with like-minded individuals and learn about cutting-edge technologies such as edge rendering, responsive web design, and container queries. The event also features sponsor booths showcasing the latest innovations in web development, a rooftop venue for networking and after-parties, and activities like lawn games and pet-friendly areas. With its unique blend of education, connection, and fun, Jamstack Conf is an exciting opportunity to learn from the best and connect with fellow developers.

Alpro, a Belgian-based subsidiary of food giant Danone, needed to build web experiences worthy of their brand while serving a global audience in over 40 markets worldwide. To address this challenge, Alpro migrated from a monolithic web architecture to a MACH (Microservices based, API-first, Cloud-native SaaS and Headless) stack built with Netlify, Contentful, and Gatsby. This migration empowered content editors to ship changes more frequently, enabled the launch of a mobile-friendly rebranded site in 6 months, and resulted in a 22% increase in site visits and better conversion rates on mobile ads. Alpro also leveraged Lilt for internationalizing marketing campaigns into 30+ languages, making it easier for team members to use the website and reducing reliance on agencies for this work.

Netlify has released a new version of its Lighthouse plugin, which allows users to generate full reports for each site deploy, including scores and web vitals. This update provides more detailed insights into performance improvements or degradations over time. The plugin also introduces features such as device type and localization configuration options, the ability to fail builds based on Lighthouse score thresholds, and visualization of Lighthouse scores per deploy. These new features are currently available in public beta, and users can try them out today by installing the latest version of the plugin.

Netlify has made its Deploy Previews feature generally available for Azure DevOps projects, allowing developers to collaborate on deploy previews in real-time and sync feedback back to Azure DevOps. This integration enables teams to review changes before they reach production, making it easier to gather feedback and improve code quality. With the Netlify Drawer, team members can discuss changes, make suggestions, and file work items, all of which are synced back to Azure Devops. The feature is now enabled by default on Netlify sites connected to Azure DevOps, but teams can also control this behavior in the Netlify app. Users can invite their entire team to review changes before pushing to production, and Netlify allows an unlimited number of free Reviewers to leave feedback on Deploy Previews.