# [Next.js] Unhandled Runtime Error

In today’s article, we will delve deeply into the issue of ***Unhandled Runtime Error*** in **Next.js**. We will explore what causes this error and how it manifest in your application. Additionally, we will provide a step-by-step guide on how to diagnose and resolve these errors effectively. By the end of this article, you will have a comprehensive understanding of how to handle runtime errors in Next.js, ensuring your application runs smoothly and efficiently.

### Let’s dive into the solutions right away!

1. **Check the Error Message and Stack Trace :**
    
    ✬ Carefully read the error message and stack trace that Next.js provides in the browser or terminal. It usually points directly to the file and line number causing the issue.
    
2. **Common Causes and Fixes :**
    
    ✬ **Incorrect Imports or Missing Modules:**
    
    * Ensure all imports are correct and that all necessary modules are installed.
        
    * Check for typos in component names, file paths, or module names.
        
    
    ✬ **Runtime Errors in Components :**
    
    * Look for runtime errors in your components, such as accessing properties on `undefined` objects, improper use of hooks, or incorrect JSX syntax.
        
    
    ✬ **Use of** `useEffect` and `useState`:
    
    * Verify that hooks are used correctly, especially inside functional components.
        
    * Ensure that `useEffect` dependencies are properly set to avoid unintended infinite loops.
        
3. **Third-party Libraries :**
    
    ✬ If you're using third-party libraries, ensure they are compatible with the version of Next.js you are using. Check for any breaking changes in their documentation.
    
4. **Include** `“use client”;` **if your component contains client-side logic :**
    
    ✬ In Next.js, especially with the App Router (introduced in Next.js 13), you need to specify `'use client'` <mark>at the top of your component files</mark> if they contain client-side logic like hooks (`useState`, `useEffect`, `useContext`, etc.).
    
    ```javascript
    “use client”;
    // rest of the code
    ```
    
    —&gt; *This was the mistake in my case. because I was using framer-motion and it uses client-side logic like* `useContext` . Below is the error I encountered :
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725979065904/f33a5555-4a58-43f5-bb17-7be7ef855139.png align="center")
    
5. **Update Dependencies:**
    
    ✬ Ensure that all dependencies are up to date, as some runtime errors can come from outdated packages :
    
    ```bash
    npm update
    ```
    

You've reached the end of this article. I hope you found the information helpful and insightful. If you have any questions or need further clarification on any of the points discussed, please feel free to leave a comment or reach out directly. Remember, staying up-to-date with best practices and continuously learning is key to becoming a better developer. Thank you for reading until the end :)

I will look forward to sharing more insights with you in future articles. Happy Coding 😊!!!