Why I STOPPED Using Next.js And Chose Astro Instead
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- Next.js was not the best option for my personal site. I decided to choose Astro because it handles working with markdown, code highlighting, pagination, and so much more so much easier.
Full Astro Course - astrocourse.dev/
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
*STAY IN TOUCH 👋*
Newsletter 🗞 - www.jamesqquick.com/newsletter
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
00:00 - Intro
01:20 - Struggled with Next.js and Working With Markdown
03:40 - Astro Content Collections, Markdown, and TypeScript
06:00 - Astro Rendering Markdown and Code Highlighting
08:00 - Astro Pagination
10:00 - API Endpoints in Astro
10:56 - Astro Course astrocourse.dev/
I used Astro.js in a Learning System Project, because there was a lot of texts, images, videos, dynamic exercises, like, in fact I needed to turn 6 learning books into multimedia content. So I thought this framework that could help me so much to finish this job. And now I really want to do my portfolio in Astro to, specially because markdown support. Seeing your video give more motivation and inspiration. Thank you!
So glad this was helpful for you!
Just last weekend, I rebuilt my personal website in Astro. And that was the first time I used Astro. It was such a delight to use.
Nice! Do you have a link?
I did this exact same thing with my portfolio site using markdown in next with gray matter etc. I was even able to style it with a prose class. It looks great and works great for me
Very nice!!
when Astro came out, I immediately saw the perfect in-between for eleventy and nextjs and jumped on it. And it only got better.
honestly i felt the same with Nextjs, error after error and started feeling frustrated, switched to astro and i like it a lot
Love the special guest.. also great video!
hahaha she made her first appearance :)
Loved the baby showing up. I was looking around myself 🤣 Congratulations James!
+1
I would love to have a breakdown / tuto of your newsletter automation API system.
nice rundown!
Thank you!
will be interesting to do Astro's video continuous things, especially with React and Tailwind 🚀
They continue to ship amazing features!!
would be awesome if you include i18n to your course
What's your take on HTMX in the context of the vid subject?
Oh my! 😍 God bless your new life, James! I got a little emotional watching they crying 8:25
Thank you :)
As soon as I learn how to use page transitions, I’d go all-in on Astro. I tried building MPA websites but the page reloads on navigation just feels so frustrating (mildly infuriating).
Yeah that's something I really need to dive into as well!
Is Client Side Navigation available in Astro or just Server Side Navigation?
@@chrismarks7495 As of this month it is. I still need to look into it, but I'll do a video eventually!
@@JamesQQuick That is one thing keeping me away from astro.
Astro 3 and View transitions is now stable and it works great
How do You manage your life with a newborn? I'm a graphic designer with two children..and I can't work at home - i had to find a studio to employ me so I could have the things done..but,my aspiration is to learn front end.. so to speak - do your partner respect your times / needs i terms of work, learning or it's like "there's a problem, give me a hand.." without any consideration of your space?
Thanks!
THANK YOU SO MUCH!!
I honestly still like Gatsby a lot, it may be a bit slower but it's still a great experience.
Nice! Are you still usign it for personal sites?
At this point, I've gone through so much frameworks that whatever the use case is I just adapt to that framework 🤣 I'm not flexing because this is a horrible thing to do. Just that I can't quite remove the thinking of knowing that for a certain use case this framework fits for other use case this frame work works best. I just got to be better each day
Would love to see a full tutorial on how to create pagination on a blog....
I've got a pagination video planned! Also, my Astro course will be released in the next month! astrocourse.dev/
You should optimise your site images!
I heard from astro some days ago and its a very nice tool. Could you make a video about the basics of authentication in astro? :-)
I'll actually be doing that in the course! You can sign up for updates here. astrocourse.dev/
Would love to see that video!@@JamesQQuick
Would you use Astro with cms? I am creating a blog with Astro and choosing a cms, going with Directus for now, but since I did not have a real use experience I dunno if it will suit me. Did sanity satisfy you? I am planning to use Astro+directus+neon postgresql and maybe prisma
Astro with CMS is definitely a great combo. I've thought about doing some content using Storyblok but Sanity of Directus would also be amazing!
@@JamesQQuick thank you for replying. Storyblok is cool, but other mentioned can be self-hosted
Fair enough! Thanks for sharing!!@@alisherzaitov
even the baby is excited for Astro!
She definitely is!
I agree sometimes next/react can be an overkill solution for a small site/blog.
I haven't tried Astro but I recently used 11ty for a blog and a small client site. I'd love to hear your opinion Astro vs eleventy.
Ah I haven't used 11ty myself, but I've heard really good things. I think Astro already has and will continue to have more full-stack framework capabilities whereas 11ty is much more specifically focused on staying ssg focused.
So Astro for full-stack? Would it be a valid choice comparable with Next?
You CAN use it for full-stack, but I'd say Next.js is more optimal for full-stack apps. I think Astro will continue to close that gap though
Could just do a bit of CSS so your Prev/Next buttons always show if they exist. Some reasons being
- Maybe tomorrow you think 20 or 100 records work
- Maybe someone views the site at super small widths
I'm not sure what you mean? They don't get hidden on small screens?
There was a point even in the video I could not see either prev or next. Which you can see at 9:34.
@@deatho0ne587 At that timestamp, I can see next but not prev which is how it's intended to work since I was on the first page of pagination.
You scolled to fast, but there is a point where you can only see the images on the screen.
you need to do a tutorial on how to baby sit and program at the same time :)
That's a hard one! lol
why would you choose next as a framework for some personal project if you dont need backend apis
Next also can do static content really well. It can work for a lot of use cases
@@JamesQQuick yeah but there's better frameworks
What options would you choose?@@sinkie420
@@JamesQQuick qwik or astro
Love your baby and you video and Astro ❤
After seeing the thumbnail .... you just broke my heart 😂
haha Next.js is amazing. I just chose a different direction for my site.
I use Astro to build apps :) I'm weird like that but I'm going to continue doing it anyway 😂
haha yeah I'm enjoying kinda pushing the traditional boundaries with it!
Remix JS is another great option
do you have astro tutorial with firebase?
I don't have one unfortunately. Anything in particular you'd like to see?
I'd love to see asto integration with Firebase. Pushing to firebase and leveraging firebase authentication@@JamesQQuick
Why not use app/dir with contentlayer?
I'm not familiar with content layer? What is that?
@@JamesQQuick it helps you with processing the mdx files. It actually makes it easier to parse the mdx files, however there may still be intricacies on it that may not be a good DX.
There is an issue in the website when we enter email and join waitlist the successful message color is not visible because the color and background both has white text. By the way I love your videos. Nice Baby ❤
Oh no really? Let me go look into that!
6 months on, would it still be your choice?
For many use cases, specifcally my site, yes! Still love Next.js too!
@@JamesQQuick cheers. Helpful, trying to work out what I was going to try and learn next. Was leaning Astro (esp as I’ve experience with 11ty) as I can then use React or Co as I learn them.
Shout-out to baby Quick giving us a shout-out and appearance @ 8:26 👨🍼
She's famous already!!
BWAAH!! "This is my life now."
Hi @JamesQQuick, please make the images in the overview of your blog post clickable 😉.
Hey there! Which images do you mean specifically?
How to integrate other libraries written for react into astro components written in jsx ??? ?
I've been wondering about Astro. It seems very "react-eque". Is it somehow related to React?
You can actually use React within Astro, but Astro is more directly compared to Next.js as a higher level "meta" framework.
Same JSX syntax and other "react-like" things?@@JamesQQuick
I was planning to learn Next.js but delayed due to work , not Astro came. If I delay Astro leaning surely something new will come , heeee
haha Astro is definitely worth looking into!
Content in a markdown file... Why didn't you use Hugo? 🤷♂️
Hugo is made for that and is very simple to use.
I would argue Astro is just as simple and also more powerful. Hugo also isn't JavaScript. Totally fine, but I prefer JavaScript. At the end of the day though, whatever works for you
Aww, aren't the "junior dev" cute! Now, develop a Quick Framework in her name. ;)
how about qwik? apparently faster compared to astro.
who cares astro is fast enough. it's not all about speed man. knocking off 2 ms ooohhh cool!
of course he's tried it, he named himself after it
why do you compare old nextjs with astro?
What do you mean by old? Pre 13?
why i switched from NextsJs to Framer
To framer? That's just for animations right?
@@JamesQQuick as a developer their are two types of project, static brochure sites (blogs are just brochures with lots of pages) and application.
sure you can build apps with with nextjs, svelt, astro, vue, etc.. that is the where they shine. but the frameworks are just so focused building fast static sites but why bother coding that!!
I'd like to see nextjs et al return to their roots. concentrate on providing tools to make applications not brochures .
rant over.
enjoy your channel btw
Guys from Astro invented Nuxt Content plugin
Wait until you have two of them, have a boy (2yrs) and a girl (5months)... Congrats though, the kids are the best part of life!
When you realize all the🎁gifts you have are just more packages 📦to deal with.
What do you mean?
@@JamesQQuick Felt poetic that Node "packages" include so many dependencies on other packages for the "gift" of effectively, free coding. It's more overhead to deal with of course. So in this case, and in many, Less becomes More.
@@badcatdesignI agree when you are starting a project having everything pre configured is great, but when the project grows it became a a mess
We are using Astro and because the project is big it started to become really slow to startup, the node-adapter is 1.2Mb and started to have random bugs that force to restart everytime
But what astro is really good is the rollup configuration, every page is extremely performatic
@@badcatdesign Well there's definitely tradeoffs with everything. In this case, I'm happy to take the built-in functionality with Astro that I don't have to manually manage.
I’ve been trying to publish my obsidian notes with Astro. Haha I cant even get the links to route correctly. This old brain can’t keep up with you youngins!
we can do everything with vanilla js
after hours of coding yes
Nah I'm good, sticking to Next forever!
Awesome. What are your favorite features of Next.js?
Bro... Next 13. it's just super easy.
You enjoying the app router?
am a full stack dev and i think nextjs is the best thing to ever happen in web dev
haha it's pretty amazing!
Paaagination
They make it so nice!
Because Astro is Quicker
2nd video today of this sort lol, major NextJS Ls
I don't see it as an L. I'm a huge Next.js fan. This is just what I chose for this specific use case.
You broke the rule : no babies 😂
Well, it's the JS community mantra, right? Change to a "new" and "better" framework every two weeks...
haha basically that's it. Never a dull moment!
Developers should stop the religion built around React. React is NOT good. Verbose, SLOW, complex, far from web standards. Try building a simple list with 200 instances of the same component. Try filtering and sorting this list with animated transitions. Try this using React. You will see how bad React is. "Ah, you should use memo, ref, use effect..." Really? Native workarounds?
Just yourself. Self am I building Twitter? Am I building the next Spotify? No then dont spend time on NextJs
I've been in the exact same boat - choosing a framework to move from Gatsby to. My conclusion is different, however. With Astro, you're really just getting an SSG, no different in output to Hugo or Jekyll. The islands architecture is nice, but you're really just generating a HTML site. NextJS is so much more. To go from NextJS to Astro is a downgrade. It's a great developer experience, but the outputted site is a straight up downgraded product.
Next.js is definitely a great option. I will say that Astro actually has full-stack capabilities as well:
- api endpoints
- ssr
- server components
There are tradeoffs but Astro has more than people realize!
This is still unnecessarily complex
"Added all the astro shit" commit. Do you still enjoy coding?
Love it :)
Great, another JS framework...
Lol. It’s not like it’s THAT new.
but it is yet another one haha totally get the frustration there!
Yadda yadda 0 days since the next JS framework yeah yeah, but I genuinely think Astro fills a niche.
Don’t be afraid of new frameworks. Always something new to learn
If you know vanilla is well enough and you aren’t a react bootcamper switching between frameworks is very very easy.
Astro makes Next.js look like child's play.
nextjs It's garbage
Hmm, what do you not like about it?
haha... sloppy transition from the baby... I swear, it looked like you dropped the baby and continued on.
sveltekit when :(