So did you succeed?
Let's now create those routes together.
And I will start with the meals route.
Now, for that, we should go to that app folder
because that folder has a special role
in NextJS projects as you learned.
And in there we can set up a new route
and a new path segment that can be entered in the URL
by simply adding a folder
with that intended path segment as a name.
So for example, meals if we want to be able to go
to our domain slash meals.
Now, as I also mentioned
before, adding just a folder like this
won't do anything though.
Instead you must add a page.js file here
to show something on the screen.
And then in this page.js file,
you should export a component, a React component,
a functional component to be precise.
In this case, you could name it MealsPage,
though this name here, as I mentioned, doesn't matter,
it's totally up to you,
but you must export a component, that's important.
And then here I'll simply return an H1 element
where I say meals page,
that's of course just some dummy content
and we're going to replace it
with more meaningful content later.
But with that added, we got the first route.
Now the goal also was to add a nested route
in that meals folder
so that we can also visit slash meals slash share.
And for that we can simply create a nested folder
with again, that path segment that we want to have
as a folder name.
And again, we need a page.js file in there in order
to be able to visit that.
And then of course, export a component function.
So here are the share meal page,
that sounds like a fitting name.
And then I'll return an H1 element where I say share meal.
Now with that, we got two
of those three routes you should add.
But there also is another route,
not nested into the meals folder,
but instead a sibling to the meals folder.
And that is the community route.
And again, in here we add a page.js file,
and then export our community page component here,
and then simply return H1 community.
Now with that, we got those three routes set up,
but I also told you to add some links that allow users
to navigate between those routes.
And therefore that's exactly what I'll do here.
And I'll start on the homepage actually.
There, below this H1 element, I'll add a paragraph
that should display a link to the meals page.
And for that, as you learned,
you should use the link component provided by NextJS.
This is a component that renders an anchor element,
but that also allows NextJS to gain control
of the ongoing navigation
and keep you in that single page application.
So here, if I want a link that takes me to the meals page,
we can use the link component
and then simply set the href attribute
or the href prop to slash meals.
And of course, now we can also add extra links now,
for example, one that leads
to slash meals slash share like this.
And then I'll add one last link that takes me
to the community page
by pointing at slash community.
And of course, these paths, which I'm setting up here,
do map to the paths I set up in my folder structure.
So slash meals goes to this page, meals share goes
to this page or this folder
and community goes to this folder.
And then of course,
the respective page JS files become active.
So that's how that works.
And if you now save that
and you then make sure that the development server is up
and running, which is the case on Code Sandbox,
but which you have to start manually locally, by the way,
locally in order to start it, you also have
to run npm install first
and then you should be able to start it.
And if you make sure that that's the case,
you can visit local host 3000
or whichever address is showing up
for you here when you start that development server.
And you should be able to see that starting page.
Now those links here are a bit hard to read.
This is of course not the final styling,
we'll make this app look better throughout this section.
But we have these links at least, and we can click them.
And if I click the meals link, I'm taken to the meals page.
So that works.
If I click the share meal link, I'm taken
to slash meals slash share, and that also works.
And if I click the community link, I'm unsurprisingly taken
to slash community and that community page.
And with that, we added these three routes.
Now, there also was another task
to also create a dynamic route that allows users to go
to slash meals slash some dynamic segment,
some identifier of the meal a user wants to view.
And you also learned how that can be done.
For that, back in that app folder,
back in that meals folder,
since that page that should be added is nested
inside the meals path,
it's slash meals slash some dynamic element.
And therefore inside of that meals folder,
we add another sub folder,
which is a sibling to the share folder.
And we turn that into a dynamic route here
by adding square bracket to the folder name.
And then between those square bracket, as you learned,
you put any identifier of your choice, for example,
meal slug, but again, this is up to you.
With that added though,
you can then add your page.js file.
And now this page here will become active
whenever the user enters the address slash meals slash
something, which is not shared though
because NextJS is smart enough to understand
that if you are visiting slash meals slash share
that it's this page that should become active
and not this dynamic page,
even though theoretically share could be treated as a value
for this dynamic segment.
But NextJS is smart enough to see
and understand that there is a more
specifically named folder, which therefore has precedence
over this dynamic segment.
But anything but share like something or ABC,
or my dash meal will be treated as a value
for this dynamic segment
and will lead to the activation of this page.js file.
And therefore with that here we can export
another component function,
which could be named meal details page
where I want to output the title here
where I say meal details like this.
And with that done, if we now save this,
we can also visit slash meals slash ABC
or slash something.
However, as mentioned, if we visit slash meals slash share,
we go to the share meal page, so that works as intended.
And that's then this exercise solved.
With that, we repeated what we learned
and you got more practice with this file-based router
that's provided by NextJS.
And we're therefore now ready
to finally start working on the contents of those pages
and on making this website more useful and beautiful.