All language subtitles for 002 Creating a Next.js Project_en

In this video we'll set up

our first Next.js project.

Now, the easiest way to initalize a new project

is to use the "create-next-app" command,

that you can run in a terminal

with "npx" as shown here.

That command will ask you a few questions,

like the name of your project,

if you want to use TypeScript

rather than plain JavaScript,

and a few other things,

and then it will generate a project for you,

with everything already set

up based on your choices.

This is very convenient,

and I definitely recommend

using "create-next-app",

once you're familiar with Next.js.

However, it's not really the best choice when

learning Next.js for the first time,

because "create-next-app" generates a

project with lots of different files,

using many different features,

and it can be a bit overwhelming

to start that way.

So we'll set up our first

project manually instead,

and add one feature at a time,

to make sure you fully understand

all the various moving parts.

Let's see how to do that.

I'll use Visual Studio Code as my editor,

and this is just its initial Welcome screen.

To create a new project, I'll

go and Open a folder.

Now, I like to keep all my projects

in a folder called "Projects",

but you can select a different location on your machine,

of course.

The important thing is that we want to

create a New Folder inside there,

and call it "next-reviews",

that will be the name of our project.

With this new folder selected,

I can now click Open,

and this will show that folder

in Visual Studio Code.

Right now it's completely empty.

Let's go and create a new file,

called "package.json",

that we'll use to manage our project with "npm".

This file must contain a JSON object,

with at least the "name" of our project,

that is "next-reviews".

Then we want to set the "private"

property to "true",

because this is not a package we want

to publish to the npm registry.

At this point we can save this file.

Now I'll open a New Terminal,

and I'm using the menu just to show

you where to find the right item,

but I'll be using a keyboard shortcut from now on.

Also, I'm using the terminal integrated with

Visual Studio Code

just so everything is in the same window,

but you can use a separate terminal if you prefer,

of course.

Anyway, what we want to do

here is run "npm install"

to download the necessary dependencies

for our project.

We need "next", that is the Next.js package,

and also "react" and "react-dom",

because Next.js is built on top of React.

This will download everything that's needed.

As you might know, npm saves all the files

inside the "node_modules" folder.

In fact, inside here we can see the

three packages we requested,

along with all their transitive dependencies.

Ok. We can close the Terminal for the moment.

What we need now in our project is

a folder where to put our pages.

And in this example we'll use the "app" folder,

that is the new Next.js router.

Inside this folder we need a

file called "layout.jsx".

This will contain the "root layout",

that is like a template HTML

document for all our pages.

This file must export a React component

as the "default" export,

and we'll write a function component,

called "RootLayout".

The component name doesn't actually matter,

the important thing is that

it is the default export.

Here we'll return some JSX elements,

and since this is the template for all our pages

we want to start with the "html" element,

which then contains the "body".

It's also good practice to set the

"language" for the document;

let's write "en" for English.

So, this is a minimal HTML document.

Since this is effectively a template,

we'll want to insert the contents

for each page here.

We can do that in the standard React way.

Like all components, this RootLayout

will receive some "props".

And we can use the object destructuring syntax

to extract individual properties.

Each layout component will receive

a property called "children",

that will contain the elements

for a specific page.

So what we want to do is simply insert the "children"

as a JSX expression inside the "body".

We'll see this in action after

we create our first page.

Let's save this RootLayout now.

By the way, I'll use ".jsx" as the extension

for all files that contain JSX code,

which effectively means any file

that contains a React component.

You can use ".js" instead for

all the files if you prefer,

but I think it's clearer to

use a different extension

for the files that contain React

components with JSX code,

as opposed to regular JavaScript files.

Anyway, let's see how to run our app,

in the terminal.

Inside "node_modules" there's

a folder called ".bin"

where npm puts all the executable commands

installed along with the packages

in our dependencies.

And there is a command line tool called "next",

that we can use to manage our Next.js project.

We can run it with "npx",

that will automatically find

it in the right folder,

and if we pass the "--help" option

it prints some usage instructions.

The "next" tool accepts a command, that can be "build",

"start", and so on.

What we're interested in right now is "dev",

that will start a local development server.

So, let's try running "next dev".

You can see that it started a server

on our local machine on port 3000.

If we click this link it will

open it in the browser,

and, at the moment, it just shows a 404 page,

saying "this page could not be found".

That's because we haven't actually

created any pages in our app yet.

But this already shows that

the dev server is working.

We'll create a home page in the next video.

Before concluding, note how running "next

dev" created a folder called ".next".

This contains lots of files generated

automatically by the server.

We don't really need to worry

about what's in there.

But if you use Git for version control,

you'll want to create a ".gitignore" file

listing all the files and folders

that should not be added to Git.

Here you want to include that ".next" folder,

along with "node_modules",

that contains all the packages downloaded by npm.

You don't have to use Git for this course,

but I'm sure you'll use a version control

system in a real world application.

Anyway, we set up our Next.js project,

by installing the dependencies

listed in package.json.

Then we created a RootLayout component

inside the "app" folder,

and started a local server by running "next dev".