Let's get started doing some setup for this next j ust project.
Now all we really have to do is install a couple of dependencies write out a script or two and that's
how we get started with Next j us.
There's no real generator or anything like that that we have to run or install.
So I gonna get started by going over to my terminal.
I'm gonna make sure I'm inside my ticketing directory.
I'm going to create a new folder inside this directory called client I'll then change into client and
I'm going to generate a package not just on file inside there.
By running empty minute dash y.
There's my package on JS on file and then going to install three different dependencies.
I'm going to get react react as Dom and next and installing these is just going to take a moment or
two.
So while that's running I'm going to flip back over to my terminal or see with my code editor and we're
gonna start to write out a little bit of code inside this new client directory right here inside the
client directory I'm going to first make a new folder called pages inside this Pages directory.
We're gonna end up writing out several different JavaScript files inside of each of these files.
We are going to export a react component.
Now if you are used to making use of react you might have used react router in the past react router
is all about setting up some routing configuration inside of a javascript file.
But next J works in a very different way in order to setup routing inside of a next J.S. Project.
We're going to have a very particular set of routes or files with very particular file names inside
this page's directory.
So this page is folder right here is a very magic folder whenever Next j s first starts up it's going
to read all the files so we list out inside there and depending upon the file names and possibly some
folders so we create inside there as well.
Next j US is going to interpret those file names as being distinct routes that we can visit inside of
the application.
So let me give you a quick example inside of the Pages directory.
I'm gonna make a new file called indexed J.S. and I'll make another file called.
How about many on the dot.
J.S. so in both of these different files we're going to create a component and then export it as the
default exports are going to first start off inside a banana.
J.S. at the very top I'm going to do an export default.
And I've got to return an H1 that says banana and then going to copy this I'm gonna save this file.
I'm going to go over to index such as the file we just created.
I'll paste inside there and I'll change this one to instead say landing page.
So now whenever we start up our project using next.
Next is going to take a look at the contents of pages that's going to see there are two files inside
of your named index dot J.S. if we have the file name index they'll be used as the root root of our
application.
So now any time we tried to visit next J us or visit this application we should see the content landing
page on the screen if we tried to instead navigate to a route of banana.
So in other words something like local host slash banana.
We should see and each one of banana appear on screen instead.
Again file names.
Map up to rep names.
I'd actually test this thing out.
We need to be able to start up our project to start up a next project.
We're gonna go into our package dot Jason File and we're going to manually write in a couple of scripts
inside of here.
So again with next J we don't get any generators or anything like that.
We just do all the set up very manually because it's a very small amount of setup.
So I to delete the script section or delete the test script inside there and I'll replace it with a
dev script whenever we run this Dev script.
We're going to execute next inside of our project.
That's pretty much it.
It's now to start up our project we'll go back over toward terminal and run NPM run dev to run next.
Now just be really clear.
Right now we are executing or starting up next outside of our Cuba Daddy's cluster.
We are going to be running next inside of Cuba cities.
This is just a very quick demonstration just to get you familiar with this kind of pages style routing
okay.
So back inside my client directory I'll do an NPM run Dev that's going to start up our server on local
ost three thousand.
Now remember you might already have some stuff running on local host 3000 from stuff we did earlier
inside this course.
So if you get some kind of Port air or something like that some kind of startup air you're going to
need to find whatever process you're still running on local three thousand and stop it and so on then
going to go over to my browser and navigate to locos 3000.
And again I'm going to see a landing page on the screen because anytime we come to a route by default
index not just will be loaded inside of the pages directory but now if we go to local three thousand
slash banana we'll see banana instead.
Really the only thing we got to keep in mind here around next is that these file names and some different
folders we create inside of here as well.
They're going to map up to actual routes that we can visit inside the browser.
So now that we've got the basics of next but together quick pause and we'll continue development in
just a moment.