<p><em>This article was originally published on <a href="/newsletter">my newsletter</a>. If you want to stay up to date and read these as soon as they are published, <a href="/newsletter">sign up</a> for the newsletter!</em></p>
<p>Ahoy,</p>
<p>Winter has come to Finland. It has been snowing a lot and the temperature has been around -15C for the past week or two. Although I love that there is snow (helps with the darkness) and cold weather in December, I have been mostly staying inside and doing a lot of coding lately.</p>
<p><img src="./images/winter-landscape.jpg" alt="Winter is here."></p>
<p>On top of coding, I have been planning to do one or two Next.js videos before the end of the year. As always, if you have any wishes or suggestions on what kind of videos you would like me to do, let me know (reply this email or <a href="https://www.twitter.com/tuomokankaanpaa">hit me up on Twitter</a>)!</p>
<h2>Latest Youtube videos</h2>
<p>As always, I have been uploading one video per week on my <a href="https://www.youtube.com/tuomokankaanpaa">Youtube channel</a>. Here are the latest videos from the channel since my last email.</p>
<h3>Need to show DRAFT content in PRODUCTION? THIS IS HOW!</h3>
<p><a href="https://www.youtube.com/watch?v=bQRhCTlXJQw">
<img src="./images/draft-in-production-nextjs-yt-controls.png" alt="Watch on Youtube!">
</a></p>
<p>This is part 3 of the unofficial "Building a blog with Next.js" series.</p>
<p>In this part we add possibility to view draft blog posts from the headless CMS in production environment. So there is no need for a preview or staging environment and it enables you (or who ever writes the blog posts) to preview the posts in the environment they will be shown for end users.</p>
<p>This is possible with the Next.js Preview feature. Preview feature is one of the less talked about features in Next.js. I also think it is kind of underrated, even though it makes it possible to easily implement the draft content viewing feature, which is in my opinion crucial for every blog application.</p>
<h3>Best VS Code Theme! My HONEST opinion.</h3>
<p><a href="https://www.youtube.com/watch?v=6C26mVeDjxo">
<img src="./images/vs-code-theme-yt-controls.png" alt="Watch on Youtube!">
</a>
I have been looking for a nice new theme for my VS Code and I think I've finally found one that I really like. You might have seen me using it already in some of the previous videos since I've been testing it out for some time now.</p>
<p>So in this video I want to share with you this theme I currently use in my VS Code. Even though I really love this theme, I reserve the right to change my opinion in the future if I come across an even more awesome theme 😂</p>
<p>That's all for this week!</p>
<p>Cheers,
Tuomo</p>



_This article was originally published on [my newsletter](/newsletter). If you want to stay up to date and read these as soon as they are published, [sign up](/newsletter) for the newsletter!_

Ahoy,

Winter has come to Finland. It has been snowing a lot and the temperature has been around -15C for the past week or two. Although I love that there is snow (helps with the darkness) and cold weather in December, I have been mostly staying inside and doing a lot of coding lately.

![Winter is here.](/blog-posts/underrated-nextjs-feature/images/winter-landscape.jpg)

On top of coding, I have been planning to do one or two Next.js videos before the end of the year. As always, if you have any wishes or suggestions on what kind of videos you would like me to do, let me know (reply this email or [hit me up on Twitter](https://www.twitter.com/tuomokankaanpaa))!

## Latest Youtube videos

As always, I have been uploading one video per week on my [Youtube channel](https://www.youtube.com/tuomokankaanpaa). Here are the latest videos from the channel since my last email.

### Need to show DRAFT content in PRODUCTION? THIS IS HOW!

[
![Watch on Youtube!](/blog-posts/underrated-nextjs-feature/images/draft-in-production-nextjs-yt-controls.png)
](https://www.youtube.com/watch?v=bQRhCTlXJQw)

This is part 3 of the unofficial "Building a blog with Next.js" series.

In this part we add possibility to view draft blog posts from the headless CMS in production environment. So there is no need for a preview or staging environment and it enables you (or who ever writes the blog posts) to preview the posts in the environment they will be shown for end users.

This is possible with the Next.js Preview feature. Preview feature is one of the less talked about features in Next.js. I also think it is kind of underrated, even though it makes it possible to easily implement the draft content viewing feature, which is in my opinion crucial for every blog application.

### Best VS Code Theme! My HONEST opinion.

[
![Watch on Youtube!](/blog-posts/underrated-nextjs-feature/images/vs-code-theme-yt-controls.png)
](https://www.youtube.com/watch?v=6C26mVeDjxo)
I have been looking for a nice new theme for my VS Code and I think I've finally found one that I really like. You might have seen me using it already in some of the previous videos since I've been testing it out for some time now.

So in this video I want to share with you this theme I currently use in my VS Code. Even though I really love this theme, I reserve the right to change my opinion in the future if I come across an even more awesome theme 😂

That's all for this week!

Cheers,
Tuomo


This feature is not talked much but it is crucial for every blog application. Learn how to use Next.js Preview mode.

Underrated Next.js feature 🤯

<p><em>This article was originally published on <a href="/newsletter">my newsletter</a>. If you want to stay up to date and read these as soon as they are published, <a href="/newsletter">sign up</a> for the newsletter!</em></p>
<p>Ahoy,</p>
<p>In my last email I mentioned that I was planning on still making one or two Next.js videos this year. Last week I published one of those.</p>
<p>The video is about reducing your Next.js application build time with Incremental Static Regeneration (ISR).</p>
<p>This Next.js feature is super cool since it allows you, among other things, to render dynamic content on static pages!</p>
<h3>Want FASTER build time with Next.js? DO THIS!</h3>
<p><a href="https://www.youtube.com/watch?v=r3yqNI4v47g">
<img src="./images/nextjs-isr-yt-controls.png" alt="Watch on Youtube!">
</a></p>
<p>I also published another video about how you can use GIT branches to easily test different features or make a demo of a new feature. If your GIT-game is not in a good shape, this video is great refresher / tutorial for you!</p>
<h3>Use this GIT trick to test new features fast &#x26; easily</h3>
<p><a href="https://www.youtube.com/watch?v=DSyg1MJVBTY">
<img src="./images/git-branch-feature-yt-controls.png" alt="Watch on Youtube!">
</a></p>
<p>That's all for this week!</p>
<p>Cheers,
Tuomo</p>



_This article was originally published on [my newsletter](/newsletter). If you want to stay up to date and read these as soon as they are published, [sign up](/newsletter) for the newsletter!_

Ahoy,

In my last email I mentioned that I was planning on still making one or two Next.js videos this year. Last week I published one of those.

The video is about reducing your Next.js application build time with Incremental Static Regeneration (ISR).

This Next.js feature is super cool since it allows you, among other things, to render dynamic content on static pages!

### Want FASTER build time with Next.js? DO THIS!

[
![Watch on Youtube!](/blog-posts/faster-build-time-with-next-js/images/nextjs-isr-yt-controls.png)
](https://www.youtube.com/watch?v=r3yqNI4v47g)

I also published another video about how you can use GIT branches to easily test different features or make a demo of a new feature. If your GIT-game is not in a good shape, this video is great refresher / tutorial for you!

### Use this GIT trick to test new features fast & easily

[
![Watch on Youtube!](/blog-posts/faster-build-time-with-next-js/images/git-branch-feature-yt-controls.png)
](https://www.youtube.com/watch?v=DSyg1MJVBTY)

That's all for this week!

Cheers,
Tuomo


Learn about the Next.js feature that makes your build time much faster and enables displaying dynamic content on static pages!

Want FASTER build time with Next.js? DO THIS! ⚡

<p>In this article we will learn how to save and fetch data from Redis inside of a Next.js middleware &#x26; edge functions. We will do this by building a request logger middleware for a fresh Next.js application. You can add this middleware also to your existing application. The middleware will save request data to Redis for each request made to the api routes. We will use <a href="https://www.upstash.com">Upstash</a> Redis for handling setting up and maintaining the Redis database. Let's get started!</p>
<p>If you rather watch a video, I also made a video about this on my <a href="https://www.youtube.com/tuomokankaanpaa">Youtube channel</a>!
<a href="https://www.youtube.com/watch?v=hY2BGM7AnmY">
<img src="./images/cover-yt.png" alt="Watch on Youtube">
</a></p>
<h2>Create the middleware</h2>
<p>First initialise a new Next.js project.</p>
<pre><code>yarn create next-app nextjs-request-logger
</code></pre>
<p>Navigate to the <code>/pages/api</code> folder and create a new file called <code>_middleware.js</code>.</p>
<pre><code>touch pages/api/_middleware.js
</code></pre>
<p>It is important that you name the file exactly as described above because this is how Next.js knows that this file will act as a middleware. Code inside middleware will be run on each request that is made to any route inside this folder (/api) or any of its subfolders / subroutes.</p>
<p>Next add the following code to the <code>_middleware.js</code></p>
<pre><code class="language-jsx">import { NextResponse } from "next/server";

export default async function middleware(request) {
  const response = NextResponse.next();

  const time = Date.now();
  const timeStr = new Date(time).toLocaleDateString();

  const logData = {
    time: timeStr,
    url: request.url,
    ip: request.ip,
    ua: request.ua,
    geo: request.geo,
  };

  console.log(logData);

  return response;
}
</code></pre>
<p>This will get information from the request and format it to the <code>logData</code> object and for now, just log it to the console. To test it, start your server with <code>yarn dev</code>, open <code>localhost:3000/api/hello</code> in the browser and check out your terminal, you should see the request information logged to the terminal.</p>
<p><img src="./images/terminal-request-info.png" alt="Terminal showing the logged request info"></p>
<p>Now our middleware is getting information from the request and storing it to the <code>logData</code> object. Only thing left to do is to save that <code>logData</code> object to Redis!</p>
<h2>Save data to Redis</h2>
<p>We will use Upstash Redis for handling the Redis database. Upstash offers a REST api for interacting with the Redis database. This is great because we need to interact with the Redis database inside our middleware. Middleware is run as edge function once we deploy it and having to use some Redis client connection inside the edge function would be prone to bugs compared to just making a REST api request once we want to save data to the database.</p>
<p>First create a new folder called <code>lib</code> to the root of your project and <code>redis.js</code> file inside that folder.</p>
<p>Next navigate to <a href="https://console.upstash.com/">console.upstash.com</a> and sign up or log in to your Upstash account. Once you are logged in, go to the Redis tab and create a new database.</p>
<p><img src="./images/upstash-dashboard.png" alt="Upstash dashboard"></p>
<p><img src="./images/upstash-create-db.png" alt="Create new Redis database"></p>
<p>Once you have created the database, go to the Details tab of your database and you should see "REST API" section.</p>
<p><img src="./images/upstash-rest-api-1.png" alt="Redis REST api"></p>
<p>In the section click "@upstash/redis" tab and you should see a Javascript code snippet.</p>
<p><img src="./images/upstash-rest-api-2.png" alt="Redis REST api connection information"></p>
<p>This code snippet uses <code>@upstash/redis</code> npm package to initialise a Redis REST client that interacts with the REST api. Copy the code and paste it in to your <code>lib/redis.js</code> file and add an export statement to the end of the file. Your <code>lib/redis.js</code> file should look like this (excluding the values of url and token).</p>
<pre><code class="language-jsx">import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: "https://eu2-talented-chimp-30122.upstash.io",
  token:
    "UJKJACQgMjJlMmRmMDItYzNjNi11N2Y1LTgxMWQtNmNlZjkyMjg3NmJjNjRhNWY5N2JjYTUwNDQ4NDk1YmI3NDAyOGZhYzQwMzY=",
});

export { redis };
</code></pre>
<p>Next import the Redis REST client we just made, to the <code>_middleware.js</code> file.</p>
<pre><code class="language-jsx">// ...
import { redis } from "../../lib/redis";
// ...
</code></pre>
<p>To save our <code>logData</code> to Redis using the Redis REST client, add the following code after the <code>logData</code> definition.</p>
<pre><code class="language-jsx">// ...
redis.lpush("api-request-log", logData);
// ...
</code></pre>
<p>This will push the <code>logData</code> object to a list called "api-request-log" using the REST api of Upstash Redis. Your <code>_middleware.js</code> should look the following.</p>
<pre><code class="language-jsx">import { NextResponse } from "next/server";
import { redis } from "../../lib/redis";

export default async function middleware(request) {
  const response = NextResponse.next();

  const time = Date.now();
  const timeStr = new Date(time).toLocaleDateString();

  const logData = {
    time: timeStr,
    url: request.url,
    ip: request.ip,
    ua: request.ua,
    geo: request.geo,
  };

  redis.lpush("api-request-log", logData);

  return response;
}
</code></pre>
<p>Now we have a middleware that saves data to Upstash Redis.</p>
<h2>Fetch data from Redis</h2>
<p>We are now saving every request made to <code>/api*</code> to Redis database but how can we get the saved data from the database and display it?</p>
<p>Let's first create a new page that will be used for displaying the json data from the Redis database. Create a new page <code>pages/view-log.js</code> and add the following code to it.</p>
<pre><code class="language-jsx">import { redis } from "../lib/redis";

export default function ViewLog(props) {
  return (
    &#x3C;div>
      &#x3C;h1>Api request log&#x3C;/h1>
      {props.entries.map((entry) => {
        return (
          &#x3C;div>
            &#x3C;pre>{JSON.stringify(entry, null, 2)}&#x3C;/pre>
          &#x3C;/div>
        );
      })}
    &#x3C;/div>
  );
}

export async function getServerSideProps(context) {
  const entries = await redis.lrange("api-request-log", 0, -1);
  return {
    props: { entries },
  };
}
</code></pre>
<p>On the first line we import the Redis REST client we made in the previous step. Earlier we used it to save data through the REST api but it can also be used for fetching data from the database.</p>
<p>Then we have the <code>ViewLog</code> component which will loop through <code>props.entries</code> and display them. The <code>props.entries</code> are set in the <code>getServerSideProps</code> function.</p>
<p>In the <code>getServerSideProps</code> function we use <code>redis.lrange("api-request-log", 0, -1)</code> to load the data from the Upstash Redis database. First parameter is the list name we want to fetch, second parameter is the starting position and third parameter is the end position. By using -1 for the end position we tell the function that we want to fetch all of the items in the list.</p>
<p>Now when you navigate to <code>localhost:3000/view-log</code> you should see all the log requests that are saved to Upstash Redis.</p>
<h2>Conclusion</h2>
<p>Building this kind of request logger middleware with Next.js middleware doesn't actually require that much effort. When we place the logger code to the <code>api/_middleware.js</code> we automatically have logging for all api route requests thanks to how Next.js middleware works.</p>
<p>Using Redis inside Next.js middleware and edge functions was also easier than I first thought. Thanks to Upstash we were able to easily spin up a Redis database and connect to it via REST api. Saving and loading data to &#x26; from the database was easy and straightforward.</p>
<p>You can find the repo for this article here: <a href="https://github.com/tumetus/nextjs-request-logger">https://github.com/tumetus/nextjs-request-logger</a>.</p>
<p>If you enjoyed this article be sure to subscribe to my <a href="https://www.tuomokankaanpaa.com/newsletter">newsletter</a> and <a href="https://www.youtube.com/tuomokankaanpaa">Youtube channel</a>!</p>



In this article we will learn how to save and fetch data from Redis inside of a Next.js middleware & edge functions. We will do this by building a request logger middleware for a fresh Next.js application. You can add this middleware also to your existing application. The middleware will save request data to Redis for each request made to the api routes. We will use [Upstash](https://www.upstash.com) Redis for handling setting up and maintaining the Redis database. Let's get started!

If you rather watch a video, I also made a video about this on my [Youtube channel](https://www.youtube.com/tuomokankaanpaa)!
[
![Watch on Youtube](/blog-posts/nextjs-middleware-save-data-to-redis/images/cover-yt.png)
](https://www.youtube.com/watch?v=hY2BGM7AnmY)

## Create the middleware

First initialise a new Next.js project.

```
yarn create next-app nextjs-request-logger
```

Navigate to the `/pages/api` folder and create a new file called `_middleware.js`.

```
touch pages/api/_middleware.js
```

It is important that you name the file exactly as described above because this is how Next.js knows that this file will act as a middleware. Code inside middleware will be run on each request that is made to any route inside this folder (/api) or any of its subfolders / subroutes.

Next add the following code to the `_middleware.js`

```jsx
import { NextResponse } from "next/server";

export default async function middleware(request) {
  const response = NextResponse.next();

  const time = Date.now();
  const timeStr = new Date(time).toLocaleDateString();

  const logData = {
    time: timeStr,
    url: request.url,
    ip: request.ip,
    ua: request.ua,
    geo: request.geo,
  };

  console.log(logData);

  return response;
}
```

This will get information from the request and format it to the `logData` object and for now, just log it to the console. To test it, start your server with `yarn dev`, open `localhost:3000/api/hello` in the browser and check out your terminal, you should see the request information logged to the terminal.

![Terminal showing the logged request info](/blog-posts/nextjs-middleware-save-data-to-redis/images/terminal-request-info.png)

Now our middleware is getting information from the request and storing it to the `logData` object. Only thing left to do is to save that `logData` object to Redis!

## Save data to Redis

We will use Upstash Redis for handling the Redis database. Upstash offers a REST api for interacting with the Redis database. This is great because we need to interact with the Redis database inside our middleware. Middleware is run as edge function once we deploy it and having to use some Redis client connection inside the edge function would be prone to bugs compared to just making a REST api request once we want to save data to the database.

First create a new folder called `lib` to the root of your project and `redis.js` file inside that folder.

Next navigate to [console.upstash.com](https://console.upstash.com/) and sign up or log in to your Upstash account. Once you are logged in, go to the Redis tab and create a new database.

![Upstash dashboard](/blog-posts/nextjs-middleware-save-data-to-redis/images/upstash-dashboard.png)

![Create new Redis database](/blog-posts/nextjs-middleware-save-data-to-redis/images/upstash-create-db.png)

Once you have created the database, go to the Details tab of your database and you should see "REST API" section.

![Redis REST api](/blog-posts/nextjs-middleware-save-data-to-redis/images/upstash-rest-api-1.png)

In the section click "@upstash/redis" tab and you should see a Javascript code snippet.

![Redis REST api connection information](/blog-posts/nextjs-middleware-save-data-to-redis/images/upstash-rest-api-2.png)

This code snippet uses `@upstash/redis` npm package to initialise a Redis REST client that interacts with the REST api. Copy the code and paste it in to your `lib/redis.js` file and add an export statement to the end of the file. Your `lib/redis.js` file should look like this (excluding the values of url and token).

```jsx
import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: "https://eu2-talented-chimp-30122.upstash.io",
  token:
    "UJKJACQgMjJlMmRmMDItYzNjNi11N2Y1LTgxMWQtNmNlZjkyMjg3NmJjNjRhNWY5N2JjYTUwNDQ4NDk1YmI3NDAyOGZhYzQwMzY=",
});

export { redis };
```

Next import the Redis REST client we just made, to the `_middleware.js` file.

```jsx
// ...
import { redis } from "../../lib/redis";
// ...
```

To save our `logData` to Redis using the Redis REST client, add the following code after the `logData` definition.

```jsx
// ...
redis.lpush("api-request-log", logData);
// ...
```

This will push the `logData` object to a list called "api-request-log" using the REST api of Upstash Redis. Your `_middleware.js` should look the following.

```jsx
import { NextResponse } from "next/server";
import { redis } from "../../lib/redis";

export default async function middleware(request) {
  const response = NextResponse.next();

  const time = Date.now();
  const timeStr = new Date(time).toLocaleDateString();

  const logData = {
    time: timeStr,
    url: request.url,
    ip: request.ip,
    ua: request.ua,
    geo: request.geo,
  };

  redis.lpush("api-request-log", logData);

  return response;
}
```

Now we have a middleware that saves data to Upstash Redis.

## Fetch data from Redis

We are now saving every request made to `/api*` to Redis database but how can we get the saved data from the database and display it?

Let's first create a new page that will be used for displaying the json data from the Redis database. Create a new page `pages/view-log.js` and add the following code to it.

```jsx
import { redis } from "../lib/redis";

export default function ViewLog(props) {
  return (
    <div>
      <h1>Api request log</h1>
      {props.entries.map((entry) => {
        return (
          <div>
            <pre>{JSON.stringify(entry, null, 2)}</pre>
          </div>
        );
      })}
    </div>
  );
}

export async function getServerSideProps(context) {
  const entries = await redis.lrange("api-request-log", 0, -1);
  return {
    props: { entries },
  };
}
```

On the first line we import the Redis REST client we made in the previous step. Earlier we used it to save data through the REST api but it can also be used for fetching data from the database.

Then we have the `ViewLog` component which will loop through `props.entries` and display them. The `props.entries` are set in the `getServerSideProps` function.

In the `getServerSideProps` function we use `redis.lrange("api-request-log", 0, -1)` to load the data from the Upstash Redis database. First parameter is the list name we want to fetch, second parameter is the starting position and third parameter is the end position. By using -1 for the end position we tell the function that we want to fetch all of the items in the list.

Now when you navigate to `localhost:3000/view-log` you should see all the log requests that are saved to Upstash Redis.

## Conclusion

Building this kind of request logger middleware with Next.js middleware doesn't actually require that much effort. When we place the logger code to the `api/_middleware.js` we automatically have logging for all api route requests thanks to how Next.js middleware works.

Using Redis inside Next.js middleware and edge functions was also easier than I first thought. Thanks to Upstash we were able to easily spin up a Redis database and connect to it via REST api. Saving and loading data to & from the database was easy and straightforward.

You can find the repo for this article here: [https://github.com/tumetus/nextjs-request-logger](https://github.com/tumetus/nextjs-request-logger).

If you enjoyed this article be sure to subscribe to my [newsletter](https://www.tuomokankaanpaa.com/newsletter) and [Youtube channel](https://www.youtube.com/tuomokankaanpaa)!


Learn how to save and fetch data with Next.js middleware.