John Mann

    John Mann

    Starting on NextJS


    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`}>
        <a>{title}</a>
    </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