How I Nearly Quit Next.js

Today I will expand on My Top 5 Biggest Mistakes in hopes of saving you from stepping into puddles filled with countless hours of unnecessary debugging.

These mistakes collectively resulted in hundreds of wasted hours, which nearly made me Quit Next.js.

Without further ado… Lets dive right in.

1. Not Understanding Client-Side And Server-Side Rendering

Having a solid understanding of the nuances between client-side and server-side rendering is paramount for a successful Next.js app.

Broadly speaking…

• Client-Side Rendering is rendering content on the user’s machine.
• Server-Side Rendering is rendering static content, then serving this to the client.

Not understanding this difference can be problematic when fetching a session on the client and then conditionally rendering a sign-in or log-out button for example.

Wrong ❌

Correct ✅

2. Not Adopting a “Mobile-First” Approach To UI Design

I wasn’t aware of “mobile-first” or “responsive design” before diving in with Next.js.

For example, I coded a navbar that looks nice on desktop, but looks horrendous on mobile.

This is because I didn’t use breakpoints such as sm, md, lg for my styles.

As a result, I had to refactor a tremendous amount of code, which wasted approximately 10 Hours.

TL;DR: Mobile-First UI using breakpoints.

3. Not Using A Starter Template

I wish I had a starter template when starting out with Next.js.

The default Next.js template isn’t bad, however it…

• contains too much boilerplate
• doesn’t generate an organized folder structure
• doesn’t contain useful packages included in 99% of modern Next.js apps.

As a result, I came up with this template to help others progress faster.

This template is a by-product of countless hours spent using Next.js.

4. Not Including Metadata

If you want your Next.js apps to rise to the top of Google Search, Metadata is mandatory.

I treated the concept of Metadata as “additional information” that isn’t of particular value, however that couldn’t be further away from the truth.

You must master ideas such as open graph, sitemaps, robots, keywords and integrate these within your Next.js apps.

Luckily, I made a three-part series going through this:

• Part 1
• Part 2
• Part 3

5. Excessive CSS Usage

I was irresponsible as a beginner with Next.js; I never thought about performance impact as I was being superfluous with CSS.

Below are the two main ways to monitor and mitigate excessive CSS usage:

1. Reading build logs for your Next.js app:

2. Using @next/bundle-analyzer to visualize project file sizes:

Conclusion

Those were my Top 5 Next.js Mistakes; I hope you learnt a lot from this, especially if you are starting out learning Next.js.

If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐