Then, a call is made to Gravatar API, and profile data is fetched. The code is pretty simple – firstly, we check for email address presence. Its purpose is to respond to the GET request from the app with data fetched from Gravatar API. If you take a look inside /pages directory, you’ll see /api/data/.ts file – it contains a handler for that particular API route – this is the lambda function invoked when accessing that route, which we will monitor later on. /utils – utilities used through the app./hooks – useFetchGravatarData hook used in main component,./components – mostly layout stuff made with Mantine (which I highly recommend),. ![]() Some insight into the appĪpart from default Next.js directories, the app consists of these main modules: It will be available on localhost:3000 – go there and check your (or someone else’s) Gravatar data to see the app working. It is available on my GitLab here, and its purpose is to fetch data from Gravatar for a provided email address.Ĭlone repo from the link above and inside directory run: To start using Logtail, we have to set up a sample app that we will then monitor. Make sure you have everything on your machine, and we are ready to start! Clone and run the app locally pnpm package manager (you can use another one if you want, however pnpm’s lockfile is included in the repo),.Of course, we’ll take advantage of that, so we are gonna deploy our app using Vercel’s free plan and then use Vercel’s Marketplace to enable integration between the app and Logtail. add-ons Marketplace with integrations from various providers.all of the newest Next.js features are supported out of the box,.the minimal configuration required for the deployment (you’ll see that in a bit),.Vercel (former ZEIT) is a deployment platform made by the creators of Next.js, which provides many advantages when they both work together: Set up and easily deploy the app with Vercel CLI Up-to-date pricing of Logtail is available here. Some of the features are locked to higher tiers, but as long as you just want to store & browse your logs, Free tier should do just fine. Like most of the modern tools on the market, Logtail is not free, although it has a Free tier (you can use it without providing card details, I wish more companies would do that), which can easily handle one production app, or even more. Really intuitive and functional interface,.Ability to query stored logs using dedicated query format or SQL,.It enables log collection virtually from anything – starting from typical web apps (like the one we will work with in this tutorial), through databases, ending with basically anything that can send POST HTTP request with data to one of Logatil’s endpoint. Logtail is an SQL-compatible log management platform made by BetterStack. We use the information you provide to us to contact you about our relevant content and services. Instead, I can just use their dedicated JS client libraries directly in the Next.js app. ![]() Personally, I like using them with services like Firebase or Supabase because having a proper backend would be too much in that case. You need to analyze your particular use-case and start from there, but from my experience, they are good for small and a bit larger web apps. ![]() Like in most cases, when it comes to software development, there is no single answer to when to use certain technology, and Next.js API routes are no different. Perfect for integrating with third-party services like Stripe, SendGrid, etc.No need for running a separate backend server, which lowers deployment costs,.Some of the reasons to go with Next.js API routes are: It is a perfect solution for web apps that don’t necessarily need a proper, full-blown separate backend instance but still need to have some sort of own API for various reasons. How to use basic Logtail features, such as filtering and alerts – we’ll cover more advanced ones in part two!ĪPI routes in Next.js are server-side only lambda functions and (as the name suggests) provide a way to build an API.How to monitor it using Vercel’s integration with Logtail,.How to deploy the Next.js app with Vercel CLI,.Why you may want to use Next.js API routes,.At the time of writing, the actual version is 12.2, which includes long-awaited features such as middlewares, on-demand ISR, and more – you can read more about them here.
0 Comments
Leave a Reply. |