Before you go, check out these stories!

0
Hackernoon logoWhat is Next.JS and How to Debug it by@nikolovlazar

What is Next.JS and How to Debug it

Author profile picture

@nikolovlazarLazar Nikolov

Full-stack Engineer👨🏻‍💻 UX/UI Designer👨🏻‍🎨 Blogging about JS and design📝

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 

console.log
 for debugging.

If you liked this article, then you'll love my other articles ❤️

Previously published at https://nikolovlazar.com/debugging-nextjs

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!