Now the question is how do we get started
with this project though?
And there are different ways
it's of course, up to you, which approach you prefer,
but I personally like to get started with my pages
that gives the project a general structure,
and I can then plan my other components
around those pages which we need.
So I'll start in this pages folder and here for this block,
we need a couple of pages.
We need the starting page,
which shows the featured blog posts
and our little welcome screen.
We need the contact page,
which shows that form users can fill out.
We need the page for all the blog posts
and we need the individual blog post page.
And therefore in the pages folder,
I'll start with the starting page
by adding an index.js file in the pages folder.
Now in there, we can create our homepage component function
and export that as a default here, like this.
And I'll copy that basic code
because I'll create functions in the same way
in the other pages.
And for example, in the contact page, we also need that
and hence we can add a contact.js file
here in the pages folder.
Now you'll learnt that the alternative
would be to add a contact folder
with the index.js file in there.
It's up to you, which approach you prefer.
I will go for the context for the contact.js file
and just add my component in there,
the contact page, like this.
Then we also have our posts specific pages.
And for that I'll create a sub folder
because there I'll also need a nested route
with a dynamic segment.
However, I'll start with a different page,
a different route, and that's the all posts page
for this we could add a posts folder
and then an index.js file in there.
And that page will then be loaded for requests targeting
our domain slash posts slash nothing.
So here we have the all posts page, like this.
Then we have the page for a single post.
So when we click on a post,
the page that shows that single post
and that page is dynamic.
It should have a dynamic parameter in the URL,
which identifies that post, something like the post ID.
And therefore we could add id.js file
with id in square brackets
because you'll learnt that this sets up a dynamic page
in next.js which is loaded for different requests
with different IDs in the URL.
And we can then extract the concrete value
that was provided for a given request
from inside that page.
That would work, but I don't wanna work with an ID here.
Now, of course the identifier name here
is totally up to you,
but you should name it such that it reflects
which kind of value you'll extract.
And I don't want an ID here because if we had an ID,
if we do that for a second,
then we would load a single post
for something like slash post slash p1, p2, p3 and so on.
If p1, p2, p3 are our IDs.
And whilst this would work,
it's not very human readable
and also not search engine friendly.
It would be better to have URLs
like /posts/getting-started-with-nextjs.
If our URL would look something like this.
Now, this thing here, is called a slug.
That's what we typically call a slug.
It's also a unique identifier,
we could call it a unique ID therefore
but it is called a slug
and it's basically a human readable sentence
without white space, without special characters.
Simply with words separated by dashes.
And hence here, I want to extract such a slug from my URL
and I expect that I do get these slug identifiers
for the individual posts to have these human readable
and search engine friendly URLs in the end.
That is then the single post page
or the post detailed page.
However you wanna call it.
Now, these are the four main pages which this project needs.
Of course, definitely feel free to add more pages.
It's also your project after all,
and you can enhance it however you want,
but these are the four pages
with which I wanna get started in this project here.