Hello World: Starting a Blog, Next.JS, and AWS Amplify

Welcome to my blog, my friends, DEVs, and randos from the interwebs! This is my first post, and I'm excited to share, well... whatever this is with you. I've decided to start this blog as a way to improve my skills in Next.js and Amazon Web Services (AWS). These technologies are not only powerful but also offer exciting opportunities for future projects and career growth. To be quite honest, it has been such a learning experience, and I've had a great time building it. I've also just been looking for a place to try out some different things. After my failed attempt to be a video game YouTuber. I figured blogging might be fun, and maybe not so embarrassing... but it will probably turn out to be as embarrassing. Hopefully you enjoy this journey with me as much as I enjoyed building it.

Why Next.js and AWS Amplify?

I chose Next.js for its honestly bad ass features and flexibility, especially when it comes to server-side rendering and static site generation. I've messed around with Next.js a bit, but this gives me an excuse to dive deeper into it. AWS Amplify, on the other hand, makes hosting and managing this site surprisingly easy. One of the coolest features is the seamless integration with GitHub. Every time I update my repository, the changes are automatically deployed to my site! Coming from PHP and Apache servers at my job, this is seriously a breath of fresh air. Because of this, I'm currently using JSON file to render all of this information to you. The goal is to ultimately add a database, but in due time.

Dynamic Routing and Other Issues

Warning: DEV jargon ahead

One of the significant hurdles was figuring out dynamic routing. Initially, I tried using query strings in the URL to render this very blog page. This method worked fine with Vercel hosting, but I encountered issues when switching to AWS. After some trial and error, I managed to implement dynamic routing, and everything started coming together. I love how clean the URL looks now. Just look at it: https://latestartdev.com/posts/hello-world. Compared to query strings, you wouldn't even know this URL is dynamic!

Another challenge was dynamically rendering metadata for each blog post. Ensuring that each page had the correct metadata for SEO purposes was tricky but essential. Using the Link tag that Next.js provides out of the box passes parameters so easily. I created a dynamic page and was able to create dynamic URLs using template literals in the `src` part of the Link tag. I'm getting into the weeds here, so I'll probably dedicate a whole post to this topic.

I also found the Next.js Image tag to be a bit confusing... even still. It's a powerful tool for optimizing images, but getting the configuration right took some time and experimentation. I am using an out-of-date method called 'layout'. When I use layout="responsive", the image just works. Out of frustration, I have decided to just use this method. Why Next.js?? Why are you taking away this great feature!

What’s Next... js?

Looking ahead, my next step is to connect the blog to a database. I'm planning to use Amazon DynamoDB to keep everything within the AWS ecosystem. This will allow me to manage and serve blog posts more efficiently.

Through this blog, I’ll be sharing my learnings as a developer, and tips and tricks I pick up along the way, and whatever else I feel like. Whether you're just starting your journey in the tech world or you're changing your career, or whatever, I hope my experiences can provide some value. Starting something new can be daunting, but when things start to come together, there's no better feeling. I'm looking forward to exploring creative ways to create posts and sharing my progress.

You still there? Didn’t think so…. You were never there anyways…. Stay tuned for more updates!