Bye Gatsby (Episode 1)

4 min readMar 3, 2021

Greetings Everybody,

This is the first episode of my story about “How I contributed to switching Telescope’s Front-End from Gatsby to Next.js”. During this week, I will be posting 2 more parts of this story — for each week I was contributing to the switch.

On the 12th of February 2021,

David filed Issue #1733 named “Switch front-end to next.js”, where he posted a list of all the changes and fixes that needed to be done to be ready for the switch. By that time, a significant portion of Next.js Front-End has already been done, so we needed to finalize the work our team was doing. And so we started working.

This was my first experience working with both Gatsby and Next, so I needed to read some documentation first. Nextjs.org was very useful to quickly understand the basic concepts.

The issue that I took was actually a PR from one of the previous students, who was working on Porting Desktop and Mobile headers from Gatsby to Next. Initially, in the Gatsby version, we had three files responsible for the Header: index.js, DesktopHeader.jsand MobileHeader.js. The logic behind those components was that index.js was imported by the page who wanted to render it, and index.js will take a look at the width of the display and decide if DesktopHeader.js or MobileHeader.js should be returned — and would return the preferred header.

The student who was working on this issue before me, however, when porting headers to Next.js, decided to move all of those files into one Header.js file. But the code that they published was not ready to be merged, as a couple of changes have been required.

“Easy fix” - I thought.

Well, It was too early to make judgements.

Changes that needed to be done:

Remove public/logo.svg as it was already moved to be rendered in another component,
Remove menu.svg and pull it from Material UI,
Remove the styles/Header.module.css and make it a Material UI MakeStyles function,
Turn Header.js into Header.tsx (Rewrite JavaScript to TypeScript),
Add Copyright© {new Date().getFullYear()} to Header Footer (in Mobile Header, we have a Footer, that displays the copyright and current year. (This Dandy expression above was provided to you by Chris),
Move Header from pages/index.tsx to pages/_app.tsx.

Well, this did not take me too long to do, so I posted my changes and focused on other homework.

… But little did I know, because the PR I was making changes to was pretty old, I accidentally pushed not only my changes but all of the changes that my colleagues pushed to the Master branch during the time my PR was idle.

So, this PR was ruined and I needed some help.

Big-hearted Anton Biriukov volunteered to help me with the GitHub issue, so we went on a call, and then almost the entire team was on the call. (Felt like a very popular Twitch Streamer, not gonna lie).

We first wanted to just Cherry-Pick my commits out of this nightmare and create a new PR, but then David came in.

“This is going to take more time to fix this mess than to rewrite it completely” — The Father of Telescope.

After that, we just abandoned the old PR and my changes to it and rewrote the whole thing from scratch. Copy-n-Paste all three Gatsby files, import Link from ‘next/link’;, change the extension to .tsx, fix a couple of styling and code errors — and we are done.

My new PR landed, got reviewed, merged … and caused a couple of new bugs the be fixed. For example, the Login component suddenly realized that he is Special, and started a riot by not following the styling of the Header. How did I suppress the Riot? Well, I will tell you about it in my next blogpost ;)

As Always,

Stay healthy, wear a mask, wash your hands, and have a great day!

Telescope Page: https://telescope.cdot.systems/
Telescope GitHub — We welcome all contributors! — https://github.com/Seneca-CDOT/telescope
My GitHub: https://github.com/izhuravlev
David: https://github.com/humphd
Anton: https://github.com/birtony