Here is some essential information you should know about dynamic routes.
Like getStaticProps
, getStaticPaths
can fetch data from any data source. In our example, getAllPostIds
(which is used by getStaticPaths
) may fetch from an external API endpoint:
export async function getAllPostIds() {
// Instead of the file system,
// fetch post data from an external API endpoint
const res = await fetch('..');
const posts = await res.json();
return posts.map((post) => {
return {
params: {
id: post.id,
},
};
});
}
npm run dev
or yarn dev
), getStaticPaths
runs on every request.getStaticPaths
runs at build time.Recall that we returned fallback: false
from getStaticPaths
. What does this mean?
If fallback
is false
, then any paths not returned by getStaticPaths
will result in a 404 page.
If fallback
is true
, then the behavior of getStaticProps
changes:
getStaticPaths
will be rendered to HTML at build time.If fallback
is blocking
, then new paths will be server-side rendered with getStaticProps
, and cached for future requests so it only happens once per path.
This is beyond the scope of our lessons, but you can learn more about fallback: true
and fallback: 'blocking'
in the fallback
documentation.
Dynamic routes can be extended to catch all paths by adding three dots (...
) inside the brackets. For example:
pages/posts/[...id].js
matches /posts/a
, but also /posts/a/b
, /posts/a/b/c
and so on.If you do this, in getStaticPaths
, you must return an array as the value of the id
key like so:
return [
{
params: {
// Statically Generates /posts/a/b/c
id: ['a', 'b', 'c'],
},
},
//...
];
And params.id
will be an array in getStaticProps
:
export async function getStaticProps({ params }) {
// params.id will be like ['a', 'b', 'c']
}
Take a look at the catch all routes documentation to learn more.
If you want to access the Next.js router, you can do so by importing the useRouter
hook from next/router
.
To create a custom 404 page, create pages/404.js
. This file is statically generated at build time.
// pages/404.js
export default function Custom404() {
return <h1>404 - Page Not Found</h1>;
}
Take a look at our Error Pages documentation to learn more.
We have created several examples to illustrate getStaticProps
and getStaticPaths
— take a look at their source code to learn more:
In the next lesson, we’ll talk about API Routes in Next.js.
Quick Review: You want to dynamically create product pages with the path pages/products/[id].js
, where [id]
refers to a specific product ID. What is the correct way to implement this?