Next.js Static Site Generation (SSG) Tutorial & dynamic pages for a blog

Trying to get a habndle on static sites, I’ve started a Gatsby & Hugo blog sites and now a barebones from the ground up using Next.js. This is a good tutorial to learn about dynamic pages and a static site so I’m going to focus on coding this, then head back to the Hugo site i’ve been building. I’m following the tutorial below, not using the Github code that’s posted as part of the tutorial. Next docs getting started here.

Project- Build simple blog site and create static code from .md files

npx create-next-app next-blog-max (this last is the folder its creating it in)

I’m following along with the code & have made a couple of blog files using lowercase and dashes in text to ensure no whitespace in filenames as these are to be used as the pages and have the .md file extension stripped from them.

In the end, to speed up the process (I was dawdling) I decided to copy the codeacross into my site, also I restructured my directories to match the tutorial. The posts were located in a posts directory at the same level as pages, a bit confusing. Also I had to load a couple of more packages in.

Once setup I used the >yarn dev to get localhost:3000 server I could run it to see if it was working : And it was, the links worked:

The url for the link works fine on the generated links. There is something going on in the background because we haven’t done the build yet BUT the markdown is being rendered in html:

It is the dev environment, and that is OK, very useful.

Build & deploy

As the blog is linking fine, we are using the dynamic [slug].js file to create links to all the posts (actually, thinking about that, how do you order them by date? They are ordered alphabetically in the directory, so programmatically you have to have a date in the header and look at doing somethin g with that). Anyway to start:

>yarn build then >yarn export ( we had to add to the package.json file for scripts another “export”: “next export” for that to happen.

After running both those commands (on build no new directories created) we get a new directory called out/ at the top level of the directory. This is where the Static Site Generation (SSG) files go. There is a top level index.html and a lot of .js files all around the place, as well as a few .html files for the blog posts.

So, at thios point, we have taken the .md files and converted them into .html files. So “I tink” , “aha, we click on index.html , dat’ll open in the browser and we can link to the other static pages, Tralaa!!!!“

No, that doesn’t happen, AT ALL. And the reason I know this?

I deployed the out/ directory to a seperate Github repository and tried to do a github pages to it, I connected to the index.html file but following the links to …./blog/blog-test-2 didn’t work at all. I also tried using VS Code live server, same results.

If I used the >yarn dev and ran http://localhost:3000/blog/blog-test-2, then I could get to the posts, so what is happening?

I think this is a NEXT.JS server, so works in a different way than say node.js server (different build and functions).

So I tried using Ziet (English translation of German :Time) which is renamed Vercel. There is a free tier where you can host your code and it pulls the code from your github (and other git repositories) account. So a bit like Netlify in that , I think, it rebuillds/deploys your app on commits, or maybe you have to go into the account and refresh it? I haven’t tried that yet.

So I laded the whole project on that, chose the backend I was using (Next.js) and also a few initiation commands and directories for builds etc then ran it, it built & exported the ‘blog” and gave a URL that could be used: https://next-blog-max.now.sh/

That works, I tried on mobile and that worked too. So there is a server running on the backend of this too. All the linkswork.

So what is happening, I though this was a static site?

Well, to me , it ain’t. Its just got pre-built parts , the staric content is there, and that is built into HTML so its ready to go, but the JavaScript for dynamic content is still being generated from a backend, so its still full stack in its way.

Again JAM stack, infers that the API is a btter option than a database, but some API’s are databases (see last project with REST API) , so I find that confusing. So what I’m seeing is templating, structured pages and static content are prebuilt and then some dynamic stuff is fetched from API (or DB) and thenm put in pages too.

For this to happen you do need a back end. The issue is 1/ adding new pages and having to make templates for those new pages and deploying them, or rebuilding the whole website on updates. I’ll need to drill into that to figure out how that works.

End comment

I’m glad I’ve done tihs exercise because I tohught I was creating a static site, but that is not the case, it still needs a backend server to run it, but being partially built makes it faster than building as its called from scratch (eg Worrdpress). I’ll need to think about this a bit more.

Update 27th May – Adding Blogs on Github for re-builds on Vercel

I’ve just finished the post on Hugo and have been thinking about static sites and updating them. For the Hugo static site I’d need to write post on PC in markdown, rebuild and deploy, upload to github.

With Next, because there is the server in the background you can just create a new file on github, copy/paste the content and it will automatically rebuild and redeploy, so thats easier for blog updating a dynamic site. If you have a few, you could do on PC in Code and git push to repo.

If you have a draft tag in the meta you could always have a few blanks and then just change to false.

Also you get an email to your sign in saying there has been an update and gives you links to check.