The getStaticPaths() function in NextJS is used to pre-generate static pages for dynamic routes.
For example, we can create a page that has dynamic parameters like `user/[ID]` and then we can create a static version for every possible value of the dynamic parameter. In our case, if the dynamic parameter ID limits up to 3 we can create static pages like `user/1`, `user/2`, and `user/3`.
Syntax:
export async function getStaticPaths() {
// your code here
return {
paths,
fallback,
}
}
Return type: Object with two parameters-paths, fallBack
- paths is an array that contains the value of the dynamic parameter of the pre-generated static pages.
- fallBack is a variable that controls the action when the user is trying to access a page whose dynamic parameter is not listed in the paths array.
- The fallBack property has two values:
- false: The `false` value is the default value of the fallback property. If the request of the user is not listed in the paths array the NextJS will return a 404 page as the result.
- true: The `true` value tells the NextJS to generate the static version for the request of the user on the fly.
- The fallBack property has two values:
Steps to create a NextJS application:
Step-1: create a next app and name it using the following command:
npx create-next-app example
Step-2: create a User folder in the pages folder in the app-hierarchy
pages/User
Step-3: create a dynamic page in the User folder
pages/User/[userId].js
Project Structure:
App-Hierarchy
Example 1:
[userId].js file:
Javascript
import { useRouter } from 'next/router'; // useRouter access the current route // and its dynamic Parameters function User(props) { const router = useRouter(); const { userId } = router.query; // Destructuring the query of the // router to extract userId return ( <div> <h1>Geek {userId}</h1> <p>Geek {userId} is Viewing...</p> </div> ); } export async function getStaticPaths() { return { paths: [ { params: { userId: '1' } }, { params: { userId: '2' } }, { params: { userId: '3' } }, ], fallback: false // If the page with the userId is // not found, returns 404 page }; } export async function getStaticProps({ params }) { const { userId } = params; const User = { id: userId, title: `Geek ${userId}`, content: `Geek ${userId} is Viewing...` }; return { props: { User } }; } export default User; |
Explanation:
- The useRouter hook is used to access the current router and its dynamic parameters. In this example, the useRouter is used to extract the userId from the current router by destruction.
- The getStaticPaths() function is used to create the static pages for all possible values of the dynamic parameters. In this example, we are passing the userId’s (1, 2, 3) into the params.
Output:
output
Example 2: use of getStaticPaths() with API
[Id].js
Javascript
export async function getStaticPaths() { const users = await result.json(); const paths = users.map((user) => ({ params: { id: user.id.toString() }, })); return { paths, fallback: false }; } export async function getStaticProps({ params }) { const result = await fetch(`https://.../MAjhqg/data/${params.id}`); const user = await result.json(); return { props: { user } }; } export default function UserPage({ user }) { return ( <div> <h1 style={{ paddingLeft: 40 }}>Name: {user.name}</h1> <p style={{ paddingLeft: 40 }}>Id: {user.id}</p> </div> ); } |
Explanation:
- In this example, getStaticPaths() fetches a list of all userIds from the API and generates an array of objects with the params key for each id.
- getStaticProps() fetches the user data for the given id and returns it as props to the page component. Finally, the page component displays the product data.
Output:
output
Steps to build and execute the above examples:
npm run build
Steps to execute the code:
- use the command:
npm run dev
- open your browser and go through the following links to see the output
- `http://localhost:3000/User/1`
- `http://localhost:3000/User/2`
- `http://localhost:3000/User/3`
