7,815 reads

What is Next.JS and How to Debug it

by Lazar NikolovSeptember 29th, 2020

Too Long; Didn't Read

Next.JS is an amazing React framework created by Vercel. It allows developers to create Server-side, Client-side or Static websites. The rendering in Next.JS is per page, so the "about" page can be static, while the "home" page is server-side. This article covers the Debugger for Chrome extension and how to use it in Visual Studio Code. You can use the same commands in other IDEs, but you need to write them in the specific format.

featured image - What is Next.JS and How to Debug it

Next.JS allows the developers to create Server-side, Client-side or Static websites. Unlike the other frameworks, the rendering in Next JS is per page. That means, the "about" page can be static, while the "home" page can be server-side.

It is an amazing React framework created by Vercel. Next JS is on the rise, loved by the developers, and my favorite React framework so far.

Environment

This article covers the debugging process using Visual Studio Code. You can use the same commands in other IDEs, but you need to write them in the specific format.

For simplicity, we will use this repo to show the debugging process. So, go ahead and clone it on your computer, execute

yarn install

and open it in Visual Studio Code.

Debugging Next.JS

A Next.JS page has two parts: a server-side part and a client-side part. To debug both parts you will need two VSCode launch tasks. Let's dive in.

Debugging the Server-side

The server-side code lives in the

getServerSideProps

method. It executes every time there's a request. To debug the server-side code we will need to add a new VSCode launch task. First, create a

.vscode

folder in the root of the project, and then inside that folder create a

launch.json

file. We will add our launch tasks here.

Inside the

launch.json

file add a new "Node: Launch Program" configuration. Then, you will need to add the following changes:

Remove the
```
skipFiles
```
property
Remove the
```
program
```
property

Add a new property

runtimeExecutable

with value

${workspaceFolder}/node_modules/.bin/next

Your

launch.json

file should look something like this:

{
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Next: Node",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next"
        }
    ]
}

That's it! Now open the

/pages/[owner]/[repo].tsx

file, add a breakpoint on line 32 and hit F5. When the Next.JS server starts navigate to http://localhost:3000 and click on one of the repos in the list. After clicking it, you should hit the breakpoint. Now you have the ability to inspect the

ctx

argument and the data received from GitHub's API.

Debugging the Client-side

To debug the Client-side first you need to install the Debugger for Chrome extension. Open the link and click on the Install button. It will ask you to open the link in Visual Studio Code, so click on the "Open Visual Studio Code" button.

As I mentioned above, you will need two launch tasks, so let's create the client-side one. Head to

launch.json

and add a new "Chrome: Launch" task. Then, you will only need to make one change:

Change the
```
url
```
value to
```
http://localhost:3000
```

Your complete

launch.json

file should look something like this:

{
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Next: Node",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next"
        }
    ]
}

And that's it! Now, open the

/pages/index.tsx

file and add a breakpoint on line 9. You can now launch the Launch Chrome task from the debug panel. The Launch Chrome task should open a new Chrome window on the home page. Start typing into the input on the screen and you will hit the breakpoint in the

index.tsx

file. Now you have the ability to inspect the client-side properties, like the

repo

variable.

Click continue and type another letter. You will hit the breakpoint every time you type something in the input. Hover on the

repo

variable to see the value changing. You're now debugging the client-side code!

Conclusion

Now you know how to debug both sides in a Next.JS app. The server side code is node, so you need a Node debug task for it. The client side is Chrome, so you need a Chrome debug task for it.

Also, debugging is a vital process in software engineering, so use it everywhere you can! Don't use only