In this video we'll create a new project
for our Shop website.
And this time we'll use
the Create Next App tool,
rather than starting entirely from scratch.
So let's open a terminal,
and I'll change directory
to my "Projects" folder,
same place I used for our first example.
Here we can run "npx create-next-app"
and then the name of the new project,
that is "next-shop".
This will take a few seconds,
to download all the necessary packages.
Ok, so now we should see
a new folder called "next-shop",
containing our new project.
Let's open that folder in Visual Studio Code.
And this is the initial project
as generated by Create Next App.
In the package.json you can see
the same dependencies we manually installed
in our first example,
that are "next" and "react".
And we have the same
"dev", "build", and "start" scripts.
There's also an additional script called "lint",
along with "eslint" in the "devDependencies".
As you might know, ESLint is a tool
that can help you find problems in your code.
The project includes a "README" file,
that initially has some instructions
on how to run the development server.
There's a "pages" folder,
that contains an "index" page,
and also "_app.js".
Now, this "api" folder also contains
something we haven't seen yet:
this is called an API route.
But let's not worry about this for now,
we'll cover it later in the course.
In fact, we can just delete
this "api" folder for the moment.
If we look at "_app.js"
it's a minimal App component
that imports some global CSS styles.
While in "index.js"
we have a Home page component,
with some initial content.
There's also a "public" folder,
with a "favicon"
and another image that is the Vercel logo.
Under "styles"
there's a "globals.css",
setting things like the "font-family".
And then there's a "Home.module.css".
This defines some styles used in the Home page.
This is using "CSS modules",
rather than "styled-jsx" like we did
in our first example.
Then there's a configuration file for ESLint,
and by the way if you want to see
the ESLint suggestion in Visual Studio Code,
you can install this extension.
It should be the first result
if you search for "eslint".
Back to our project, there's a ".gitignore"
with files that should be
excluded from version control.
And then there's a "next.config.js"
that contains configuration specific to Next.js.
We can usually leave it as it is.
Now, let's run this app
and see what it looks like.
In the terminal we can launch
"npm run dev" as usual
to start the development server.
Let's open the URL in a web browser.
And this is the Home page
generated by Create Next App.
It's just some initial content that
we're going to completely replace anyway.
The code generated by Create Next App
tends to change from time to time,
so by the time you watch this video
it may be slightly different.
But that doesn't really matter, because
what I'm going to do now is
delete all the JSX elements from this Home component.
And we're going to write
our own content instead.
We can start with a "title" in the "Head" section,
saying "Next Shop".
Then add a "main" section,
with a heading that also says "Next Shop".
And this will do for now.
I'm going to add some semicolons,
because the generated code doesn't have them.
It's just a matter of preference
which coding style you want to adopt,
but we did use semicolons in our first example,
so let's keep doing that for consistency.
We can also remove these two imports,
that were only used by the old code.
I'll move the "export" statement at the bottom,
again just for consistency.
And in the same vein,
I'll rename the component to "HomePage".
Ok, let's save this file.
And this is our new very basic Home page.
Let's open the Dev Tools,
always useful while developing.
And this is the Home page sorted,
now let's look at the other files.
We can delete this "vercel.svg" image
that was used in the Home page.
And likewise we can get rid of this
"Home.module.css" file.
As for the global styles,
we can keep them for now.
We'll get back to styling later on.
Those styles are imported by "_app.js",
which is the custom app component.
Again just for consistency
let's add semicolons everywhere in this code.
And I'll also rename the component to simply "App",
like in our Blog example.
Ok. This is enough as a starting point.
We generated a new project with Create Next App,
and removed a few things we don't need.
So we're now ready to start adding
our own functionality.