I started this blog at the start of this year and when i started this I thought of building this blog with a JS framework and for that i deceided react and also becasue it was so much to easy to work with comparing to other frameworks. Then I decided to build this using GatsbyJS because I wanted this to be SEO friendly and CRA was not providing anything like that and I was not sure about the NextJS.
So I built this site with GatsbyJS and after 100 days or before that I started working with NextJS. I decided to learn NextJS to built a website for someone I knew and it was also much easier to work with than GatsbyJS. By easy I mean that in GatsbyJS you have to install plugins and do configurations etc to add extra functionality and so.
It is same in NextJS, that is to add some extra functionality or using third-party packages in the codebase. But comparing to GatsbyJS it is much easier in my opinion.
Then later last month I built my Personal Website with NextJS with a new design and a Dark Theme Feature. So I decided to rebuilt this blog with NextJS and change styling and add a Dark Mode to it too. But how am I going to do it.
Removing GatsbyJS Related Files
To start with I created a new git branch with name next and removed all gatsby-*.js files.
zainsci@zainsci-PC /d/zainsci-blog (next)
$ git checkout -b next
Switched to new branch "next"
zainsci@zainsci-PC /d/zainsci-blog (next)
$ ls
content gatsby-config.js LICENSE package.json
README.md static yarn.lock gatsby-browser.js
gatsby-node.js node_modules package-lock.json
src styles
Then i removed all the gatsby related packages from the package.json file and after that installed next with npm along with other packages like remark and remakr-html as I will be needing these when converting markdown files to html.
zainsci@zainsci-PC /d/zainsci-blog (next)
$ npm install next remark remark-html
Gatsby keeps all the files js and other source code files in the src dir while NextJS in the root dir. Currently my src folder looks like this.
zainsci@zainsci-PC /d/zainsci-blog (next)
$ ls src
component css pages templates
components include react components like navbar and footer etc, pages include pages like 404.js and index.js and so and templates include template for blog post page and css. pages and templates are created by the GatsbyCLI.
I moved the components, pages and templates dir to the root dir, moved the templates folder files to pages folder as they will be usefull there and removed the src folder along with the css as I will be rewriting all the css for the blog.
Static Files
Gatsby keeps all the static files in the static folder by default and Next keeps static files in the public folder by default so I renamed the static to public and before that removed the public dir that GatsbyCLI creates as a result of rendering static pages.
Here came a problem for me that I will be discussing in the next post. As in the list above of all the files and folders in the root dir there is a content dir that is used to keep all the markdown files for the blog in a folder called blog and other assets like images and such in dir assets. It is like another static folder for the blog.
Removing Gatsby Related Code
After moving and deleting all necessary files I added scripts for the NextJS in package.json file and started the dev server. The server one by one helped me in removing all the unnecessary code and at the end I was left with an empty page in the browser at localhost:3000. And I will explain the remaining in the next or next next post.
zainsci