All language subtitles for 002 Setting Up The Core Pages_Downloadly.ir_en

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.