Why I STOPPED Using Next.js And Chose Astro Instead

about six months ago I was looking to convert my site from Gatsby JS to nexjs as I'm a big fan of nexgs but after hours of honestly kind of wasted time I realized nexjs was not the best framework for me to use for my personal site so I decided to switch to Astro so I'm going to tell you all about some of the struggles I had with nexjs and some of the amazing features in Astro that make creating that type of site specifically super super easy so first off next.js is one of my favorite Frameworks I use it for a lot of demos you've probably seen it a lot on this channel and so this is not a shot at xjs this is just kind of looking at not necessarily limitations of next.js but some of the I mean maybe limitations in terms of developer experience specifically for creating a certain type of site now for my personal site I don't have a ton of full stack functionality mainly it's blog posts and it's maybe information about talks but information that I was storing inside of embedded markdown previously I was using sanity i o as a headless EMS but I wanted to move all of my content into my source code so that I could edit it right there other people could do PRS to fix things Etc and so I started going through this migration to move this from Gatsby to next.js and there were a lot of things that just became really obvious that were tough with nexjs and markdown and there may be tools that I miss or maybe better options now but here's kind of some of the things that I went through so to be able to load my data my markdown files I was having to write like custom JavaScript so you can see in here I had to use like the the file system apis and JavaScript I would have to manually map map over those grab the specific um information that I wanted by replacing the MD and the markdown file to then get the slug and then pass that in and same thing down here and and so the the problem with this is that it's a little too manual of a process like this is such a common thing for people who create blog posts that it's like why would there not be tools to take care of this for you and I'll show you kind of the equivalent in Astro in a second the other thing that was interesting is like had to get a specific new package to handle uh front matter to get the front matter out of a markdown file so if you look inside of one of these markdown files like here is all of the front matter basically just the metadata for the blog post and so to get that I had to have another package which is gray matter to be able to parse that and then use it and then from there to be able to display this so on the Dynamic route for each post I have to use react markdown another package that I have to install and then configure so if we look inside of the custom react markdown components this thing this got to be a mess this is where I had a ton of my struggles specifically doing like syntax highlighting using a theme or something like that using prism uh to do the code syntax highlighting in my code Snippets and so I had to configure this like I mean maybe it's not overwhelming but I had to configure this specific object to do certain things with the images but specifically to do certain things with the code syntax highlighting and it quickly just became a mess and the other thing that I missed that I now love in Astro and I'll kind of talk more about this a minute is kind of understanding exactly what type of content goes into front matter this is key to the Astro piece of this with something called content collection so I'll show you this in a second so anyway basically next.js is extremely powerful but to do the certain types of things that I was looking to do which was work with embedded markdown and render embedded markdown on blog posts and other pages took too much work and so what I did is I was hearing about Astro all the time and I decided to Pivot and try Astro really randomly and then within like a day or two I basically my migrated my entire site to Astro so let's look at some of the things in here one of the biggest things probably the most important thing is the idea of content collections inside of Astro so with constant collections inside of a config object you can Define here the different collections of data that I might have for markdown and MDX files so the cool thing about Astro you'll see this in a second it works directly with markdown out of the box so you could actually just create an index.md file in your Pages directory and have that be a page and not have to do anything else so it's automatically just configured to work with markdown and works really well with MDX as well with like almost no configuration so if you want to then take that to the next level and Define the different properties for the different pieces of content that you have if we look in a blog collection we have title cover image publication date description YouTube video ID and tags around all the data that's inside of a blog post which is really cool so we have this defined collection API we then export these collections so that now Astro framework knows here's the different type of collections that I have we can query based on these and we get typed intellisense and types data or data types for all of these which is really really wild so inside of a utils file that I created I'm not having to manually like query the file directory or the file system not having to work with those things I'm not having to manually query front data we can simply call a git collection function from Astro and pass it the name of the collection that we're looking for and so if we hover on this you can see that this is going to return to us a Content collection entry you're actually just going to give us an array of uh content collection entries that match the blog type that we have created so here you can see that I get intellisense based on this this is showing previews of this but I haven't tell it since now or typescript types of here's the data that I'm querying and here's where I return to the point that inside of blog the like main page here I can query these things if I hover over post you can see I get that intellisense if I were to take the first post so post of zero and then look in here I have my front matter or I have my the general data about the post and then I can go into Data not body but data and then get the metadata so this is the front matter these are all the different properties you can you can see that I use this below now another really cool underrated thing is that Astro gives you uh pagination functions that you can use as well so we have a pagination thing that we can use where we return uh calling this function and this is something that gets passed into the static path so it's going to take care of all this for us if we pass it here's all of our items and then here's the page size that we want so that way we can navigate between multiple different pages of content again something with nexjs that we'd have to build from scratch so inside of here to be able to actually show an individual blog post let's undo I'm going to not save those changes we want to display an individual blog post we have our static paths up here so we get the path and we get the content and I have a blog post layout so we pass in the front matter here and then the blog post layout takes the things that you would expect the title description date Etc it has all of that stuff it puts it into what I have as an article header component so that works really well and then it gives us a rendered component so we call our entry and we call Dot render and this just gives us the actual content for the blog post itself rendered on the screen again this is all stuff that's basically built in for us we get the extra benefit of intellisense in here by defining those content collections so let's take a look at what this looks like now keep in mind I didn't do anything really for um for code block styling that was all kind of built in for me and I just had my markdown files with the certain types of of content inside them so here's the render blog post I'm using Tailwind so they're based kind of uh article style so I've got this if I find one that has a piece of code in it or some JavaScript you can see that these are going to come in actually this one doesn't let's go back to one more so here's a couple of Snippets in here so you see we get good syntax highlighting in here that's really nice we could customize that as well but that sort of stuff comes through really well now the other thing you may have noticed is the pagination in here so if we look inside of the URL excuse me we have slash one and that's basically the page that we're looking at so if we go to the next page this is slash two and so for pagination this is really cool because inside of here we have a page um keyword for this file [Music] this is my life now okay I think we're good for now maybe anyways so inside of this uh Dynamic route path uh with the slug of page or like the file name of bracket page inside of here we get access to what page we're on so that's the slash one slash two Etc and then uh we have we call paginate and then return those posts so that's what comes into our props in here so on uh data we can grab so from the page property we can grab data and then rename that to post so we have access to all those you can see inside of here I have a custom pagination component and with that I can determine what the next and previous URL are based on the page object Astro is doing all this for us I'm just passing this in as well as the current page and then the last page and then inside of pagination I can determine whether or not to show the previous button and the next button Etc so you can see this has a pretty nice experience where I can go uh back and then or go forward and then back and back and when I get to the first page that previous button disappears because I added the logic to do that and then I just replicate that at the bottom uh so if I were to go to uh the next page and then scroll down to the bottom you'll see that that gets updated with previous as well so all in all everything that's built in here which is support for markdown support for syntax highlighting support for Content Collections and types using Zod to define those content collections so I know exactly what data I have and I'm not just working with like JavaScript anys or typescript anys uh the built-in pagination so many things are just built for this type of site now there is one clarification I want to make because it's very easy to think that Astro is strictly for static sites for static content like this but that's not true so one thing that I do have is a couple of API endpoints for my newsletter so under my uh API Pages API and the newsletter this is an API endpoint that actually generates like the majority of the content for my newsletter so it grabs recent videos from YouTube itgrab's recent content from the learner Bill teach community and it spits that out as HTML that I can just go and copy and paste into my email provider so that's one and then another one is under newsletter there's a subscribe so inside of here this is where uh form submissions for my newsletter gets submitted so if you were to come to jamesshewquick.com and you scroll all the way down to the newsletter hit sign me up this actually submits to my backend in Astro API endpoints in Astro so I can do all of these full stack capabilities which is really cool now the last thing I want to show you is if you enjoyed that if you're interested in Astro and you want to learn to build modern websites with Astro I have a course at astrocourse.dev and inside of here what we build is a very detailed supercharged markdown blog in this case what we're going to do is kind of start by building a basic blog that you would expect with pagination and SEO that sort of stuff but really take it to the next level by adding comments authentication dynamically generated or automatically generated cover images all these things using some cool Technologies Zeta Tailwind Cloud Nary and cover all these topics it's really going to be a ton of fun it is going to be launched this summer and you can sign up for for the newsletter and a 25 launch Day discount oops on the website so this is the astrocourse.dev I'll have a link in the description below that you can check out as well but let me know what you're using for your personal sites and what your favorite framework is for that type of site so I'm really curious what your experience has been and if you're using Astro let me know if you're interested in using Astro you should definitely do it check out Astro course at astrocourse.dev anyway I hope you enjoyed the video if you're interested in more of this content make sure to subscribe so you can get notified in the future thanks for watching and I'll catch you next time

Channel: James Q Quick

Views: 44,768

Keywords: astro vs next.js, astro markdown, next.js, next js, astro framework, javascript, web development, astro content collections, astro typescript, pagination in astro, javascript frameworks, blog site, astro blog, astro course, astrocourse.dev

Id: BoeZqPaYw9s

Length: 12min 9sec (729 seconds)

Published: Tue Aug 08 2023