A web framework can only become popular by providing a good entry point for starting a new project. And next year's being a popular framework is no exception. So in this lesson, we will look at how you can easily create a new next year's project from scratch and do a walkthrough of the generated code to create a new next year's project. Open up the command prompt or the terminal, and then execute N px, which is a boundary that comes with node js, and then create next app, which is a package provided by ell. And to ensure that we get the latest version add at latest, and then provide a name for the project that you're going

to create, we are going to call our demo project demo dash Next js. Once you execute this command, it'll ask you for a few options for configuration. We will actually be accepting all of the default options over here because they actually agree with how I would personally set up a new next JS project. For TypeScript, we pick yes for ES link. We also pick yes for Tailwind. We pick the default of No, it's good to keep our code under the SRC directory. So pick yes. A key selling point of this course is that we will be using the app router. The app router is the default router for next year's,

and there are modern React features that we will discuss, which are only available in the app router. And finally, we will use the default import alias. As for most projects, you don't need to customize it. With this questionnaire filled out, it'll go into a process of installation and it's worthwhile talking about the dependencies it's installing. Next J is based on React to. The core packages that we have are React, react, Tom, and Next J fundamentally builds on top of these packages. During development, we are also using TypeScript and Slint, so we have TypeScript and type definitions for TypeScript.

And similarly we have Slint and Lin configuration specific for next J. Now, once this process completes, we have this new directory called Demo dash Next J, which is the name that we provided to the create next app command. This folder contains a brand spanking new Next Chase project based on our configuration options. So let's open it up within our IDE at the root of this directory, we have a few configuration files and perhaps the most critical over here is packaged or chason. This contains the dependencies and the dev dependencies, which we've already discussed.

Additionally, it contains scripts which basically via inter commands. Specific to the next CLI, we have the dev script, which we will use for live development and we will look at that in a minute. Then we have the scripts for production, which are Build and Start, which is also something that we will cover a bit in this session. And then finally, we have the lint script, which will lint our code using ES lint. There are a few of other configuration files worth discussing. For next JS configuration, we have next config mjs, which is a JavaScript module that exports the next JS configuration,

and currently it's default, it's empty. Then we have E Slint RC Chason, which contains the E Es N configuration. And this basically is saying that we are using the next core web vitals as well as next TypeScript. And then finally we have the TypeScript Configuration file, which is TS config J, which includes a sensible default configuration for use with next js. And this brings us to the SOC folder, which in turn contains the app folder. And before we look at this, let's run our application in dev mode to see what the application currently looks like.

We open up the terminal and execute NPM Run Dev, and this starts our dev server serving our application on local host 3000. And if we hop on over to the browser, you can see that it is a demo XJ page and it's asking us to edit source app, page six. But before we do that, let's clean this up a bit more. A lot of the styling that we are seeing on this page, for example, the white front and the black background is actually coming from Global css. So we open it up and empty it out. Next we have page module css, which is a CSS module specifically for the page.

And since we don't need any page styles right now, we are going to simply delete this file. We'll talk about CSS customization using CSS modules as well as global CSS in a future lesson. And now finally, we can clean up the source app, page 30 SX file. We'll remove the existing imports because we will not be using them anymore. And then within the export default function home, we remove whatever J six is currently being returned and replace it with a simple div containing a simple text. Since we have the dev server already running in the background using NPM Run Dev,

our browser will actually automatically live reload. So if you jump there, you can see that it contains the updated ui. At this point, feel free to take a break and write some react code of your own. That's all you need in order to start playing around with this application in dev mode. But let's take it a step further and talk about building this application and executing it in production mode. In order to build this project, we can execute in PM Run Build, which is something that we looked at in our package rotation. And this creates pre-built assets, which can be run in production.

It does other useful things as well. As an example, it performs linting using ES lint and type checking using TypeScript. Finally, once the build completes, it also mentions the different routes that it's discovered and how next year intends to serve them. Concepts like static P rendering is definitely something that we will look at further on in this course. Now, to run the production build, we can actually execute n pm Run Start, and you will notice that it is much faster to boot up as it's not watching or compiling our code and instead running on top of the pre-built assets. And if you open up the browser, it looks exactly the same

as our development app. It's always good to look at the code as we did in this session, as it helps ground the concepts that you learn into something tangible. Thank you for joining me and I'll see you in the next one.