Tutorial Review: Traversy — Next.js Crash Course
The Stats
Feelings
- Before: Fine
- During: Good
- After: Bad
Time
- Runtime: 40 mins
- Actual: 90 mins
Imposter Syndrome Check: Negative
The Verdict
- Overall: 4/10
- Understandability: 9/10
- Relevance: 4/10
- Production quality: 7/10
- Applicability: 2/10
- Vanilla JS balance: 4/10
The Background
I have wanted to learn a technology that would improve my sites’ SEO, and have been torn between Next and Gatsby for a while. After watching various YouTubers explain the pros and cons of each, I decided to go with Next as server-side rendering seemed more like the kind of functionality that would suit my needs.
In order to get into that, I decided to go with Traversy’s tutorial. After that, I started making my own Next.js project without handlebars (handlebars being a metaphor in this case; nothing to do with curly braces).
The Feeling
A little uneasy, because it was too easy. People had warned me that it’s super simple, but I will only believe it once I’ve fully completed a Next project flying solo. The fact that it was too easy has caused me to overthink a lot of things, which in turn makes it more difficult. this is a prime imposter syndrome symptom, and one I fall victim to with relative frequency. Case in point: my Google-fu is all outta whack because I don’t know if I’m supposed to be looking for Next errors or React errors. While I was frantically Googling, turned out most of my errors were because of Next’s picky syntax throwing React errors. I figured out all of them, but I can’t help but feel like I’ve been lulled into a false sense of security and that when I actually make my own project, when it actually matters, all hell will break loose.
The Review
TL;DR: Skip it, watch Codedamn’s instead.
The aim of the tutorial is to give you a grounding in Next.js so you can go on to start creating your own projects using the newly-learned technology. This tutorial effectively does that, so it’s important not to be too critical; I do feel confident enough to start rolling out Next with my next (am I saying that too much?) projects, and I feel better for having done the review. What’s more, Traversy does a good job of showing off some of the neat little quirks that Next contains. For these reasons alone, it would be unfair to say that the tutorial is anything less than just fine.
However…
(you could really feel that “however” coming, right?)
I don’t know if I could say that I get Next at this point. And as helpful as a tutorial may be, if you still don’t get the thing you’re watching the tutorial to get, then… can you call it an out-and-out success?
The largest issue with the tutorial is that it’s quite out of date by this point. The video was published in January 2018 — almost 2 years ago, at time of writing. Since then, Next have launched a game-changer: create-next-app. This is now the recommend setup method, as it bundles together a whole bunch of useful packages, like you’d usually find in a create-react-app project. Next launched create-react-app in 2019 so, as much as the fundamentals of Traversy’s tutorial still hold true, they’re not working with a particularly relevant set up.
The outdated tech rears its ugly head later on in the video, when Traversy uses getInitialProps to make API calls. Whatever you return from this method becomes the props for the component in which you’re working. It’s fairly straightforward and Traversy explains well.
However…
(oops, I did it again)
Next now recommends you do not use getInitialProps for simple data fetching, and instead use getStaticProps. Another strike for Traversy.
Traversy encounters a couple of other syntax issues, too. None so major, but I did find myself having to do some Googling to debug for myself. I’d soon find out that the reason my code isn’t working and Traversy’s is, is because Traversy’s syntax worked for a much older version of Next. For example, you need to run a codemod in order to return html from an anonymous function.
I also wish they had taken us through the deployment process to Vercel. Vercel is Next’s self-made hosting service and, seeing as Traversy talked it up at the beginning, I’d assumed we’d be deploying the project with them. That didn’t happen, which seems like some low-hanging fruit they’ve missed; I did it myself using Vercel & Next’s docs and it was remarkably easy. Wrapping the video up with 5 mins on deployment would have given us viewers a sense of closure and completion that, sadly, doesn’t exist in the current tutorial.
Nor does the dynamic routing, which is such a powerful aspect of Next. Upon trying to make my first solo Next project, I stumbled at the first hurdle when I wanted to dynamically render pages using Next’s square-bracket naming convention. Traversy’s explanation just didn’t prepare us for this and, as a result, I got annoyed at myself and Traversy for feelings of inadequacy.
Coming to the rescue was Codedamn, my knight in shining JavaScript armour. His comprehensive course on Next.js encompassed everything that Traversy’s didn’t. As it stands, I now have a website up and running (very much in development, but here you go) and I honestly couldn’t have done it without this guy. Traversy’s course wasn’t a complete waste of time, but I do wish I’d taken future me’s advice and gone straight to Codedamn.
