In this video we'll create
our first Next.js project.
Now, the easiest way
to initialise a Next.js application
is to use the "create-next-app"
command line tool,
and we'll look at this tool
later in the course.
But to begin with
I want to show you how to set up
a new project entirely from scratch,
because this will give you
a better understanding of
how a Next.js app is structured.
Here I have Visual Studio Code open,
with its default Welcome screen.
What I'm going to do now
is open a folder,
I'll select my "Projects" folder,
which is where I like to keep my projects.
And inside there I'll create a new folder,
let's call it "next-blog".
since it's a blog written using Next.js.
So I'm going to open this new folder
in Visual Studio Code.
Right now it's just empty of course.
Now, let's go and create a new file
called "package.json",
so we can use npm to manage
the project dependencies,
like all modern JavaScript projects.
Here we need at least a "name",
that we can set to "next-blog",
same as the folder name.
And then let's set "private" to "true",
because this project is not a library
that we want to publish to the npm registry.
Ok, let's save this file.
Now I'm going to open a new Terminal,
inside Visual Studio Code.
And here we can use the "npm" command line tool
to install some dependencies.
We want the "next" package, that's Next.js,
and then "react" and "react-dom",
just like a regular React web app.
Let's wait a few seconds
for npm to download all the dependencies.
Ok. You can see that
those three packages have been added
to our "package.json" file under "dependencies".
And also there's a "node_modules" folder
with all the packages.
Now, inside here there's a ".bin" folder,
that contains command line tools
installed along with the packages.
And one of these tools is "next".
This is the main tool we can use
to manage our Next.js project.
Let's see how it works.
In the terminal we can use "npx"
to execute that "next" command directly,
and we can pass the "--help" option
to see some usage instructions.
It says that we can tell this tool
to "build", "start", "export", and so on.
In fact, the first command
we want to use is "dev",
that starts our project
in the development server.
Let's try that out.
Let's run "npx next dev",
and it failed with an error.
What the error says is
"Couldn't find a pages directory"
"Please create one".
That's a helpful message:
not only it says what the problem is,
it also tells us how to fix it.
So let's go and create a new folder
at the top level of our project
named "pages".
Now, since we're going to use
that "next dev" command all the time
I'll add a "scripts" section
to our "package.json" file,
and here configure a "dev" script
that will execute "next dev".
This way, if we go back to our terminal
we can now type "npm run dev"
and this will take care of
launching "next dev"
as defined in our "scripts".
You can see that, now that we have a "pages" folder,
the development server started successfully.
And it's running at this URL:
localhost on port 3000.
Let's open it in the web browser.
What we get at the moment is a "404 not found" page,
which is not entirely surprising,
given that we haven't created any pages yet.
But this already shows that
the development server is working.
I'll resize these windows, so I can show you
the editor and the browser side by side.
And let me hide the Terminal.
The dev server will still be running
in the background of course.
It is now time to create
our first Next.js page.
Inside our "pages" folder
we want to add a new file,
which we want to call "index.js",
because it will be the index page
of our application.
But, what exactly is a "page" in a Next.js project?
For now, you can think of a "page"
simply as a standard React component.
Let's write a function component called "HomePage",
since that's what the "index" page is.
And here we'll return some JSX elements,
like all React function components.
I like having a "main" element
as the root of a page, to use semantic HTML.
And here we could have a simple "h1" heading,
saying "My Blog" for example.
So this is just a very simple React component.
The only other thing we need to do
is to export the component
as the default export of this file.
With this, we can now save the file,
and try and reload the same URL in the browser.
You can see that it works!
Our HomePage component is being displayed
as the index page of our application.
I'll open the Chrome Developer Tools,
so we can see any Console messages.
And, since we're running our Next.js app
in development mode
this means that if we make any changes to our code
like if I write "Mirko's blog" here
as soon as I save
the app updates automatically,
reflecting the latest changes.
As you would expect when working with
a modern web framework.
Let me quickly revert this change.
Now, before we move on, note how the "next" command
created a ".next" folder in your project.
You don't really need to worry about
what's inside here,
but if you use Git in your project
make sure to add that folder
to your ".gitignore" file,
because it contains temporary build files,
that shouldn't be kept in version control.
Just like you want to ignore
the "node_modules" folder with all the dependencies.
So this was just a quick note if you use Git.
But with that aside,
we created our first Next.js project
and wrote our first "page",
which, as it turns out,
is simply a normal React component.
But as simple as this page may look right now,
believe it or not there's already
a big difference between
how this page is rendered with Next.js
and how a similar page
would be rendered in a plain React app.
We'll see exactly what's different
in the next video.