Catch-all routes and SSG

[Timer]

@dpfavand in that case you'll want to use a catch-all route: https://nextjs.org/blog/next-9-2#catch-all-dynamic-routes

Potentially we can warn when you try to return a path including slashes, but the behavior is correct when using [slug].js, in your case you want [...slug].js.

@timneutkens thanks for the follow-up. I've tried two methods without success. Basically when specifying the slug value as a string in getStaticPaths, it isn't passed through to getStaticProps at all. When returning the slug value as an array, the build fails as the value must be a string.

Case 1, Assuming a file pages/[...slug].jsx, slug as string:

export async function unstable_getStaticPaths() {
	return [{ params: { slug: 'en/about' } }];
}

export async function unstable_getStaticProps({ params }) {
	console.log('params', params);
	return { slug: params.slug };
}

In the above case, params in getStaticProps is an empty object - no slug key.

Case 2, pages/[...slug].jsx, slug as array,

export async function unstable_getStaticPaths() {
	const allPaths = Object.keys(pathMap).map(slug => ({ params: { slug } }));
	return [{ params: { slug: ['en', 'about'] } }];
}
export async function unstable_getStaticProps({ params }) {
	console.log('params', params);
	return { slug: params.slug };
}

In case 2, the build fails with

> Build error occurred
{ Error: A required parameter (slug) was not provided as a string.
    at _validParamKeys.forEach.validParamKey (/project/node_modules/next/dist/build/utils.js:21:569)
    at Array.forEach (<anonymous>)
    at toPrerender.forEach.entry (/project/node_modules/next/dist/build/utils.js:21:495)
    at Array.forEach (<anonymous>)
    at Object.isPageStatic (/project/node_modules/next/dist/build/utils.js:17:122)
    at process._tickCallback (internal/process/next_tick.js:68:7) type: 'Error' }

Originally posted by @dpfavand in #9524 (comment)

[dpfavand]

Thanks for the quick response to this. Unfortunately I don't think this is fully resolved:

On 9.2.1-canary.5,

With exportTrailingSlash: true in next.config.js,

With template pages/[...slug].jsx,

export async function unstable_getStaticPaths() {
	return [{ params: { slug: ['en_CA', 'about'] } }];
}

export async function unstable_getStaticProps({ params }) {
	console.log('\nparams', params);
	const { slug } = params;
	const props = {
		props: {
			slug,
		},
	};

	return props;
}

The build works, but the nested directories created are not as (I) expected:

Note the directory named en_CA%2Fabout:

This is the build console output. Note the slug is passed to getStaticProps as a single string within an array (params { slug: [ 'en_CA/about' ] }):

What I think is expected behavior - let me know if I'm off here:

• The directory structure should be created to match the the catch-all path
• The slug value is passed either as an array of strings (as returned from getStaticPaths) OR as a single string (concatenated with /), but not a single string within an array.

[eagor]

I'm having similar issue today. In development it runs well, but when building production. In my catch-all-routes component that I generate static paths for, the router.query object is empty on first run.

[egemon]

Having similar issue as @eagor described, but without catch-all-routes

[beavanzi]

@eagor @egemon i'm experiencing the similar issue, my components mounts three times at running in dev environment and router.query always starts empty :( that makes my static page has such CSR behavior and I don't think it's right.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.