Jamstack, Next.js, Netlify, and Sentry: How The Pieces Fit
Tags: javascript, nextjs, netlify, monitoring
Published: 2021-06-17 22:24:00

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.

#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**

![next.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o37xwff8a2lldpepytcq.png)

And when you install our [freshly-released Next.js SDK](https://blog.sentry.io/2021/06/10/sentry-application-monitoring-for-next-js), you get the necessary context to understand how certain events can lead to errors or performance issues in your application. Our [Next.js SDK](https://docs.sentry.io/platforms/javascript/guides/nextjs/) 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](https://www.netlify.com/products/?utm_source=netlify.com%2Fblog%2F&utm_medium=blog&utm_campaign=partner-post-sentry) 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.

![netlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg0zgc5u9vc3rsf6yblm.jpeg)

#Sentry Build Plugin for Netlify#

And just as Netlify hosts your Jamstack application, Sentry monitors it with our [Build Plugin](https://blog.sentry.io/2020/06/08/automating-sentry-releases-with-our-netlify-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](https://docs.sentry.io/product/sentry-basics/guides/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.