Just as developers will always face bugs while developing, I've run into my fair share of them while revamping my portfolio website today.  

Some time ago, I encountered a problem with the ```dhive ``` library with the Next.js framework.  It caused my application to crash on production while it worked fine on development. 

I checked the library’s GitLab to notice there has been an issue already partnering to why my app crashed. But I still commented on it. Unfortunately, for weeks, I didn’t get any reply. 

luckily for me, I found another library to proceed with my development. To fix the known issues, I replaced the dhive with the hivejs library. At first, everything worked fine.

One of the first things I did was move the code base from being a component to being a page/route in my Next.js environment. This change allowed me to access my blog with the /blog route, making it easier for users to find and read my hive posts.

 However, when I started to  revamp my portfolio by creating a blog page/route, I ran into another issue.

---

#### The undefined Error 

---

The hivejs library was returning undefined each time I tried to assign a variable and tried to fetch posts with the getdiscussionbyblog logic. This was a frustrating setback, as  I wasn't sure how to proceed. The only solution that I could think of was to instantly set the data fetched inside a usestate hook. I tried it and it worked fine. I never knew I was going to face another issue. 

I tried to run my app on production then I noticed that it’s not possible to use a hook on the page section of nextjs. This is because the route part of nextjs runs on the server before the app is rendered to the client. 

Just when I was about to give up and try a different approach, I received a reply to the issue I had commented on weeks earlier. @therealwolf had referred me to another library, which I quickly installed and tested.

To my relief, everything worked perfectly with this new library. It was a much-needed solution to a problem that had been causing me a lot of frustration.😀

I removed all the hooks from the blog route, then assigned a variable to the getdiscussion logic from the new library. All of these were done using getServerSideProps. 

```
export async function getServerSideProps() {
  const client = new Client()
  // Fetch data from external API
  const posts = await client.database.getDiscussions('blog', { tag: 'rufans', limit: 10 })
  // Pass data to the client-side
  return {
    props: {
      posts,
    },
  }
}

```

---

#### What changed?

---

<center> ![mobile (2)fin.png](https://images.hive.blog/DQmVAtVx8n1NdZzQtHxUSRSQhJ4mjW2LZYdmcTuYUY7icbi/mobile%20(2)fin.png)
</center>
I  changed the display of my blog from a swipperjs to a list display. This not only made the blog look more organized and easier to read, but it also made it easier for users to navigate through the different posts since I increase the number of posts to be fetched on a request. 

I also increased the number of posts that were fetched from 3 to 10. I did this by using the following code:

```
const posts = await client.database.getDiscussions('blog', { tag: 'rufans', limit: 10 })

```

In conclusion, this experience reminded me of how important it is to stay up-to-date with new tools and technologies and be open to trying different approaches when faced with challenges.