DEV Community

Cassidy Williams for Netlify

Posted on • Originally published at netlify.com on

1

Logging in Next.js

Welcome to Blogvent, day 13!

Next.js is a hybrid framework. Some parts of it live in the browser, and some parts live in Node.js. When you’re developing, that can make for some fairly confusing development, sometimes!

Depending on where you put your console.log() statements, your logs will appear in different spots. Here’s some rules of thumb for figuring out where they are:

If your logs are declared in a function that renders/uses React, they will appear in the browser.

Whether it is one of your React hooks, your React components, or a page-level component, that log will be in your browser console. This part of your code is the frontend of your application, so you can remember this that the frontend is client-side, in the browser! This is true for both development and production mode.

If your logs are in a data fetching function, they will appear in your terminal or build/function logs.

If you have utilities, call APIs, or render certain routes based on external data, these logs will be in your terminal in development mode. Your terminal is where the “back-end” of your application lives, and where you can see pages being built. It’s a Node.js environment! In production mode, these logs will appear at build time in your build logs at build time, or in your function/API logs at runtime.

I want to experiment with this!

Who doesn’t? Here’s a starter application to try this out:

Deploy to Netlify

(Clicking this button will deploy a Next.js starter project to Netlify, and clone it to your chosen Git provider)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay