startups and code
startupsandcode
ResumePodcastBlog

Starting on NextJS

Back to home
PreviousNext

I have played with a lot of different static site generators, and I say a lot, but actually like 5. There are hundreds out there, and as soon as a new one comes out, someone makes their own version of it.

I have settled on learning NextJS.

NextJS handles both SSR and SSG. Isn't it annoying when people use acronyms in a post and assume you know what they are talking about. SSR = Server-Side-Rendering, SSG = Static-Site-Generation.

There are plenty of explanations of the differences and when to use them. Here is one

The main reason I am shifting over to SSG is because it is fast. I don't have a massive CMS, I don't have a lot of pictures or vidoes. I simply want to write. I like writing and I like teaching/sharing. I may get to a point where I have links to videos, but for now, this is my format.

I keep it simple because it delivers content.

So why NextJS?

  • It is popular with successful companies: Hulu, Netflix, Twitch, Washington Post, to name a few.
  • It supports SSG AND SSR, so if I want more functionality as I play, I can.
  • It is FAST, crazy fast. I like that
  • Run lighthouse on my site and everything is over 95% (Best Practices, Performance, Accessibility, etc...) Note: Lighthouse is a chrome dev tool to test your site
  • It makes SEO dead simple
  • It makes writing new posts, similar to writing code
  • I migrated an entire blog from WordPress to it in less than an hour (and that includes, DNS, Hosting, Deployment, Git, and content migration)

I don't have many more reasons than that.

I am a newbie on NextJS and learning more and more.

Some intial tips after going through the tutorial.

  • Create your own _document.js file. It is the only way you can get over 90% on accessibility (lang="en")
  • Start with npm run dev
  • Play with npm run export
  • client side navigation with the link command will cause problems because the page is missing the .html when it is staticlly generated. (Any tips welcome on this)

What I did was add the .html to the 'as' in the Link control like this:

<Link href="/posts/[id]" as={`/posts/${id}.html`}>
    {title}
</Link>

the problem with this is that it breaks when I run it locally with npm run dev

Anyway, that's all I got for today.

Update

I am hosting on firebase and to fix the html issue you need to add:

"cleanUrls": true

To your firebase config. TADA!

PreviousNext