type

__experimental.SSGPage

type SSGPage<Params extends SSGParamsLike = SSGParamsLike> = React.ComponentType<SSGPageProps<Params>>

React component type for SSG pages that can be statically generated.

This type represents a React component that receives SSG page props and can be rendered at build time. The component can be either a regular React component or an async React Server Component for advanced use cases like data fetching during static generation.

// Regular synchronous SSG page component
const BlogPost: SSGPage<{ slug: string }> = ({ params }) => {
  return (
    <article>
      <h1>Blog Post: {params.slug}</h1>
      <p>This content was generated at build time!</p>
    </article>
  );
};

// Async React Server Component for data fetching
const AsyncBlogPost: SSGPage<{ slug: string }> = async ({ params }) => {
  // Fetch data during static generation
  const post = await fetchBlogPost(params.slug);
  const author = await fetchAuthor(post.authorId);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>By {author.name}</p>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
};

// Product page with multiple params and async data fetching
const ProductPage: SSGPage<{ category: string; id: string }> = async ({ params }) => {
  const [product, reviews] = await Promise.all([
    fetchProduct(params.category, params.id),
    fetchProductReviews(params.id)
  ]);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Category: {params.category}</p>
      <p>Price: ${product.price}</p>
      <div>
        <h2>Reviews ({reviews.length})</h2>
        {reviews.map(review => (
          <div key={review.id}>{review.comment}</div>
        ))}
      </div>
    </div>
  );
};

Referenced types

interface SSGPageProps<Params extends SSGParamsLike = SSGParamsLike>

Props interface for SSG page components.

This interface defines the shape of props that will be passed to your static page components during the build process. The params object contains the route parameters extracted from the URL pattern.

// Blog post component props
interface BlogPageProps extends SSGPageProps<{ slug: string }> {
  // params: { slug: string } is automatically included
}

// Product page component props
interface ProductPageProps extends SSGPageProps<{
  category: string;
  id: string;
}> {
  // params: { category: string; id: string } is automatically included
}

// Usage in component
function BlogPost({ params }: BlogPageProps) {
  const { slug } = params; // TypeScript knows slug is a string
  return <h1>Blog post: {slug}</h1>;
}

params: Params