Next UI: Using IsBrowser

While improving the UI of this website using component libraries, I initially aimed to use something other than Material UI to broaden my knowledge and step out of my comfort zone. Material UI has been my go-to for coding with NextJS, but this time, I wanted to explore something new. Next UI caught my attention immediately; its name indicated that it was tailored for NextJS, ensuring better support for the framework.

The components were stunning and perfectly aligned with what I needed for my portfolio. I particularly focused on changing the presentation of the cards for the Blog page. Next UI's cards were simple yet beautiful, suiting my requirements. They allowed me to include a small button in each card for redirecting to the blog post, while the card's image displayed text like the date and title. Here are examples from Next UI's Cards documentation.

I utilized their Dropdown component for my hamburger icon in the mobile view, as I didn't prefer the typical side menu sliding from the right. A simple dropdown sufficed, considering I only had four options (Home, Work & Education, Projects, and Blog) on my page.

My portfolio looked significantly better with these changes, and I even loved it. I made up my mind to use NextUI in my future projects. However, I encountered a warning while attempting to save my local changes along the way.

I was curious as to what was causing the warning message. Luckily, I found a Github issue. Looks like I'm not the only one facing the problem.

The fix in the same discussion worked for me too. It was to add isBrowser in _app.js. Perfect. Now I won't be seeing the error anymore.

export default function App({ Component, pageProps }) {
  const { isBrowser } = useSSR()
  return(
    isBrowser && (
        // your app.js content here
    )
  )
}

Over the next few days, I tested my website by sharing the link in a chat box. Normally, the site's image would appear alongside the link, just like when you send a link through Facebook Messenger. However, in my case, only the link was displayed, and the website image was missing. I was convinced that everything was set up correctly, and upon investigating my meta tags, I found no changes. I suspected that the isBrowser I added recently might be causing this issue.

After conducting some research, I discovered that the above code was disabling server-side rendering, which in turn affected the proper loading of meta tags. This could lead to SEO issues as well. Although the fix made the warning message disappear, it was only a temporary workaround, as mentioned in the Github issue above. I decided to explore another alternative and update my components once there is a concrete fix that won't impact other features on my website.

SEO is of utmost importance these days, as it ensures that websites quickly appear in search results after hitting Enter in the search bar. To further optimize your website's visibility, consider using Google Search Console. This tool helps index your website, checking various aspects such as mobile responsiveness, URL issues, traffic, and tracking performance. By leveraging it, you can enhance your website's presence and ensure it performs well in search rankings.

I might not have been able to fully use NextUI but at least I learned more things along the way! I am grateful for that.

'til the next blog post! see ya!

Photo by Mediamodifier on Unsplash