Migrated to Next.js v10 away from GatsbyJS v1 #29
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The renaming and relocation of these files and folders is to facilitate a migration from GatsbyJS to Next.js v10. Renamed all blog post folders. Removed the "YYYY-MM-DD---" prefix. This prefix was a legacy naming scheme from Gatsby v0 beta from 3 years ago. As I recall it was required for Gatsby to know what files should be considered Markdown blog posts. There is now no longer any need for this and in order to retain the same URL structure the folders will need to be renamed as they have.
For about 3 years I used Gatsby as a static site generator for jonrh.is. I started using the v0 beta and then migrated to v1 later on. Gatsby dependencies were unstable to the point that in 2020 I could no longer make changes. I have used Next.js v9 in two smaller projects and the developer experience was significantly better. Especially when used in combination with Vercel. Deleted Rollbar error tracking for now. I may add it back later. Deleted html.js. layout/index.js and _app.js now serves that purpose. Deleted blog-post.js file that served as a blog post template. In future commits I will either convert all markdown files into React JavaScript files or use MDX. Modified the Font Awsome minified font slightly. Changed the URL of the fonts that it loads. Before the URLs were assuming the font files were located relative to the CSS file in a sibling /fonts folder. However for now they have been relocated to the public/fonts/ folder so the URL path is now absolute. A bit of a dirty hack but I'm okay with it for now. I hope to move away from Font Awesome in the future and use something lighter. Moved the required contents of typography.js (sets the font sizes, etc) into layout/index.js. I would like to move away from this dependency later on but for now I am focused on porting the site from GatsbyJS to Next.js with ideally no visual changes. Files deleted that were only relevant for GatsbyJS: + .babelr + gatsby-config.js + gatsby-node.js Greatly simplified package.json. Removed all dependencies that were no longer required. Most of them were Gatsby plugins or utility libraries required to work with Gatsby. about.js / blog.js / dashboard-consulting.js / index.js / portfolio.js. Refactored to use new Layout. Removed React prop types because most of them were very vague anyway (just telling an input is an object). Removed GraphQL query strings that were used by GatsbyJS. New file: pages/_app.js. This is the root file of a Next.js v10 app (see docs). This is sort of the equivalent to the html.js file that Gatsby v1 used (no longer used in v2 if I remember correctly).
This CircleCI config file was used to deploy the website to AWS. Static files were stored in S3 and then globally distributed with CloudFront. I will be using Vercel hosting now that I have Next.js. I have used it in a few projects before and it's a terrific combination. As far as I know, Vercel actually used S3 and CloudFront under the hood but now I do not have to worry about it.
Followed the setup instructions by mdxjs.com: https://mdxjs.com/getting-started/next With MDX it will become a lot less work to convert the site to Next.js because all the blog posts are written in Markdown. With MDX I can also intermix React components which is really nice.
Post.js is a template file/component for each and every blogpost. Originally designed to be used by MDX files. To show images I use the newly introduced next/image component. I think it works similarly to the resharp image component of Gatsby. It creates an <img> tag with a sourceset of the images in various sizes. What is new with this component is that width and height has to be defined. I just use the original dimensions of the image so the aspect ratio stays the same. The style layout already makes sure that images don't go out of bounds for large source images. The next/image component expects images to be located in the public/ folder. I couldn't get it to work otherwise. Therefore all blog post images have been relocated to public/images/name-of-blogpost-folder/. Deleted the markdown front matter of ever post as it is no longer relevant. Converted it to <Post title="Blog post title" date="October 28, 2020" /> instead.
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/jonrh/jonrh-is/bgxvc0inq |
This was referenced Oct 28, 2020
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.