Next/Learn: Fullstack course with Next.js 14

Free, fullstack & fun

Vercel dropped a brand new course during the latest Next Conf, all about Next.js 14! And I started going through it, live, the moment the conference ended 🙌

Let’s go through it together! This livestream rapidly became my most popular livestream, and is still growing! It may end up being my most popular content outright?! 🤯

Next.js 14 doesn’t actually ship any new features, but it does crystallise the “modern” way to build React apps. The file-based App Router, streaming, and Server Actions are primed to be the new normal!

Let’s break down Next/Learn, and end with my overall thoughts 🧑‍🏫

Chapters 1-11

We went through a lot in the very first stream, and it’s understandably the most popular part. People get excited about new projects 🥳 and first looks!

Next/Learn opens strongly, with graceful notes on Tailwind and CSS Modules, and a lot of excellent theory on Core Web Vitals and how optimising for performance leads to better UX… and therefore greater conversions, better bottom line!

The way the new App Router works is showcased well, as we get to work on layouts and different routes.

The database setup / seeding could be better, I never understand why people use bcrypt, or similar npm packages with hard dependencies, instead of packages directly using crypto from Node! Or using crypto ourselves. We did run into some problems in the stream because of bcrypt misbehaving…

Maybe it’d have been best to just use a third-party OAuth provider like Github, instead of database and password? 🤔 And get around hashing problems by not needing any 😄

In any case, we did make it to fetching data right inside a React component! Exciting 🤩

I am sure lots of engineers get intimidated when asked to fetch data in a React app… Which is unfortunate! Fetching data is 50% of the bread & butter of web dev.

It’s just a mess, with all the useState and useEffects, and even when you hide the complexity behind an excellent library like React Query. Data-fetching in React is intimidating! Or should I say… “was”?! Now, with Server Components, it can be just a regular function call!

Just remember to extract your implementation detail of how exactly you are fetching your data, out to a separate method. People get severely triggered when they see sql methods in a React Component.

The course does offer those helper methods, and with our data fetching we also set up Skeleton UIs… Our users get to look at something pretty, and representative of the near future, while their data loads!

We even refactor to multiple individual Skeleton UIs for just a single route, in the “Streaming” chapter! Wild.

There has to be a point where there’s too much granularity in Skeleton UIs, like how there is a point where you’ve got too many loading spinners 😛 but I enjoyed the examples and they drove that cool feature home!

Chapters 12-14

We started with a banger in the second stream: Mutating data is always exciting, and with React Server Actions doubly so 🔥

It’s no secret I like using vanilla HTML forms, and native browser validation coupled with server-side meaningful validation, so Chapter 12 was music to my ears, or puppies to my eyeballs. A real treat!

The way React Server Actions work is quite similar to how SvelteKit does forms and their respective actions. Which makes sense, as we’re all evolving to take web standards more seriously!.. in response to the standards becoming more sensible as they’ve themselves evolved and matured over the years.

But both React and SvelteKit, and Remix, “enhance” the native form experience… and I think Next.js manages to do it best. You pass the “action method” directly to the form, instead of a string key that corresponds to a magic object in your server.

The Next.js way is even more magical compared to SvelteKit, and to be honest it treads the line for “too magical”… But it’s been fun so far!

Moving on from Server Actions, we did lose some steam trying to crack Authentication, and there were some assets missing trying to move on to the final chapter of “Metadata”, but I still really enjoyed the stream overall!

And, no worries at all, the Next/Learn team has been super on it, delivering such a big project to begin with, and addressing issues every day post-launch… By the time the third stream came around, our issues were resolved and we could go all the way to the end!

Chapters 15, 16 and “Extra Credit”!

Our final stream is also picking up on views! It’s fun to see the end of projects and, I suspect, lots of people want more auth. Great, figuring out authentication was exactly how we started this final part!

Although, maybe my “extra credit” work after the official end of the course also has something to do with the stream’s rising popularity 😄

We started by recapping how our database connection works, our seeding and password hashing. Then, we reimplemented auth with NextAuth! Supabase has been my personal go-to the past couple years for storage and it has its own auth solution… and when I’m consulting it’s almost always Auth0, so this was my first time trying out NextAuth. It went well, it’s a solid project!

We finished the course with the “Metadata” Chapter, which was a bit… disappointing to be honest, as it didn’t show off Next.js’ AWESOME dynamic Open Graph image generation.

No joke, that’s a top 2 reason to go with Next.js over some of the other great meta frameworks. For example, it’s not that SvelteKit cannot do it, but Next.js will give you better outputs for much less work!

(The other top reason is the Image Optimisation, where going full-Vercel with Next.js will give you better results for very little effort on your part.)

So this was a huge missed opportunity to finish the course with a real banger! No worries though, I gotchu and we kept the stream going with two essential features you’d want in every single real app you deploy!

My bonuses

For our first “extra credit work” we went with installing Playwright, and having it run my most valuable test, the navigation smoke test! Against our actual Vercel deployments to boot!

And, as always happens, the test uncovered some accessibility issues we could immediately resolve. I love my navigation smoke tests.

Second big extracirricular bonus kept things full-Vercel, as we brought in Vercel Analytics! This was incredibly straightforward, we went fast and smooth, so I’m surprised it wasn’t included in Next/Learn! It’d have been a superb promo, and why not showcase all the cool features Vercel offers! 😄

Also, both of those “bonuses” are absolutely essential:

• With E2E sorted you can refactor and add features with confidence!
• With analytics you can see whether anyone is actually using your app, which flows are a success, which peter out prematurely!

We did go through a few more little things, like my newest, best way, to setup SVGR in order to have SVGs as React components in Next.js.

Looking back at part 3, we did auth well but don’t sleep on our livestream bonuses either: lots of actionable value there too! 😄

Overall thoughts

The question I got the most during the stream was… What did I think of the course! Which is fair enough, I’ve got two decades of experience in web dev and quite a few specifically on teaching & workshops, so my opinion has some weight 😄

I liked Next/Learn! 👍 Great effort from the team behind it! I found the theory particularly excellent.

The course showcases a lot of the modern Next.js features, plus a lot of the value of Vercel, including Github integration & deployments, image optimisation, and their new, “second party”, storage solution with Postgres.

There are parts where my teaching approach differs. Personally, I don’t like having “uncomment this code”, or “copy & paste this snippet”, sections. But I understand the benefits of that approach!

For example: having a beginner actually implement pagination from scratch would be a project that takes weeks instead of minutes. And it’s essential to keep the student doing cool stuff, to keep them engaged!

On the other hand, if all they are doing is uncommenting code, even if they see cool results, you risk them feeling like they ain’t really doing anything. On the other, other hand, if they’ve got to do all the code, you may struggle finding things for them to implement, which strike the balance between doable and… exciting!

The takeaway is… Teaching is hard 😂 which is one of the reasons it’s my favourite way to learn 😄

So, if I’m going to end on one thing: Great course, great team clearly putting in work & love behind it, and you should check Next/Learn out! Either with me coding along the livestream, or without me, at your own pace 🚀