Share on Twitter
Share on Facebook
Share on HackerNews
Share on LinkedIn

Jamstack, Next.js, Netlify, and Sentry: How The Pieces Fit

Jamstack (Javascript + APIs + Markup) is a web architecture that combines the convenience of pre-built websites with the capacity to handle custom APIs and serverless functions. By separating the frontend UI from backend databases, Jamstack allows developers to structure their application in ways that deliver dynamic content faster. Jamstack also gives you the ability to deploy your frontend directly to a CDN, which enables modular development that can leverage a huge ecosystem of third-party tools — including Sentry.

hero-nextjs

Next.js

Next.js offers everything you want in a JavaScript framework: minimal configuration, TypeScript support, smart bundling, and route prefetching.

We manage several large customer-facing properties and Next.js gives us the flexibility to easily build static and dynamic pages without spinning up servers or sacrificing the end-user experience. With Next.js, we can see our changes locally in 100s of milliseconds and have reduced build times for our larger projects from 35 minutes to 7.
Michael Wickett, Group Manager, Web Development, HashiCorp

And when you install our freshly-released Next.js SDK, you get the necessary context to understand how certain events can lead to errors or performance issues in your application. Our Next.js SDK automatically captures errors, breadcrumbs that show what led to an issue, and all the meta data required to fully diagnose a critical problem.

Netlify

The Netlify platform combines modern build workflows, serverless functions, and an edge network to deliver simple, secure, and scalable Jamstack applications. With Netlify’s custom testing environments, you’re able to evaluate multiple new features at the same time without needing to schedule feature previews for approval on a single test instance.

hero-netlify

Sentry Build Plugin for Netlify

And just as Netlify hosts your Jamstack application, Sentry monitors it with our Build Plugin. Not only does our Build Plugin automatically notify you of new releases, it uploads source maps and configures suspect commits within the Sentry platform. And if you do see anything suspicious, Netlify makes it easy to instantly roll back to a previous, sturdier version of your application.

The most noticeable for us was saving an average of three hours per week on performing deploys, setting up configurations and maintaining infrastructure. For a small web dev team, this has a huge impact.
Primož Bevk, Senior IT Strategist at Outfit7

Discover

It’s not enough to know when a performance issue happened. You need to know who’s impacted by that issue, to what extent, and how it occurred. Discover solves these needs, as you can identify application performance issues, analyze releases, define a metric alert to get notified of similar issue — in addition to evaluating the line of code that’s causing the error.

Just as application errors are related, the tools to fix those errors should be related as well. It’s why you don’t need a bunch of disconnected tools to monitor your application; you need an integrated, intuitive approach to investigate problems. With Jamstack’s simplicity and Sentry’s visibility, you’re well on your way toward creating — and maintaining — the type of applications that your customers demand.

Looking for best practices on building, deploying, and monitoring your Next.js applications? Neil Manvar (Solutions Engineer @Sentry) and Ramin Sedighi (Solutions Engineer @Netlify) are hosting a webinar on June 24th. Register here.

In the meantime, try Sentry for free today or contact us at sales@sentry.io to get started.

Your code is broken. Let's Fix it.
Get Started

More from the Sentry blog

ChangelogCodecovDashboardsDiscoverDogfooding ChroniclesEcosystemError MonitoringEventsGuest PostsMobileMoonlightingOpen SourcePerformance MonitoringRelease HealthSDK UpdatesSentry
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.