Posts tagged "Framework"

Angular v21 was released today and it is supported on Netlify on day one.

To upgrade, follow the Angular upgrade steps and update @netlify/angular-runtime to v3.0.1 or later.

Learn more:

• Angular v21 Release
• Angular on Netlify
• Angular Runtime

React Router 7 apps on Netlify are deployed to Serverless Functions by default. Now, you can choose to deploy your app to Edge Functions instead, bringing your page renders, data loaders, and actions closer to your users while lowering cold start times.

How to use it

1. Ensure you’re on version 7.9.0 or later of React Router:

npm install react-router@latest @react-router/node@latest @react-router/dev@latest

2. Update to the latest version of the Netlify React Router plugin:

npm install @netlify/vite-plugin-react-router@latest

3. Enable the new edge option in your vite.config.ts (or .js):

export default defineConfig({
  plugins: [
    reactRouter(),
    netlifyReactRouter({ edge: true }), // <- deploy to Edge Functions
    netlify(),
  ],
})

4. Finally, create a file at app/entry.server.tsx (or .jsx) containing this single line:

export { default } from 'virtual:netlify-server-entry'

On your next deploy, page renders, loaders, and actions will all run in an edge function.

When to use it

Choose Edge Functions when:

• You need minimal latency for your globally distributed users (edge functions run on the node closest to the user)
• You need to optimize cold starts (initialization is faster with the slim Deno edge runtime)
• Your data loaders and actions make requests to databases and APIs that are also globally distributed, or none at all
• You need to support very large request or response bodies (Serverless Functions have a 6 MB limit)

Choose Serverless Functions when:

• Your data loaders and actions make requests to databases or APIs that are centrally located (canceling out much of the benefit of edge compute)
• Your server-side code is CPU-intensive (Serverless Functions run on more powerful machines)
• You need longer execution times (Functions allow up to 30s clock time, while Edge Functions are limited to 50ms CPU time)
• You cannot use Edge Functions due to their runtime constraints or limitations

Next steps

• Create a new React Router 7 project with our template
• Read the Netlify React Router plugin docs for more details on deploying to the edge

React Router 7 recently launched its long-awaited middleware feature, stable since v7.9.0.

Middleware is now fully supported on Netlify.

How to use it

Ensure you’re on version 7.9.0 or later of React Router:

npm install react-router@latest @react-router/node@latest @react-router/dev@latest

Upgrade to version 2 of the Netlify React Router plugin:

npm install @netlify/vite-plugin-react-router@latest

After that, middleware works out of the box.

Next steps

• Check out the full React Router middleware docs
• Create a new React Router 7 project with our updated template
• Read the Netlify React Router plugin docs for more on loader/action context and to access type-safe Netlify context in middleware

The Next.js 16 release is here and Netlify is ready.

Deploy the latest version, including Turbopack, React Compiler, and enhanced caching APIs, with zero configuration.

• Turbopack (stable): Up to 10× faster Fast Refresh and 2-5× faster builds
• React Compiler (stable): Automatic memoization for smoother re-renders
• Improved caching APIs: revalidateTag with cacheLife profile argument for Stale-While-Revalidate behavior and Server Actions-only updateTag to immediately refresh cached data

Template update

We’ve updated the Next Platform Starter to v16, showcasing Turbopack and the new caching APIs in action. In our tests, the project saw a 2.8× faster next build with Turbopack.

Upgrading to v16 on Netlify

If you’re upgrading from v15, no Netlify configuration changes are required. Teams that have opted out of automatic updates for Netlify’s OpenNext adapter will need to manually upgrade, or simply opt back in to receive automatic updates.

Resources

• Deploy the demo
• Read the Next.js 16 release
• View Next.js on Netlify docs

Angular 20 is now fully supported on Netlify with zero configuration required.

What’s new

• Full Angular 20 compatibility: Deploy Angular 20 projects with all the latest features including stable signals APIs, zoneless change detection in developer preview, and incremental hydration.

• Updated Angular template: We’ve refreshed our Angular starter template to showcase Angular 20’s capabilities, including the new control flow syntax and simplified component naming conventions.

• Optimized SSR support: Angular 20’s stable incremental hydration and route-level rendering modes work with Netlify’s edge network for faster, more efficient server-side rendering.

How to get started

Add your existing Angular 20 project by connecting your Git repository–or deploy our template–no configuration changes needed. For new projects, try our updated template with Angular 20’s latest features.

If you’re planning to upgrade from version 18 or earlier, check out our guidance on the Angular runtime.