36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
// This is a mock data source. In a real app, you might fetch this
|
|
// from a headless CMS, a database, or a local JSON file.
|
|
const portfolioItems = [
|
|
{ slug: "project-alpha", title: "Project Alpha", content: "Details about project Alpha..." },
|
|
{ slug: "project-beta", title: "Project Beta", content: "Details about project Beta..." },
|
|
{ slug: "venus-nextjs", title: "Venus Next.js Theme", content: "Details about the Venus theme..." },
|
|
];
|
|
|
|
// This function tells Next.js which slugs to pre-render at build time.
|
|
export async function generateStaticParams() {
|
|
// We return an array of objects, where each object has a `slug` property
|
|
// matching the dynamic segment `[slug]`.
|
|
return portfolioItems.map((item) => ({
|
|
slug: item.slug,
|
|
}));
|
|
}
|
|
|
|
// This is your page component.
|
|
export default function PortfolioPage({ params }: { params: { slug: string } }) {
|
|
// Find the specific portfolio item based on the slug from the URL.
|
|
const item = portfolioItems.find((p) => p.slug === params.slug);
|
|
|
|
if (!item) {
|
|
// Optionally, handle cases where the slug doesn't match any item.
|
|
// In a static export, this would typically lead to a 404.
|
|
return <div>Project not found.</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1>{item.title}</h1>
|
|
<p>{item.content}</p>
|
|
</div>
|
|
);
|
|
}
|