Error: Page "/blog/[slug]/page" is missing param "/blog/testpost" in "generateStaticParams()"

Question

Hi, I'm trying to build a blog following the blog starter example from here: https://github.com/vercel/next.js/blob/canary/examples/blog-starter/src/app/posts/%5Bslug%5D/page.tsxand I'm getting a weird error:Error: Page "/blog/[slug]/page" is missing param "/blog/testpost" in "generateStaticParams()", which is required with "output: export" config.testpost is the name of a markdown file inside my posts folder. Any ideas on what's causing this error?// lib/api.ts
import fs from 'fs';
import matter from 'gray-matter';
import { join } from 'path';

const postsDirectory = join(process.cwd(), 'posts');

export function getPostSlugs() {
  return fs.readdirSync(postsDirectory);
}

type Post = {
  slug: string;
  title: string;
  date: string;
  content: string;
  coverImage: string;
  description: string;
};

export function getPostBySlug(slug: string) {
  const realSlug = slug.replace(/\.md$/, '');
  const fullPath = join(postsDirectory, `${realSlug}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const { data, content } = matter(fileContents);
  return { ...data, slug: realSlug, content } as Post;
}

export function getAllPosts(): Post[] {
  const slugs = getPostSlugs();
  const posts = slugs
    .map((slug) => getPostBySlug(slug))
    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
  return posts;
}(See rest of my code in below comment. Discord limited the number of chars in my post)

Piping Plover · Answer

Rest of my code:

// /blog/[slug]/page.tsx
import { getAllPosts, getPostBySlug } from '@/app/lib/api';
import { notFound } from 'next/navigation';
import markdownToHtml from '@/app/lib/markdowntoHtml';
import Link from 'next/link';
import { Metadata } from 'next';

type Params = {
  params: {
    slug: string;
  };
};

export default async function Page({ params }: Params) {
  const post = getPostBySlug(params.slug);
  if (!post) {
    return notFound();
  }

  const content = await markdownToHtml(post.content || '');

  return (
    <main>
      <article>
        <h1>{post.title}</h1>
      </article>
    </main>
  );
}

export async function generateStaticParams() {
  const posts = getAllPosts();

  return posts.map((post) => {
    slug: post.slug;
  });
}

{post.title}

); } export async function generateStaticParams() { const posts = getAllPosts(); return posts.map((post) => { slug: post.slug; }); }

Error: Page "/blog/[slug]/page" is missing param "/blog/testpost" in "generateStaticParams()"

1 Reply