First, let’s set up the files:
[id].js
inside the pages/posts
directory.first-post.js
inside the pages/posts
directory — we’ll no longer use this.Then, open pages/posts/[id].js
in your editor and paste the following code. We’ll fill in ...
later:
import Layout from '../../components/layout';
export default function Post() {
return <Layout>...</Layout>;
}
Then, open lib/posts.js
and add the following getAllPostIds
function at the bottom. It will return the list of file names (excluding .md
) in the posts
directory:
export function getAllPostIds() {
const fileNames = fs.readdirSync(postsDirectory);
// Returns an array that looks like this:
// [
// {
// params: {
// id: 'ssg-ssr'
// }
// },
// {
// params: {
// id: 'pre-rendering'
// }
// }
// ]
return fileNames.map((fileName) => {
return {
params: {
id: fileName.replace(/\.md$/, ''),
},
};
});
}
Important: The returned list is not just an array of strings — it must be an array of objects that look like the comment above. Each object must have the params
key and contain an object with the id
key (because we’re using [id]
in the file name). Otherwise, getStaticPaths
will fail.
Finally, we'll import the getAllPostIds
function and use it inside getStaticPaths
. Open pages/posts/[id].js
and copy the following code above the exported Post
component:
import { getAllPostIds } from '../../lib/posts';
export async function getStaticPaths() {
const paths = getAllPostIds();
return {
paths,
fallback: false,
};
}
paths
contains the array of known paths returned by getAllPostIds()
, which include the params defined by pages/posts/[id].js
. Learn more in the paths
key documentationfallback: false
for now — we’ll explain that later.We’re almost done — but we still need to implement getStaticProps
. Let’s do that on the next page!