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!