"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Complete source code for this lesson is available at
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
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
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 There are many different ways to create a Next.js application, but the quickest way to do it is through the automatic installation using the Next.js CLI.
00:00:10 You'll simply have to type mpx create-next-app add-latest.
00:00:14 Then head over into your text editor or IDE, and I suggest to use a built-in terminal right within it.
00:00:22 You can paste that command or just type mpx create-next-app And then what matters is whether you're already in an existing folder or not.
00:00:33 So what I've done is I've created a new folder on my desktop called ultimate-nextgs-course and then I dragged and dropped it right into my text editor.
00:00:44 If you did the same, then you'll need to add a dot slash at the end to create the Next.js application within that selected folder.
00:00:52 Else, if you're creating it in your general environment, you can just enter your app name, such as Devflow right here, and then it'll create a new folder
00:01:01 for you.
00:01:02 Once you're sure what you want to do, press Enter.
00:01:05 And it'll ask you whether you want to install the Next.js CLI, so say why, yes.
00:01:11 And then you'll be prompted to answer a couple of questions.
00:01:14 First one being, do you want to use TypeScript?
00:01:17 Of course, I'll go with yes.
00:01:19 The second one, do you want to use ESLint?
00:01:21 Well, that's another yes, of course.
00:01:24 Since Tailwind is popular for styling applications and since we'll be using the latest version of Tailwind CSS, I'll definitely say yes.
00:01:34 It'll also ask you if you want to organize your code inside of a source folder.
00:01:38 The default option is no, so I'll go with that, but this is more of a preference rather than a feature.
00:01:44 We will go for the recommended use of the App Router.
00:01:47 This is important as it's one of the key features of Next.js.
00:01:51 If you select No here, a lot of the Next.js features won't work.
00:01:55 You'll get the Pages Router instead, but we want to use the new App Router.
00:02:00 Next, it's asking us about TurboPack.
00:02:02 It's a next-generation bundler written in Rust, designed as a successor to Webpack.
00:02:08 It offers faster startups, quicker updates, and improved memory efficiency.
00:02:13 So I'll go with yes.
00:02:15 It's asking us whether you want to customize the import alias.
00:02:18 I prefer to keep it as it is, so I'll say no and press Enter.
00:02:23 And that's it.
00:02:23 You're done.
00:02:24 As you can see, Next.js is now installing only three primary dependencies, React and React Dom that Next.js is built upon,
00:02:32 and then the Next.js library itself.
00:02:35 It's also adding additional dev dependencies such as TypeScript, different types, ESLint, and Tailwind CSS.
00:02:43 And within a few seconds, our application has been initialized.
00:02:46 So, let's explore the file and folder structure together.
00:02:50 Starting from the bottom and moving our way up, I want you to feel comfortable within this file and folder structure, so that at any point in time,
00:02:59 you know what each file and folder does, so you truly own your code base.
00:03:04 Let's start with tsconfig.json.
00:03:07 This is a configuration file for TabScript.
00:03:10 It defines what should be type checked, ignored, and the other rules to follow.
00:03:16 Then there's the readme.md, which is a simple markdown file that explains how to run the project and provides additional information about your project.
00:03:25 Later on, we'll clean this up and put the information about your app right within here.
00:03:30 Then there's the PostCSS config.mjs, which is a configuration file for PostCSS, which is a tool used to process CSS with different plugins.
00:03:41 You can see here that it mentions Tailwind CSS as a plugin, which allows you to use its utility first classes in this project.
00:03:49 Then there's the package JSON, which contains all of the app's dependencies and scripts.
00:03:56 Some of the main scripts are the dev scripts, which starts Next.js in development mode with hot module reloading, error reporting and more.
00:04:05 This is what we'll be using most often.
00:04:07 You can also create an optimized production build of your application using the build command.
00:04:13 And then there's also start, which starts Next.js in production mode.
00:04:17 Then there's the package lock JSON file.
00:04:21 It's a file that locks the versions of dependencies in their sub dependencies, ensuring that everyone working on the same project uses the same exact versions.
00:04:30 Don't delete it.
00:04:31 It serves its purpose by ensuring that other people that run your project can run it just as you can.
00:04:37 Next, there's the Next Config TS, which allows you to configure Next.js features, such as experimental options, image settings,
00:04:46 build settings, and more.
00:04:48 We'll dive into it, of course, later on as we dive deeper into the course.
00:04:53 There's also the nextenv.d.ts, which is a TypeScript declaration file for Next.js.
00:05:00 And as it says right here, this file should not be edited.
00:05:03 It is specifically for Next.js.
00:05:05 Then there's the eslint.config.mjs file, which is used for configuring eslint.
00:05:13 .mjs stands for module JavaScript, which is used to explicitly indicate that the file is using ES modules, a modern module system in JavaScript,
00:05:24 which makes sure that it can use the import and export statements from ES6 plus syntax.
00:05:31 Then there's the gitignore for git files and folders you want to ignore and not push the production.
00:05:36 The public folder keeps track of all of the static assets such as icons, images, logos, and more.
00:05:44 And then, of course, there's the node modules.
00:05:48 You know, the heaviest object in the universe.
00:05:50 But jokes aside, it's a folder containing all the dependencies and packages your code needs to run this application.
00:05:58 This Git folder might be hidden for you.
00:06:00 It just means that there is a Git repository initialized right here.
00:06:04 Later on, we'll initialize it too, and you'll be able to push to it whether you can see this folder or not.
00:06:10 But the most important folder in this entire application is the app folder.
00:06:16 You'll primarily work within this folder to implement most features, including pages, API routes, and more.
00:06:25 But before we dive into this folder's details, let's first run the application by running npm run dev.
00:06:33 This'll spin it up on localhost 3000. So to follow it, simply command click it, and it'll open up on localhost 3000, and you should be able to see something
00:06:43 that looks like this.
00:06:44 which is the Next.js' boilerplate page.
00:06:47 The app folder contains the favicon, which is a little icon displayed on the tab of your browser.
00:06:52 Then there's the globals.css file where you can define your Tailwind CSS theme and write custom CSS or additional Tailwind CSS utilities.
00:07:03 Anything CSS or Tailwind CSS related will go right here.
00:07:07 By default, your editor might show you a zigzag line over Tailwind CSS import saying unknown rule at Tailwind CSS.
00:07:16 It's not an issue, but an editor file type.
00:07:19 So at the bottom of your VS code, if you're using it, you can see the CSS as the file type.
00:07:25 So click it and change the type to Tailwind CSS.
00:07:30 That way it will nicely recognize it and the warning should be gone.
00:07:34 The next file within the app folder is the layout.tsx file.
00:07:39 This is the main entry point of your application.
00:07:42 Anything that you do here will be applied across all pages and routes.
00:07:47 That's exactly why here we import different fonts, styles, and metadata.
00:07:53 For example, let's change the metadata from Create Next App to something like Hello Next.js.
00:08:00 I'll even put a little wave emoji right here.
00:08:03 Now, if you visit your browser and check out your tab, you should see Hello Next.js.
00:08:08 And finally, there's a page.tsx.
00:08:12 And this file represents your homepage or the forward slash route of your site.
00:08:17 Currently, it contains some boilerplate code by default, but let's remove everything by pressing command A and then removing it.
00:08:25 and then simply type RAFCE.
00:08:28 This stands for React Arrow Function Expert Component, and it is a snippet that automatically creates a new React Arrow Function.
00:08:37 So I will simply make it say home, and nowadays the React imports are not needed, so it can look like this.
00:08:45 If this snippet didn't work for you, that must mean that you don't have the ES7 Plus React Redux React Native Snippets extension installed,
00:08:53 So after you install it, you should be able to run it or just type it out manually.
00:08:57 Now here we can say the same thing as we said in the title, welcome to Next.js.
00:09:03 As a matter of fact, I'll put this within an H1 tag and I'll also give it a wave emoji and a class name equal to text-3xl text-violet700 and font-black.
00:09:19 If you save it and go back to the browser, you'll see the changes instantly on the site thanks to the HMR or the hot module replacement.
00:09:27 So now that our application is functional and we can see something in the browser, and now that you know how you can initialize new Next.js applications
00:09:35 and that you understand the full file and folder structure, we are ready to continue to the next lesson.
00:09:40 Great job!
