Day 129 - Migrating From GatsbyJS To NextJS [1]

Last time I did some makeover of all the files and folders of the GatsbyJS blog in accordance for it to work with the NextJS and changed code and so on and now I will be explaining a little more of what I did and why I did it.

NextJS Pages

In the last post I moved the pages folder to root dir from the src dir and after that also moved the js files templates dir to pages as well. Why i did this is because NextJS will render all the single files in the pages folder inside the root dir as a page in the browser. What this means that if there is a file named contact.js in the pages dir it will be a page in the browser with the path of /contact/.

index.js => /
contact.js => /contact/
about.js => /about/

Any dir inside the pages dir with an another .js file inside it will also be a page with path simillar to the one that is inside the pages dir.

/pages/blog/day01.js => /blog/page01

Blog Pages With Markdown

This part was most trouble for me as I had to make some changes in the current files and also changes in all the markdown files to render the pages differently for all the posts. Currently the markdown files are in the /content/blog directory and I will be using this way of fetching all markdown files that they use in the blog-starter example they did with NextJS.

First i tried to fetch as is from the contect/blog dir changing the postsDir variable in the api file but somehow it was not working for me and also i had to deal with the images that I used in the markdown files that were in the same folder as the markdown file.

So what I did was that moved all the markdown files in the _posts folder and changed the current gray-matter that was like this:

---
title: Day 01
date: "2021-01-01"
tags:
  - Tag01
  - Tag02
---

To something like this:

---
title: Day 01
date: "2021-01-01"
cover: /assets/images/day01/cover.jpg
tags:
  - Tag01
  - Tag02
---

With this all had to do was to move files here and there instead of rewriting all the code that i copied from NextJS/examples/blog-starter/lib/api.js and also moved all the image files from their markdown folders to the public folder that NextJS uses for static files with Day with number as the parent folder to them.

Now after all this my root dir looks like this.

zainscizainsci