Production Essentials: Logging in NextJS 13
Tags: ec2, nextjs, linux
Published: 2023-08-29 16:58:37


## How to save logs in NextJS server components ??

Logging is a crucial part before deploying any application to production as **console.log()** doesn't cut work in the server, even if it did we have better tools :)

At the end of this article, you will learn how to save your application logs to either your NextJS project or to your **Linux Server** log file (/var/log)


### Step 0 : Assuming you have a basic next project ( Nextjs 13 ) set up 
```
npm install winston 
```
<hr/>
### Step 1: Create a file called `logger.js`. <br>
It should be in the root of your project. For example
```
PROJECT_NAME
|_ app 
|_ public
|_ logger.js 👈

```

Add the following code in logger.js file
```js
// logger.js
import winston from "winston";
const { combine, timestamp, json } = winston.format;

const logger = winston.createLogger({
  level: "info",
  format: combine(timestamp(), json()),
  transports: [
    new winston.transports.File({ 
        filename: "app.log"
    }),
  ],
});

export { logger };
```

What you need to focus on are three things 
- level : there are different log levels, and we want info and above
- format : The format at which our logs will be stored
- transports: This is important, we use it to **transport** our logs to a file. <br> 

### Step 2: Create a `app.log` file in the root of your project. <br> 

```
PROJECT_NAME
|_ app 
|_ public
|_ logger.js
|_ app.log 👈

```


Moving on, we will try to use this logger that we have created on NextJS Server Components and API routes and check if our logs are saved or not.

<hr />

### Step 3: Use our logger in a Server Component

- Create a **home** folder inside **app** folder 
- Create a `page.jsx` file inside home

```
PROJECT_NAME
|_ app
|   |_ home 👈
|        |_ page.jsx 👈
|
|
|_ public
|_ logger.js
|_ app.log 

```
```js
// app/home/page.jsx
import { logger } from "@/logger"; // our logger import

export default function HomePage() {
  logger.info("Home Page called "); // calling our logger
  return (
    <div>
      <h3>Home page</h3>
    </div>
  );
}

```
- Now check you `app.log` file, If you get a log with message "Home Page Called" you have successfully configured logging.


### Step 4: Use our logger in an API route

Next JS 13 lets us write our backend in api folder, let's write a basic GET endpoint that returns "hello" as a response

- Create a file `api/test/route.js` inside `app`

```
PROJECT_NAME
|_ app
|   |_ api
|   |    |_ test 👈
|   |        |_ route.js 👈
|   |_ home
|   
|_ public
|_ logger.js
|_ app.log 
```
```js

import { NextRequest, NextResponse } from "next/server";
import { logger } from "@/logger"; // our logger import

export async function GET(req: NextRequest) {

  logger.info(`GET /api/gethome ${req}`);

  return NextResponse.json({
    message: "success",
    status: 200,
  });
}

```

- Now from your browser ( Assuming you are on localhost:3000)  go to /api/test

- Now check the logs in `app.log`.

- Logging for API's are particularly very powerful because we can log request and request parameters which we can check to debug issues that may arise in our production application


<hr />

## Logging in Linux or EC2 

Now suppose you have your project running on AWS EC2 or other Linux servers, and you want to save your logs, not on your next project but on the servers log folder

You would need to do the following steps

### Change the logger transport to point to your Linux log 

```js

import winston from "winston";
const { combine, timestamp, json } = winston.format;

const logger = winston.createLogger({
  level: "info",
  format: combine(timestamp(), json()),
  transports: [
    new winston.transports.File({
      filename: "/var/log/NEXT_APP/app.log", 👈
    }),
  ],
});

export { logger };

```

### Create a directory in your server <br>
With the same folder name as in your logger transports filename

``` 
sudo mkdir /var/log/NEXT_APP/app.log
```

NOTE: your logger now has the file location, but it still doesn't have the **permission** to write in this file. So we will have to give the log file appropriate permission

```
sudo chmod a+w /var/log/NEXT_APP/app.log 
```


Logging is a very good topic to dive deep into, and if you have more time do read about log levels, log rotation and other topics. 

If you think this article needs some edits, or additions feel free to comment. Thanks !