Next.JS allows the developers to create Server-side, Client-side or Static websites. Unlike the other frameworks, the rendering in Next JS is . That means, the "about" page can be static, while the "home" page can be server-side. per page It is an amazing React framework created by . is on the rise, loved by the developers, and my favorite React framework so far. Vercel Next JS Environment This article covers the debugging process using . You can use the same commands in other IDEs, but you need to write them in the specific format. Visual Studio Code For simplicity, we will use to show the debugging process. So, go ahead and clone it on your computer, execute and open it in Visual Studio Code. this repo yarn install 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 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 folder in the root of the project, and then inside that folder create a file. We will add our launch tasks here. getServerSideProps .vscode launch.json Inside the file add a new "Node: Launch Program" configuration. Then, you will need to add the following changes: launch.json Remove the property skipFiles Remove the property program Add a new property with value runtimeExecutable ${workspaceFolder}/node_modules/.bin/next Your file should look something like this: launch.json { : [
        { : , : , : , : }
    ]
} "configurations" "type" "pwa-node" "request" "launch" "name" "Next: Node" "runtimeExecutable" "${workspaceFolder}/node_modules/.bin/next" That's it! Now open the file, add a breakpoint on line 32 and hit F5. When the Next.JS server starts navigate to 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 argument and the data received from GitHub's API. /pages/[owner]/[repo].tsx http://localhost:3000 ctx Debugging the Client-side To debug the Client-side first you need to install the 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. Debugger for Chrome As I mentioned above, you will need two launch tasks, so let's create the client-side one. Head to and add a new "Chrome: Launch" task. Then, you will only need to make one change: launch.json Change the value to url http://localhost:3000 Your complete file should look something like this: launch.json { : [
        { : , : , : , : , : },
        { : , : , : , : }
    ]
} "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 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 file. Now you have the ability to inspect the client-side properties, like the variable. /pages/index.tsx index.tsx repo Click continue and type another letter. You will hit the breakpoint every time you type something in the input. Hover on the variable to see the value changing. You're now debugging the client-side code! repo 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 for debugging. console.log If you liked this article, then you'll love my other ❤️ articles Previously published at https://nikolovlazar.com/debugging-nextjs

What is Next.JS and How to Debug it

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

An Essential Guide to Rendering your Website

The Noonification: Neuralink: Elon Pledges to Get a Brain Implant (12/14/2022)

A Deep Insight on Memory Debugging

A Look into Remote Debugging and Developer Observability

An Introduction to 140 Second Ducklings: What is Debugging?

Breakpoints: What They Are and Why They're So Powerful

An Essential Guide to Rendering your Website

The Noonification: Neuralink: Elon Pledges to Get a Brain Implant (12/14/2022)

A Deep Insight on Memory Debugging

A Look into Remote Debugging and Developer Observability

An Introduction to 140 Second Ducklings: What is Debugging?

Breakpoints: What They Are and Why They're So Powerful

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps