We made our PostPage a dynamic route,
so the same page component will be used
for all the posts.
And the "paths" we return
in the "getStaticPaths" function
will inform Next.js of
which posts actually exist.
But why do we need to write
each post slug manually in here?
We could just look at the "content/posts" folder,
see which Markdown files it contains,
and generate the list of
static paths automatically.
This way if we add more Markdown files
they will automatically be visible as post pages.
This is exactly what we'll do in this video.
Just like we have a "getPost" function
that reads a Markdown file,
we can add another function
that will list all the files
and return their "slugs".
Now, how do we get a list of files?
In addition to "readFile"
the Node.js file system modules
provides a "readdir" function.
And we can use this function
to read all the files
inside our 'content/posts' folder.
"readdir" returns an array of files,
and it's asynchronous.
At this point we have
the list of files
so our files array will contain
the file names a strings:
'first-post.md' and 'second-post.md'.
But in our "getSlugs" function
we want to return just the "slugs",
that are effectively
the file names but without extension.
So we want to take the files array
and transform it.
First I'd like to filter it
and keep only the files
that end in '.md'.
Just in case there are any other files
inside that folder
that are not Markdown
we should just ignore them.
And then we want to "map", or transform,
each file to remove its extension.
For that we can use the "slice" method,
and we want to keep all characters
from the beginning of the string
up until 3 characters from the end,
so "-3".
Let me show you quickly why "-3".
If we have a string with the file name,
like "some-post.md",
then "slice" from 0 to -3
will return "some-post".
".md" is 3 characters,
so to stop before that we write -3.
In fact, we could actually make this
more explicit in our code
by defining a constant called "suffix",
which is our file extension
and then instead of '.md'
we can use that "suffix".
And instead of this magic number,
we can write "suffix.length".
That's the same thing
but it should be more readable.
Anyway, this function should now return
all the "slugs" for our posts
based on the Markdown file names.
Now we can go and use our new function
inside "getStaticPaths".
We'll get all available "slugs"
by awaiting the result
of calling "getSlugs".
Now we want to use the "slugs"
to generate the "paths".
I'll write it above the old "paths" for now.
"slugs" is an array of strings,
so we want to transform each element
into an object,
because each element in the "paths" array
must contain a "params" property.
And inside "params" we can
simply pass our "slug" value.
So our new "paths" array
contains the same type of elements
as our old one.
And we can delete the old one now.
Let's save,
and check if this works.
The "second-post" page is still working.
Now, if we start from "Home"
and open the "First Post"
this also works.
So the existing paths are still valid.
But now we can try adding another post.
I'll simply duplicate the "second-post"
and call it "third-post".
Then change the content as well
to say "third" everywhere.
And just by adding that new Markdown file
we should now be able to request
the "third-post" path
and this shows a page
with the content loaded from the new file.
This worked without us
having to write "third-post" manually
in the "getStaticPaths" function
because now it automatically finds
all the available Markdown files
by reading the directory contents.