Lessons Learned from Building this .mdx Powered Next.js app

This blog was created using Next.js, React, TypeScript and .MDX and deploys via AWS Amplify. When I originally was learning how to use Next.js, I followed the documentation for creating a blog. See Create a Next.js App

However, I quickly encountered some limitations. The default documentation, when followed exactly, guides you toward deploying via Vercel. While I've heard great things about Vercel, I wanted to use AWS, which I'm more familiar with. My goal was to take full advantage of the tools and services available within the AWS ecosystem. So, I opted to deploy the blog using AWS Amplify, and the process was incredibly smooth.

With Amplify, I was able to easily register a custom domain, configure DNS settings with Route 53, and add SSL protection. Amplify's intuitive wizard, which includes a template specifically for deploying Next.js sites, made the entire setup effortless. The experience was seamless, and I didn’t face the kind of hurdles I've encountered in the past.

Now, whenever I push updates to GitHub, Amplify automatically detects changes in the master branch and triggers a deployment, streamlining my workflow.

Second, I hit a limitation when trying to add a video from youtube. I wanted to create a customized youtube react component, but you cannot use components with regular markdown. I researched more and found .MDX -- Markdown with JSX.
This allows me to include custom React components right in my posts. I could write posts in traditional markdown, create whatever react component I needed, and inject it in the post. Plus, reusability -- I can create a react component and add it to multiple posts, without duplicating code.

A post might look something like this:

---
title: 'My First Post'
date: '2023-10-23'
tags:
  - react
  - AWS
  - es6
excerpt: A snappy excerpt here
---
# Welcome to My Blog

This is an example post using MDX and Next.js!

<CustomButton>Click Me</CustomButton>

You'll notice the use of front matter for title, date and tags. This is metadata that can be extracted and rendered into components. For instance, I use the tags metadata for a tags page which displays all the posts that match that tag.

The other thing I loved was Next.js's File-Based Routing. I simply create a dynamic route with a [slug].tsx file in my pages directory and each blog post is automatically mapped to a URL based on the filename. For example, sharksWithLaserBeams.mdx will be accessed at path /sharksWithLaserBeams. I've fiddled with react router in the past but next.js feels way more intuitive and efficient. In other work related projects, we've used dynamic routes for say a details page, where the id is passed in for a product and becomes the path, like [id].tsx.

I followed Leigh Halliday's youtube video on creating a next.js blog with mdx and ssg. Check it out, its a great video to get you started on your own next.js .mdx blog and hey explains the inner-workings very well.

Stay curious, stay hungry. Questions? Comments? Corrections? I'm human all too human, email me at csdear138@gmail.com