![Production-Grade Next.js](https://static.frontendmasters.com/assets/courses/2021-03-02-production-next/thumb.webp)
Check out a free preview of the full Production-Grade Next.js course
The "Wrapping Up" Lesson is part of the full, Production-Grade Next.js course featured in this preview video. Here's what you'd learn in this lesson:
Scott wraps up the course by sharing recommended resources and giving advice to learning more about Next.js.
Transcript from the "Wrapping Up" Lesson
[00:00:00]
>> Last thing is literally, congrats. You've made it this far. This was a hard course. This was a hard course to make. So thanks for sticking with me. I hope you all learned whatever you needed to learn to get your next JS apps out to the world so people can use it.
[00:00:22]
I would say, after knowing all of this stuff, you pretty much know everything you need to know to actually have a production ready, Next.js app. The only thing I would say is probably they're like testing, and I was gonna cover testing, but I just felt like there was nothing unique about testing to Next.js that wasn't really React.
[00:00:43]
So I kinda felt like it just wasn't unique enough. So I would say maybe brush up on some testing there. Other than that, you know everything. I mean, a lot of people don't even know what the preview feature. Y'all know how to make previews now, so you're good.
[00:00:59]
Last thing I wanna talk about here is just some cool stuff that I was mentioning throughout the project. I talked about SWR. SWR I think it stands for stale-while revalidate, I think that's what it stands for, yeah, [LAUGH] that's right there. It's a cache invalidation strategy popularized by this RFC.
[00:01:17]
If you fancy those docs, go look at it. But basically, the Vercel team made this as well I'm pretty sure, and it's a hook that allows you to, it does so much for you in such a small package. But basically, it's meant for client side data fetching. So in this case, this person is making a API call to /api/user.
[00:01:41]
But this right here has nothing to do with the API call. This is actually just a key to the cache. And it's smart to just use the route that you're going to. So basically what's gonna happen is SWR is gonna execute this function, get the result of it, and store it in the cache at this key.
[00:01:55]
And then anywhere else in your app if you want to access. If you have this again, anywhere else in your app, it'll check the cache first, and it'll get it and you can change the policies on how you want that to behave. You can say I want it to always go to cash, or go to cache first, and then go to the network, different things like that.
[00:02:12]
It also does that thing where you can focus and not focus on the window. So if I click away and come back, let me get it, again, it syncs tabs. So if you have the same app opened up in multiple tabs, it'll sync them all together. So if one person makes a change here, for instance, if this query gets updated on one tab of your app, it's gonna get updated on all the tabs of your app.
[00:02:32]
Which is pretty crazy, really, really insane. So SWR, a really nice tool. Another one is react query which is pretty much the same thing as SWR just a different flavor, but it tries to accomplish the same thing. I have more experience with react query. But I know SWR is also really legit, but they both kind of do the same thing.
[00:02:56]
So yeah, highly recommend taking a look at both of these for your client side data fetching needs, also mutations as well. React remix, this is something that's kinda like Next.js, I think, but I haven't used it yet. I'm probably just gonna reach out to Michael Jackson in them to see if I can actually get a hold of it.
[00:03:17]
I think I can see dots that he uses, so I might hit him up and see what he's saying. But yeah, this is basically, I looked at the docs a little bit, I heard a little bit about it. But it costs money that's why I haven't used it.
[00:03:29]
But I mean, they deserve it. This is seems like an amazing piece of technology. Just from reading it, it kinda seems like a Next.js approach to building frameworks, but I think they do some stuff on the edge too. So it's like a service and a framework put together.
[00:03:45]
But it's just nice to see what Next.js did is sparking like a new wave of, wow, we actually need full stack apps. We need full stack apps. Static, I personally think static is dying. I would never reach for a static site generator today. I wouldn't do it. Because it's very,very limiting.
[00:04:04]
I don't know why I would only build static today, when I could do something like this or in Next.js. So that's just me. Yeah, this is some project. So hey, if you get access to this, let me know on Twitter how you like it, I'm very curious about that.
[00:04:19]
I just put it there cuz why not? Obviously I'm gonna talk about my product type, it's a headless CMS. Sign up for access, I will put you on top of the list, you could pretty much use it literally today if you sign up for it, just hit me up on Twitter, let me know you signed up in your email and I'll give you access to it.
[00:04:38]
It only works with Next.js right now. So we've worked very closely with the Next.js team and Vercel to make a really tight integration. So hopefully It turns out [LAUGH] good. So yeah, let me know if you wanna check that out. And another CMS that I respect and I think is really legit, is Sanity.
[00:04:56]
I really like these guys. The team behind this is doing a really good job. So yeah, check them out. I would say If I wasn't using Type, Sanity would be the CMS that I would use for my projects. So yeah, check them out, really nice project here. Every other CMS is pretty good, but I think Sanity's the only one that's kinda got it figured out.
[00:05:17]
Other than that, that's all I got. What I recommend for further learning towards Next.js, so typically what I like to do when I wanna really get comfortable with a framework, Is you have to set like a goal that's just slightly out of your reach to accomplish, right? You can't be like, I just wanna learn something.
[00:05:39]
And that's your objective. Your objective should be to like build something, it should be some output that can be measured. And the thing that you're trying to build should be slightly out of your comfort zone, okay? Like it shouldn't be so far out of your comfort zone that you give up on it.
[00:05:50]
But it should be enough to where it's gonna require you to research, and it's gonna require you to think. So I would say, think of an app that's slightly out of your comfort zone, something you haven't tried, something that you wanns try, and build that with next.js. And then increase the difficulty and build it again, you do that three times, you're gonna feel pretty comfortable with any technology.
[00:06:09]
And that's pretty much kind of how I like to do things when learning, to set that goal slightly outside of your region, and then go for it, see what happens. Eventually you'll learn that technology, because there's one thing to know like how something works and then how to use something.
[00:06:23]
I think what's really important is really knowing how to use something. If that's all you ever did, I think you'd go really far. And then when it comes down to learning how something works, I think that pays off. That's what I call likes it's a quiet superpower. It doesn't really, no one actually sees that power that you actually know how something works cuz you don't really get to show it off that much.
[00:06:46]
But it does pay off because all of a sudden, you seem to fix things that people can't fix or you move slightly faster than people. But they know how to use the technology as well, they just don't know how it works. So as long as everything's going smooth, they're doing pretty good as well.
[00:07:02]
So I will say probably focus on just getting really good at using something, and then if you wanna go back to understand how it works, do that much later. Do not get stuck on how something works before you use it. None of us had to learn how a car work before we got our license.
[00:07:18]
You got your license and you drove, and you probably still don't know how an engine works. And that's meant by design. [LAUGH] It's totally fine. So learn to use this framework, learn to be good at it, learn to be productive. If that's boring to use, you're so good.
[00:07:31]
Then go back and see how it works. Go look at the source code, you'll have way much more context to actually understand it at that point anyway. Ask some questions, reach out to the Vercel team, reach out to the Next team, ask them how they did it. They'll show you, but you kinda wanna be ready for that.
[00:07:43]
So have the context, know how to use the framework, and that will take you very far. And with that, that's all I got. So I wanna thank you all for coming to the course. I hope you got a lot from it. And I will see y'all on the next one.
[00:07:56]
Feel free to reach, I try to respond to every single person that hits me up on Twitter. I literally will hop on and pair with people. I do that a lot. I'll just hop on a pair of people help them out with random stuff. Like I had someone mix me up with someone else, and they thought I was someone else, and I still hopped on a pair of with them, to see if I can help him get past some bugs in a language that I don't know.
[00:08:18]
And we did not get past it, but I tried. So if I have time, I'll do it. So just hit me up if there's something you need if I didn't get across today or if the question comes up later, I'm here. I try to respond as much as I can.
[00:08:31]
And I just like doing that stuff. Well, all right, like I said, I am open and willing to answer anything. Just hit me up, and again thanks for coming.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops