Optional Catch-all Segments and generateStaticParams

[BrieucCaillot]

Summary

Informations

"next": "^13.3.0"

My /app structure

app
/blog/company/[[..slug]]/
- BlogArticlePage.tsx
- BlogArticleSlug.tsx
- page.tsx

Hi,
I'm trying to statically generate my /blog/company pages using the optional catch all segments feature but I encounter the following error from the generateStaticParams inside my page.tsx :

info - Collecting page data ...Error: A required parameter (slug) was not provided as an array received string in generateStaticParams for /blog/company/[[...slug]].

I was expecting this error because for the /blog/companydoesn't need a slug, but i'd like for both /blog/company & /blog/company/[slug] to be static rendered.

Find below my page.tsx file

/app/blog/company/[[...slug]].page.tsx

Additional information

import { previewData } from 'next/headers';
import { redirect } from 'next/navigation';

import BlogArticlePage from './BlogArticlePage';
import BlogArticleSlug from './BlogArticleSlug';

import PageWrapper from '@/components/wrapper/PageWrapper';
import { request } from '@/helpers/datocms';
import { pageMetadata } from '@/helpers/metadata';
import { PageSeo } from '@/query/HeadQuery';
import { BlogArticleQuery } from '@/query/ModelQuery';

const queryAllSlugs = `
{
	allCompanyArticles {
		slug
	}
}
`;

export async function generateStaticParams({ params }: { params: any }) {
	const data = await request({
		query: queryAllSlugs,
		variables: { limit: 10 },
		preview: false,
	});

	const allCompanyArticles = data.allCompanyArticles;

	return allCompanyArticles;
}

const query = (slug: string) => `
{
  companyArticle(filter: {slug: {eq: "${slug}"}}) {
    ${BlogArticleQuery}
    ${PageSeo}
  }
  allCompanyArticles(first: 10, orderBy: date_DESC) {
    ${BlogArticleQuery}
  }
}
`;

async function getData(slug: string): Promise<any> {
	const dataPreview = previewData();
	const isPreview = !!dataPreview;

	const data = await request({
		query: query(slug),
		variables: { limit: 10 },
		preview: isPreview,
	});

	return data;
}

export async function generateMetadata({ params }: { params: any }) {
	if (!params.slug)
		return pageMetadata({
			title: 'Company',
			description: 'Latest news and updates.',
		});

	const { companyArticle } = await getData(params.slug);
	const { seo } = companyArticle;

	return pageMetadata(seo);
}

export default async function Page({ params }: { params: any }) {
	const data = await getData(params.slug);

	if (params.slug && !data.companyArticle) redirect('/blog/company');

	return <PageWrapper>{params.slug ? <BlogArticleSlug blogArticle={data.companyArticle} /> : <BlogArticlePage allBlogArticles={data.allCompanyArticles} />}</PageWrapper>;
}

Example

No response

[aleczratiu]

Any updates here?

[tomellwood-github]

This was working in Next@13.2.4, but after updating to next@14.0.4 it is producing the same error. Expecting and array but received string|number

[morfies]

In your allCompanyArticles, can try to return the slug as an array:

{
slug: [slug]
}

Seems for the catch-all generateStaticParams, this part is different with other dynamic routes.

[codenomnom]

I can confirm that almost an year and a half later - this is still an issue. And returning array of what you actually want fixes it (check @morfies answer).