Posted on Jun 1

Open Source Recipe Site with Nextjs + MDX

Wanted a simple, ad-free recipe collection with high-quality recipes and top design. Existing recipe sites are cluttered with ads and bad UX.

Live: tasty.cooking | Code: GitHub

Stack

Nextjs
TypeScript
Markdown with frontmatter for recipes
Tailwind CSS

Content Strategy

Recipes as structured markdown with frontmatter instead of a CMS:

--- title: "Black Pepper Tofu" description: "Restaurant-quality spicy tofu with fiery chiles" prepTime: 35 min readyTime: 45 min servings: 4 tags: ["Vegetarian", "Spicy", "Quick"] ingredients: - "1¾ lbs firm tofu" - "Avocado oil for frying" - "cornstarch to dust the tofu" instructions: - "Pour enough oil into a large frying pan..." - "Cut the tofu into large cubes, about 1 x 1 inch" --- # Black Pepper Tofu Restaurant-quality spicy tofu with fiery chiles and black pepper.

Why This Approach?

Version control for recipes
Type safety at build time
No database needed
Static generation = fast

Build Process

Uses Next.js static generation with validation in mdx-utils.ts:

// getStaticPaths for recipe pages export async function getStaticPaths() { const recipes = getAllRecipes() // validates required fields return { paths: recipes.map(recipe => ({ params: { slug: recipe.slug } })), fallback: false } }