Aditya Singh
Aditya Singh
  • 55
  • 60 369
Debug & Monitor Next.js Apps with Grafana Loki, Prometheus, Zepkin
In this video, I’ll show you how to add complete observability to your Next.js app. You’ll learn how to:
- Implement instrumentation so you know exactly what’s happening inside your app.
- Collect logs, metrics, and traces with easy-to-follow steps.
- Use Pino and Loki for powerful, lightweight logging.
- Integrate Prometheus to gather detailed performance metrics.
- Visualize everything using Grafana’s beautiful dashboards.
- Set up tracing with Zipkin to track requests end-to-end and quickly pinpoint issues.
By the end, you’ll have a clear picture of your app’s health and performance, making it easier to find and fix problems before users even report them.
Github repo: github.com/adityasinghcodes/nextjs-monitoring
Переглядів: 408

Відео

Better auth tutorial for next.js | Best authentication framework for next.js
Переглядів 3,9 тис.28 днів тому
In this video I am going to show how to use better auth ( a fullstack authentication framework for typescript ) to implement features like: user registrations password reset email verification login with credentials login with oauth working with sessions working with middlewares working with plugins role based access control and lot of useful stuff. Github repo: github.com/adityasinghcodes/bett...
Docker Basics for Next.js Developers: Prisma and MongoDB Dev Setup
Переглядів 546Місяць тому
In this video I am going to show you what is docker, some of the basic concepts like container, images, Dockerfile and docker compose. Then we see how do we use docker to create the entire development environment. I am also going to show you how to setup mongodb as replica set locally with docker. Thank you.
End-to-End Testing in Next.js 15 with Playwright: Authentication, Routes & Role-Based Access
Переглядів 1,4 тис.Місяць тому
In this video, I’ll show you how to set up end-to-end testing in a Next.js 15 project using Playwright. We’ll cover: 1. Setting up Playwright for Next.js 2. Writing tests for both public and protected routes 3. Persisting login state to streamline testing 4. Testing role-based access, like user and admin permissions Thank you
Increased Next.js App Performance By 30%.
Переглядів 4,3 тис.Місяць тому
Hey guys, in this video I show you little changes that I did in the CRUD app that we created from scratch in one of my older video. Simples changes that resulted in almost 30% performance gain. Link to the CRUD video: ua-cam.com/video/dgw029Bm0wQ/v-deo.html Github repo: github.com/adityasinghcodes/nextjs-crud/tree/optimizations Thank you.
Complete Guide to Next.js Concepts: Routing, Middleware, and More
Переглядів 7542 місяці тому
In this video, I’ll be covering some of the important and common topics in next.js that you need to know. 1. Styling 2. Fonts 3. Fetching Data 4. Routing System & Special Files 5. Linking & Navigation 6. Rendering 7. Middleware 8. Optimization Time stamps: 00:00:00 Introduction 00:02:30 Styling 00:13:27 Fonts 00:18:24 Data Fetching 00:37:34 Routing System 00:43:11 Special Files 01:15:08 Navigat...
CRUD in Next.js Using Zod, Shadcn, Prisma, Mongodb and SWR - Simplified.
Переглядів 3,7 тис.3 місяці тому
This video shows the complete CRUD functionality in a next.js app. I am going to show you how to make a minimal todo app that provides a good user experience. I will show you how to use Zod for form data validation, shadcn for ui components, prisma as ORM, mongodb as database and other important things. Source code: github.com/adityasinghcodes/nextjs-crud Thank you.
User Registrations in Next.js With Next-Auth V5 and Edge Compatible Auth Prisma and mongodb
Переглядів 3,1 тис.3 місяці тому
In this video, I demonstrate how to set up user registrations in Next.js apps. You'll learn to implement both email/password sign-ups and OAuth provider registrations. I also cover how to make your Next.js app edge-compatible, ensuring it works smoothly on any hosting platform, including Vercel and AWS. Link to next-auth video: ua-cam.com/video/DNtsJlmPda8/v-deo.html Code: github.com/adityasing...
Fullstack Authentication & Authorization in Next.js using NextAuth V5 (Auth.js), Zod, Shadcn UI
Переглядів 27 тис.4 місяці тому
Hey everyone. In this video I show you how you can implement fullstack authentication and authorization in your next.js apps using next-auth v5 which is also called as auth.js. I have also talked about Zod and Shadcn. Zod for data validation and schema structre and Shadcn for UI components. I have also explained roles based access control. I have explained both credentials auth and social auth ...
Server vs. Client Components in Next.js: Explained with Real-World Examples
Переглядів 7904 місяці тому
Hi guys. In this video I have explained server and client components in nextjs. I have also discussed about when should you use which? And also some of the important patterns. Thank you
Component streaming in nextjs with React Suspense | SSR in nextjs #nextjs
Переглядів 6095 місяців тому
In this video I have explained what is streaming in nextjs. I demonstrated both implementation of streaming in nextjs. That is using loading file in nextjs and also using Suspense for component streaming. Thank you.
Master All Rendering Techniques in Next.js with Just 1 Video
Переглядів 9965 місяців тому
Hey guys. In this video I have explained all of the rendering techniques present in nextjs with practical examples and usecases. The rendering methods I have covered in this video is CSR ( Client side rendering ), SSR ( Server side rendering ), SSG ( Static site generation ), ISR ( Incremental static regeneration ) and Dynamic Server side rendering. Hope you find this video valuable.
CSS hack to select a range of elements #css
Переглядів 565 місяців тому
CSS hack to select a range of elements #css
6. Route handlers in nextjs | Nextjs 14 App router
Переглядів 3115 місяців тому
6. Route handlers in nextjs | Nextjs 14 App router
5 . Boost Your Nextjs App Performance By Optimizing Images This Way
Переглядів 3696 місяців тому
5 . Boost Your Nextjs App Performance By Optimizing Images This Way
4. Use these features in nextjs to organize your code in a better way #nextjs
Переглядів 1086 місяців тому
4. Use these features in nextjs to organize your code in a better way #nextjs
Simplify Complex Routing in Next.js: A Guide to Parallel and Default Routes
Переглядів 3537 місяців тому
Simplify Complex Routing in Next.js: A Guide to Parallel and Default Routes
2. Template files in nextjs #nextjs #coding #development
Переглядів 997 місяців тому
2. Template files in nextjs #nextjs #coding #development
1. Routing & basics of special files in nextjs
Переглядів 1287 місяців тому
1. Routing & basics of special files in nextjs
Why Link component in nextjs is awesome?
Переглядів 1328 місяців тому
Why Link component in nextjs is awesome?
CORS errors in nextjs | How to fix CORS issues in your nextjs app?
Переглядів 3 тис.8 місяців тому
CORS errors in nextjs | How to fix CORS issues in your nextjs app?
openAI function calling in nextjs app | Aditya Singh
Переглядів 1308 місяців тому
openAI function calling in nextjs app | Aditya Singh
Scripts in nextjs - Part 2 - beforeInteractive, afterInteractive, lazyOnload, worker strategy
Переглядів 2779 місяців тому
Scripts in nextjs - Part 2 - beforeInteractive, afterInteractive, lazyOnload, worker strategy
Scripts in nextjs - Part 1 - Key Concepts Explained
Переглядів 1339 місяців тому
Scripts in nextjs - Part 1 - Key Concepts Explained
Middlewares in nextjs | Aditya Singh
Переглядів 1699 місяців тому
Middlewares in nextjs | Aditya Singh
Efficient File Uploads in Next.js: Direct to S3 vs Server Relay | S3 presigned url uploads
Переглядів 24810 місяців тому
Efficient File Uploads in Next.js: Direct to S3 vs Server Relay | S3 presigned url uploads
Use dynamic imports to improve the performance of your nextjs app #nextjs
Переглядів 2,7 тис.Рік тому
Use dynamic imports to improve the performance of your nextjs app #nextjs

КОМЕНТАРІ

  • @Iamstephane
    @Iamstephane 4 години тому

    AMAZING VIDEO!!! How do you only have 1k subs?

    • @AdityaSinghCodes
      @AdityaSinghCodes Годину тому

      Thanks so much! I’m focused on creating valuable content, and I believe the subs will grow with time. Glad you enjoyed the video!

  • @NN-db2qc
    @NN-db2qc 5 годин тому

    thank you the video. I am wondering how do you get the upload percentage in the console?

  • @hbela1000
    @hbela1000 День тому

    Thanks.Very good introduction.

  • @harsh_9797
    @harsh_9797 2 дні тому

    is it zed?

  • @mishanesteruk3592
    @mishanesteruk3592 4 дні тому

    I caught an error when I tried to log some things in middleware. GlobalThis doesn't contain a logger, but in routes or server-side pages, it's available. There are the way to log in middlewares?

    • @AdityaSinghCodes
      @AdityaSinghCodes 4 дні тому

      Yes. Create an API endpoint which will accept log data and send it to telemetry backends. You will then make an http request from middleware with the data. Api endpoint will recieve the data and send it to correct telemetry backends. This way you can even log things from the client side.

    • @mishanesteruk3592
      @mishanesteruk3592 4 дні тому

      ​@@AdityaSinghCodes Thank you. But is there somewhere to read why it doesn't work in middlewares? I thought that instrumentation is executed before middleware.

    • @AdityaSinghCodes
      @AdityaSinghCodes 4 дні тому

      The instrumentation we are doing in this video depends upon a lot of packages that only works with nodejs runtime. Middleware in next.js runs in edge runtime so that's why we can't use this inside of middleware. However vercel otel works with edge runtime but it has limitations also in terms of what it can log.

    • @mishanesteruk3592
      @mishanesteruk3592 4 дні тому

      ​@@AdityaSinghCodes Thank you so much!

  • @ivango1182
    @ivango1182 5 днів тому

    how do i verify if a user has an account in my client side before i sent the reset password link email? i keep getting the success message eventhough i enter a non existing account

    • @AdityaSinghCodes
      @AdityaSinghCodes 5 днів тому

      It is only going to send reset password email if the email exists in your db

    • @ivango1182
      @ivango1182 5 днів тому

      @ ya but i am getting the success toast message without reset password link even the account doesn't exist, my concern is about the toast message, how do I control it

    • @AdityaSinghCodes
      @AdityaSinghCodes 5 днів тому

      I have not tried this, but try looking in the data when you call forgetPassword. const { data, error } = await authClient.forgetPassword(yourOptions);

  • @angletheeta
    @angletheeta 6 днів тому

    I have question but its not related to this but i think you may have answer for it im used authjs for my project its finly work in dev mode but when it goes to production it having issues in oauth google its keep riderecting me to localhost:3000/error like pthway but on the gcp console im clearly mention the callback url as domain/api/auth/callback/google im find a solution from 3 days buts im not get a solution

    • @AdityaSinghCodes
      @AdityaSinghCodes 6 днів тому

      Share your code so I can take a look. Message me on X

    • @angletheeta
      @angletheeta 5 днів тому

      @AdityaSinghCodes im shared through x

  • @owl3379
    @owl3379 10 днів тому

    idk, i get 401 unauthorized as admin :(

  • @tarifalhasants
    @tarifalhasants 11 днів тому

    better-auth much better then next-auth

  • @uditmehra80
    @uditmehra80 12 днів тому

    The explanation of integrating Grafana Loki, Prometheus, and Zipkin with Next.js apps was so clear and practical. I appreciate how you broke down the complex debugging and monitoring concepts into simple steps. Thanks for sharing such valuable insights-looking forward to more content like this! 🙌🔥

  • @jitxhere
    @jitxhere 12 днів тому

    Man this is godsend. Amazing content as always. I am selfhosting my nextjs app and this will be a lot helpful. I am using prometheus to monitor my server. Now this at application. Do I need at nginx level too??

    • @AdityaSinghCodes
      @AdityaSinghCodes 12 днів тому

      that depends upon if you need that info. but I guess if you are using promethues, you are most likely interested in server resources like cpu and memory usage and in that case just collecting the default metrics would be fine.

    • @jitxhere
      @jitxhere 12 днів тому

      @AdityaSinghCodes thanks for the reply. Amazing content. Looking forward for your next videos. I have a suggestion: Kafka setup for event driven architecture and using in nodejs or nextjs.

    • @AdityaSinghCodes
      @AdityaSinghCodes 12 днів тому

      Def I have to make videos on kafka

  • @from.houseofgandhi
    @from.houseofgandhi 13 днів тому

    In my opinion sentry is best for debug.

  • @ashmisingh1055
    @ashmisingh1055 13 днів тому

    nice 👍

  • @rashicodes
    @rashicodes 14 днів тому

    Thanks

  • @uditmehra80
    @uditmehra80 14 днів тому

    Thanks!

  • @starlord7526
    @starlord7526 16 днів тому

    why exactly are you moving parts of auth code to auth.config.ts ? i didnt understand that part, please help Aditya

    • @AdityaSinghCodes
      @AdityaSinghCodes 15 днів тому

      I’m trying to set up authentication that works across both the Node environment and the Edge environment. I’m using the Prisma adapter, but it’s not compatible with the Edge environment unless you use Neondb or something. So, for the Edge environment, we’ll need to create an authentication instance that doesn’t include the Prisma stuff. This means we’ll have to split the configuration, which will create two authentication instances: one without the Prisma adapter and one with the Prisma adapter. When you’re doing this, make sure you handle any Prisma-related stuff inside your route handlers.

    • @starlord7526
      @starlord7526 15 днів тому

      @@AdityaSinghCodes oh I see, that makes sense. Both of the video were fantastic. thanks bro

  • @mutantmantish6141
    @mutantmantish6141 17 днів тому

    Nice vid

  • @codesavanna
    @codesavanna 18 днів тому

    thank you so much you are such an amaizing teacher 😃

  • @rahulkumargautam3358
    @rahulkumargautam3358 19 днів тому

    Thanks, अब CORS के लिए कोई और video नहीं देखनी पड़ेगी 👍👍

  • @muhammadwahyuramadhan7730
    @muhammadwahyuramadhan7730 20 днів тому

    Wonderull! U save my day But, brother.. I try to not split my auth.js like u did, i just adding session strategy to be jwt and its working, The question is, is it will be problems? If i not split my auth.ts like u did? Note: im not using credentials signin, i just use google signin

    • @AdityaSinghCodes
      @AdityaSinghCodes 20 днів тому

      Splitting the config is only necessary if you are using things that are not supported in edge runtime. For e.g. prisma stuff.

  • @AdityaSinghCodes
    @AdityaSinghCodes 21 день тому

    Hey guys. In the video navbar is a server component which depends upon request time information to get the session. This causes all the routes to become dynamically rendered. To fix this, just convert the navbar component to a client component and access session on the client side. I already pushed the code to github repo. Thank you @codezyraofficial for pointing this out.

  • @pradhumanshrestha5479
    @pradhumanshrestha5479 22 дні тому

    Nice video but can you help me to handle error when account linking is false.

    • @AdityaSinghCodes
      @AdityaSinghCodes 22 дні тому

      what error are you getting ?

    • @pradhumanshrestha5479
      @pradhumanshrestha5479 22 дні тому

      @@AdityaSinghCodes I am getting oauth error message like account is already used in other provider. When I try to log in browser console. Its empty. Can you help me how can I display it in client side.

    • @AdityaSinghCodes
      @AdityaSinghCodes 22 дні тому

      You will get the error info in the query param. Read from there and show the user on the client side. localhost:3000/sign-in?error=account_not_linked

    • @pradhumanshrestha5479
      @pradhumanshrestha5479 21 день тому

      @@AdityaSinghCodes thanks for help..

  • @viper_eyes
    @viper_eyes 22 дні тому

    Greate video but just one thing to add , you can use the useSession hook to get the session in client components without the need for a server component , it is wrong in their docs to mention the await auth.api.useSession while it is mentioned in the nextjs integration on client components you can just call the useSession hook which run fine in the client the only caveat is that this will get the seesion is the user logged in also on client side , but if the user logged in server side (eg.server action ) the session will be null .

  • @ricko13
    @ricko13 23 дні тому

    oh man, this video could really be shorter if you didn’t overcomplicate every simple thing

    • @AdityaSinghCodes
      @AdityaSinghCodes 23 дні тому

      Hi, thanks for your comment! I try to give enough context while keeping things clear, and most viewers like this approach. I know my videos won’t suit everyone, and that’s okay. If you have specific suggestions, let me know. Otherwise, feel free to check out other content that fits your style better. Thanks for watching!

  • @Ajay.Pawar-Explorer
    @Ajay.Pawar-Explorer 25 днів тому

    SSR

  • @rezaderakhshan1732
    @rezaderakhshan1732 25 днів тому

    Hi thanks for this video, so useful I see a course that he makes revalidatetime for cache like this fetch(`url`, {next: revalidate: 10}) Does this make ISR ? or only export const revalidate makes ISR ?

    • @AdityaSinghCodes
      @AdityaSinghCodes 25 днів тому

      using revalidate with fetch means, the cache is going to be invalidated only for that specific request. but when you use export const revalidate, next.js will invalidate the cache for the entire route.

    • @rezaderakhshan1732
      @rezaderakhshan1732 25 днів тому

      @AdityaSinghCodes thanks

  • @kambaalayashwanth123
    @kambaalayashwanth123 26 днів тому

    Thank you for the video,been working on better-auth,it decent. Please make more on organisation or multi tenet if possible

    • @AdityaSinghCodes
      @AdityaSinghCodes 25 днів тому

      Awesome. Multi-tenancy is a good idea. I will create a video on this along with custom domain and ssl certificates.

  • @thowheedh
    @thowheedh 28 днів тому

    Brother you deserve millions subs

  • @abtonc
    @abtonc 28 днів тому

    Hi Aditya, great video. I would recommend adding timestamps/sections. Algorithm will boost the video and it would help people find what they are looking for.

  • @uditmehra80
    @uditmehra80 28 днів тому

    Neat and clean explanation as always 🎉

  • @starlord7526
    @starlord7526 28 днів тому

    since i am new to docker, this one was quite tough. I am learning it this weekend

  • @uditmehra80
    @uditmehra80 29 днів тому

    Actually m confused b/w next-auth and better-auth which one is best ?? What do you think?

    • @Henok-qn6nc
      @Henok-qn6nc 29 днів тому

      Better Auth all the way

    • @remember.772
      @remember.772 29 днів тому

      Anchi mirt 🎉​@@Henok-qn6nc

    • @prashlovessamosa
      @prashlovessamosa 28 днів тому

      @@Henok-qn6nc open auth is comparatively very new if you working with hono or something else stuff is not there but it's very easy to implement or I can say free clerk

    • @Henok-qn6nc
      @Henok-qn6nc 28 днів тому

      ​@@prashlovessamosa It is new. But Its also stable and ready to use on prod. And there is hono integration guide on the documentation. Check that out

    • @prashlovessamosa
      @prashlovessamosa 28 днів тому

      @@Henok-qn6nc I am sorry I had no idea about that I will check 👍

  • @prashlovessamosa
    @prashlovessamosa 29 днів тому

    Thanks for sharing I am using it it's so easy to implement.

  • @ankeeth-suvarna
    @ankeeth-suvarna Місяць тому

    This is somewhat how Remix works

  • @Amaterasoo
    @Amaterasoo Місяць тому

    bro can you tell me how do i set up verification email i am only using credentials btw appreciate your work, thanks!

    • @AdityaSinghCodes
      @AdityaSinghCodes Місяць тому

      Sure bro. In short, You can add 2 fields. One for token and one for token expiration. Whenever someone signsup, you generate a token, add it as a query param to your email verification url. Create this url and whenever this page gets loaded validate the token. If token is valid, email is verified.

    • @AdityaSinghCodes
      @AdityaSinghCodes Місяць тому

      Also send them an email which contains this url.

    • @Amaterasoo
      @Amaterasoo Місяць тому

      @@AdityaSinghCodes thanks for replying! i'll try to implement it.

  • @ChandradeepKumar8384
    @ChandradeepKumar8384 Місяць тому

    Nice❤❤

  • @Fatma-hy5qx
    @Fatma-hy5qx Місяць тому

    Thanks, Is a verification e-mail sent here?

  • @Fatma-hy5qx
    @Fatma-hy5qx Місяць тому

    Is a verification e-mail sent here?

  • @Mohammed-hp7bu
    @Mohammed-hp7bu Місяць тому

    Explanation is awesome and pls make a video for production set up also

  • @MesaTube
    @MesaTube Місяць тому

    you saved me bro , , thanks

  • @adityaSwamii
    @adityaSwamii Місяць тому

    thanks a lot, before this video I only used postgreSQL with prisma