Requestly is now Open Source 🚀
Github
Back
May 28, 2023
Use Cases
5
min read

Debugging Next.js App in Production

Govind Goel

Next.js is an open-source development framework built on top of node.js, enabling React-based web application functionalities such as server-side rendering and generating static websites. Next.js gives you the best developer experience with all the features you need for production: static & server rendering, TypeScript support, smart bundling, route prefetching, and more. No config is required. In nextjs.org, debugging a bug in production can be a nightmare, especially if the bug is reproducible only in the production environment. This could happen for several reasons, such as not having all the data on a local/stage environment or setting up a backend server can seem complex and time-consuming if you are a frontend developer. So in this article, we will see how we can debug a Next.js application in production without even setting up a local server or trying to reproduce the bug in local or in any other environment.

Bug(s) in production NextJS app

We’ll take a simple Todo NextJS App available here - https://github.com/requestly/sample-nextjs-app

which is also live at:


https://sample-nextjs-app-flax.vercel.app/

The app adds and fetches a list of tasks from the backend. When the user clicks on complete, the task gets deleted from the server. We have a server and a frontend application built using Next.Js in the application setup.

Also, in Next.Js, when we build the application, the index page component is compiled as static/chunks/pages/index-b1a6b3cf2be8bc12f539.js 

Let’s take a look at the _buildManifest.js


/: ["static/chunks/pages/index-b1a6b3cf2be8bc12f539.js"]

The about.html has the following scripts imported:


<script src="_next/static/chunks/pages/index-b1a6b3cf2be8bc12f539.js" defer=""></script>

The hash generated along with the filename will change whenever we rebuild the application.

Now, let's consider a hypothetical situation where clicking on submit while adding a task throws an error in production. We find that only the total task count is updated, but the task is not created.

Debugging Backend APIs

If we have to debug this on a local setup, we need to set up the frontend and backend servers locally because the UI code, by default, hits the server on /create and /delete. Setting up the server along with the front end is too big a task for debugging a quick find. So let’s talk about an approach using the Requestly browser extension, using which you can debug your app without setting up your server on the local machine.

Setting up Redirect Rule in Requestly

Requestly is a Chrome extension that over 160k developers use across the world. It lets you Modify network requests, Redirect URLs, Switch hosts, Mock API responses, Delay Network requests, Insert Custom Scripts, and much more. 

When the browser loads the app, instead of loading the JS from production, Requestly picks the JS from localhost.

‍Now, we can add more logic to help us debug the issue. And once we find the issue, we can fix it in our local script, test it on the production site and then deploy it bug-free on the server. 

We will create a redirect rule through which we’ll use our production server capability on our local machine for debugging. We have now successfully redirected our local server routes to the production server. 

And when debugged, we found that the issue was with the UI code itself, i.e., all the required fields were not being passed as the params in the request. It was a small bug that needed a quick fix, so setting up rules saved much time.

Debugging JS Code in Production (Redirecting Production JS to Local JS)

Now we have set up redirects for routing an API endpoint from the production server to the local server; we will use a similar technique to redirect the JS hosted on production to the local JS. However, there is a slight complexity when it comes to JS. As mentioned earlier, every resource in the next.js project gets a unique file hash when the application is built. 

For example, in the following script resource,


https://sample-nextjs-app-flax.vercel.app/_next/static/chunks/pages/index-b1a6b3cf2be8bc12f539.js

index-b1a6b3cf2be8bc12f539.js is the unique file hash. We can use Requestly’s WildCard or Regex match operator to handle the file hash. 

So the rule will look like this: 

This is how you can set up Requestly to gain complete control over your network traffic. I hope this article helped you to simplify your web debugging process.

For Reference:

More about Next.js: https://nextjs.org/

Application: https://github.com/requestly/sample-nextjs-app

Deployed Application: https://sample-nextjs-app-flax.vercel.app/

Rules: https://app.requestly.io/rules/#sharedList/1639923388678-Next.Js-Debugging

Follow us on Twitter and Medium to learn more tips and tricks to use Requestly as your web debugging tool to speed up your debugging process.

Happy Debugging!

Requestly is an Open-Source frontend development platform with essential tooling & integrations that helps frontend developers write, test & debug their code 10x faster. Using Requestly, you can create mock API endpoints, test, validate & override API responses, modify request & response headers, setup redirects (Map local, Map remote) and use Requestly sessions for faster debugging.

On this page

SHARE THIS POST

Ready to get started?

Empowering frontend developers to achieve more in development, testing & debugging workflows.