Next.js Discord

Discord Forum

Vercel Portfolio Starter Kit MDX support broken

Answered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
Anyone have any idea why the portfolio starter kit (https://vercel.com/templates/portfolio/portfolio-starter-kit) on Vercel is broken upon deployment? Dependencies are outdated and MDX blog posts don't work.
Answered by Transvaal lion
Change made in app/blog/[slug]/page.tsx

From:

export default function Blog({ params }) {
  let post = getBlogPosts().find((post) => post.slug === params.slug)
  // ...
}


To:

export default async function Blog({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  let post = getBlogPosts().find((post) => post.slug === slug)
  // ...
}


Made the component async: export default async function Blog
Added proper TypeScript typing: { params: Promise<{ slug: string }> }
Awaited the params: const { slug } = await params
Fixed both functions: Updated both generateMetadata and the main Blog component
View full answer

1 Reply

Transvaal lionOP
Change made in app/blog/[slug]/page.tsx

From:

export default function Blog({ params }) {
  let post = getBlogPosts().find((post) => post.slug === params.slug)
  // ...
}


To:

export default async function Blog({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  let post = getBlogPosts().find((post) => post.slug === slug)
  // ...
}


Made the component async: export default async function Blog
Added proper TypeScript typing: { params: Promise<{ slug: string }> }
Awaited the params: const { slug } = await params
Fixed both functions: Updated both generateMetadata and the main Blog component
Answer