No Comments Yet
Be the first to share your thoughts and start the conversation.
Prerequisites
Loading...
In this lesson, you'll learn what is used and what you'll learn in this course
Loading...
0 Comments
In this lesson, you'll learn what is used and what you'll learn in this course
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this video lesson, the instructor discusses the prerequisites for learning Next.js and how to set up a conducive development environment. The emphasis is placed on essential tools such as a browser, Node.js, and a code editor, along with recommendations for enhancing the coding experience.
00:00:02 Let's talk about prerequisites.
00:00:04 And trust me, there aren't many.
00:00:07 Since you're watching this course on Next.js, that means that you're already a great developer.
00:00:12 Because to start learning Next.js, you need to know a bit of HTML, CSS, JavaScript, and React.
00:00:19 And if you know those things, you most likely already have a browser.
00:00:23 But if you don't, or you want to switch things up a bit, I highly recommend Arc, the Chrome replacement I've been waiting for.
00:00:30 It's available for both macOS and Windows, although from what I've heard, it works better on macOS.
00:00:37 but they're always improving Windows 2. It is my browser of choice right now.
00:00:42 It allows you to see your websites on full screen by removing the top bar that Chrome and other browsers have.
00:00:50 And instead of that, you have a left side sidebar, which is fully collapsible.
00:00:54 You also have different spaces, allowing you to have one for work, one for development, one for travel.
00:01:00 Whatever it is, you can kind of structure it a bit better here.
00:01:03 Of course, fully customizable as it all is, and it is private.
00:01:07 And since you're watching a paid tool, I gotta tell you that I'm not endorsed by any of the tools that I mentioned in this course.
00:01:13 I just want you to have the best experience and follow along and see exactly what I'm seeing.
00:01:18 Of course, if you prefer Chrome or even Firefox or even Edge, it's completely up to you.
00:01:23 We can develop websites on any browser.
00:01:26 Next, you'll of course need Node.js, a JavaScript runtime allowing us to spin up our Next.js application.
00:01:32 So you can head over to nodejs.org and download the latest long-term support version.
00:01:37 Finally, you'll need a code editor or an IDE.
00:01:42 Recently, I've been trying out WebStorm and I like it a lot.
00:01:45 It has a lot of features that made me realize what the difference between a code editor and an IDE is.
00:01:52 Oh, and another big thing is that JetBrains recently announced that WebStorm is completely free for non-commercial use.
00:01:59 So if you want to try it out, you can do that.
00:02:02 Still, since I haven't yet made full switch over to WebStorm, in this course, I'll be using Visual Studio Code, a code editor that you're surely familiar with.
00:02:10 So I'm totally okay with whichever one you use.
00:02:14 You can follow along with no issues.
00:02:16 Believe it or not, that's the end of the list of the prerequisites.
00:02:20 How do I know?
00:02:21 Well, that's because I opened all of them as different tabs in Arc.
00:02:25 So you can see this is a pretty cool feature, how we can just hide it.
00:02:27 And then you have different tabs.
00:02:29 You can clear them, rename them, create folders.
00:02:32 You'll see me use Arc often.
00:02:33 I have different spaces like for recording or general.
00:02:37 And why I wanted to go over this with you is because we'll be spending like 50% of the time in this course in our browser.
00:02:44 So I just wanted to make sure that you set up a nice environment that you actually enjoy viewing your websites within.
00:02:49 The other 50 or should I say maybe 90 plus percent of this course we'll be spending in our code editor.
00:02:56 And you maybe want to make your editor look like mine.
00:02:58 So I just quickly want to go over some of these settings to make your editor look and feel like mine so you can follow along better.
00:03:06 First things first, I like to hide everything that I'm not using.
00:03:09 So you'll see different parts here like Docker, GitHub Actions, .env, run and debug, Remote Explorer, Live Share, and more.
00:03:18 I don't use those on a daily basis.
00:03:20 So I only like to include what I have.
00:03:22 The Explorer right on top.
00:03:25 the search right below, source control right below search, extensions below source control, and finally a chat with copilot.
00:03:33 You may catch me use this a few times and I'll teach you how to use it too.
00:03:37 At the bottom bar, once we initialize our GitHub repo on the bottom left, you'll see your active branch.
00:03:43 And on the right side, well, right now I have nothing.
00:03:46 Yep.
00:03:47 I like to keep it completely clean.
00:03:49 Now, let's quickly go over a list of extensions that I have so we can ensure that you have the same experience.
00:03:55 I'm using Babel JavaScript, which is Visual Studio Code's syntax highlighting for today's JavaScript.
00:04:01 Better comments, which allows you to have different colored comments for alerts, informational, to do, and so on.
00:04:08 Cat put in theme for Visual Studio Code.
00:04:11 Yep, this is the theme that I'm using.
00:04:13 So if you install it and if you press command or control shift P and then type in theme, you can then choose different themes of your editor.
00:04:23 There are many default ones.
00:04:25 Ooh, sorry for giving you so much bright light right now.
00:04:29 But I prefer the catpuchin ones.
00:04:33 There is the frappe, macchiato, and there's mocha, which is kind of extra dark, which is exactly how I like it.
00:04:39 So I'll go with that one.
00:04:41 Next, we have .env, which is useful when you're working in larger teams.
00:04:45 It allows you and your entire team to sync environment variables.
00:04:50 You won't be needing this for the course, but I use this a lot with my team when developing the JS Mastery Pro platform.
00:04:58 Next, we have ES7 Plus React, Redux React Native Snippets, which is going to allow us to quickly create a new functional components using snippets.
00:05:06 We need ESLint to make sure our code base is clean and readable.
00:05:11 GitHub Copilot, which I'm not sure whether it's free or paid.
00:05:14 So let's check it on their website.
00:05:16 The world's most widely adopted AI developer tool.
00:05:19 Okay.
00:05:20 55% faster coding.
00:05:22 And I gotta tell you, I was at a GitHub universe conference last year as a part of the GitHub Stars program I'm at, and they demonstrated how it can significantly
00:05:33 increase developer productivity.
00:05:34 And I gotta say, I love using it.
00:05:37 In some cases, you don't even notice it's there.
00:05:39 It's like auto-filling some stuff, but even the copilot chat is super useful so you can chat with it and just code faster.
00:05:46 But let's check whether it's actually free as I forgot.
00:05:50 So if we go down, oh, there we go.
00:05:53 Okay.
00:05:53 So copilot individual is actually 10 bucks per month or a hundred bucks per year.
00:05:58 If you have the money to spend, okay.
00:06:01 I would highly recommend going for it.
00:06:02 it's going to significantly improve your development efficiency.
00:06:06 If you don't, that's totally okay.
00:06:08 But as you can see, it is free for verified students, teachers, and maintainers of popular open source projects.
00:06:14 So if you're one of those things, you can definitely get it for free.
00:06:17 Again, not a necessity, but it can definitely speed up your workflow.
00:06:22 Next, we have IntelliCode, which is AI assisted development.
00:06:25 It'll just provide some AI auto-completions.
00:06:27 I'm using the material icon theme for the Explorer icons.
00:06:33 It's quite nice as it tells you if something is a React component to a folder or something else.
00:06:38 But I think any file system does that, right?
00:06:40 Next, language support for MDX.
00:06:43 MPM IntelliSense, which will auto-complete MPM modules and import statements.
00:06:47 Super useful.
00:06:49 Path IntelliSense, which will autocomplete file names.
00:06:53 Prettier for formatting.
00:06:54 Prettier ESLint to make ESLint and Prettier work well together.
00:06:59 Pretty TypeScript Errors, which is going to make you fix some of these any types, at least a bit more often.
00:07:05 And then Tailwind CSS IntelliSense.
00:07:08 So that's it.
00:07:09 Like these are all the extensions that I have.
00:07:11 It's a list of maybe 10, 15, and I like all of them.
00:07:14 So feel free to install them, set up your theme to whatever you like, and we are ready to roll.