Statically generate dynamic routes at build time in Next.js 14

Over the years, Next.js has continuously evolved, introducing and refining features to enhance web development. If you've worked with earlier versions of Next.js and have recently started using Next.js 14 or the App router, you'll encounter some changes, such as in generating static paths from dynamic routes.

I recently initiated a Next.js project that included a dynamic route for fetching blog posts from an API. While everything functioned smoothly, I encountered an issue upon attempting to build my project by deploying it on the Kinsta's static site hosting:

I use the Kinsta static site hosting for my static site projects because it offers the capability to deploy up to 100 sites at no cost. Additionally, it provides a secure URL for each deployed site.

The error message, "Error: out directory does not exist," implies that the deployment process is searching for a directory named 'out', which should contain the built version of your Next.js project, but fails to locate it. This directory is typically generated upon executing the next build command.

This issue arises because the project has a dynamic route that dynamically generates pages at the time of request (SSR) and aims to pre-render them for static hosting.

Generating Static Paths for dynamic routes in Next.js 12 and earlier

In previous versions of Next.js, you could generate static paths for dynamic routes using the getStaticPaths function. This function is used to generate a list of paths to pre-render based on data. It is typically used with dynamic routes to pre-render a page for each path. Here's an example of how to use getStaticPaths:

export async function getStaticPaths() {
	const response = await fetch('https://jsonplaceholder.typicode.com/posts');
	const posts = await response.json();

	const paths = posts.map((post) => ({
		params: { postId: post.id.toString() },
	}));

	return { paths, fallback: false };
}

In this example, the getStaticPaths function fetches posts from an API and maps each post to a params object containing the postId. This object is then returned as an array of paths to pre-render.

The fallback key is set to false to ensure that the page is pre-rendered for each path. If the fallback key is set to true, the page is pre-rendered for paths specified in the paths array and other paths are generated on-demand at request time.

But with the introduction of Next.js 14, the getStaticPaths function is no longer used to generate static paths for dynamic routes. Instead, the generateStaticParams function is used to generate a list of params for dynamic routes.

Using generateStaticParams to generate static paths for dynamic routes in Next.js 13 and 14

The generateStaticParams function is used to generate a list of params for dynamic routes. It is typically used with dynamic routes to pre-render a page for each path. Here's an example of how to use generateStaticParams:

export async function generateStaticParams() {
	const response = await fetch('https://jsonplaceholder.typicode.com/posts');
	const posts = await response.json();

	return posts.map((post) => ({
		postId: post.id.toString(),
	}));
}

In this example, the generateStaticParams function fetches posts from an API and maps each post to a params object containing the postId. This object is then returned as an array of params to pre-render.

The generateStaticParams function executes prior to the generation of corresponding Layouts or Pages. It is used to generate static paths for dynamic routes at build time, rather than on-demand at request time.

This approach ensures that when you build your Next.js project, routes are pre-rendered at build time, and HTML files for each post are generated accordingly.

When using the generateStaticParams function, ensure that the function is exported from the file containing the dynamic route. The function should be named generateStaticParams and should return an array of params objects. The params object should contain the keys and values that correspond to the dynamic route parameters.

Also, ensure you enable static exports in your Next.js project. Static exports allow you to generate static HTML files for your application, which can be deployed to a static site hosting platform.

In your Next.js project, you can enable static exports by changing the output mode inside next.config.js:

const nextConfig = {
	output: 'export',
};

When you enable static exports in your Next.js project, the next build command generates an out folder containing the HTML/CSS/JS assets for your application. This folder can be deployed to a static site hosting platform.

Wrapping up

In this article, I've explained how to generate static paths for dynamic routes in Next.js 14 using the generateStaticParams function. This function is used to generate a list of params for dynamic routes and is typically used with dynamic routes to pre-render a page for each path.

There is more to rendering in Next.js, but I hope this article helps you understand how to generate static files for dynamic routes with the generateStaticParams function.

---

---