Next JS Debugging

For most errors, Next JS will display a nice overlay with an error message and the line that caused it.

Trowing errors

I had an error caused by an incorrect path to a data.json file. The application only showed the error, without any context of where it came from.

There may be tools that work better for this, but I haven't tried them out yet. Sentry, Debug

Debugging

You can debug your server code in an IDE like VSCode. You can also use the browser to debug client code.

In VSCode's launch.json there are various ways of connecting the debugger. Launch will start a debug terminal and run your app. Attach will look for a running node process to attach to.

Hydration errors

When server rendered components don't match what's in the browser, a hydration error is thrown.

This can happen for several reason, but in my case a library was adding extra attributes to the <html> element.

Add suppressHydrationWarning={true} to the component to suppress the warning.

Level
Topics