Reinforce core TypeScript concepts by converting a JS Next.js component to TypeScript.
Convert a Next.js Blog Post Component
A simple Next.js page (pages/blog.js) with:
- A posts array (mock data with id, title, content, date).
- A BlogPost component rendering each post.
- A FeaturedPost component that picks the first post.
Define a typed Post interface to match the mocked data in src/lib/posts.ts. This should fix the type errors showing up in
src/components/BlogPost.tsx and src/components/FeaturedPost.tsx.
Fix the prop typing in the BlogPost and FeaturedPost components. Use the Post type.
In the FeaturedPost component, the logic is to select the first item in the array and render it as the featured post.
We want to render instead, the first post which has the tag featured in it's list of tags