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".