DEV Community

Cover image for Open Source Recipe Site with Nextjs + MDX
douvy
douvy

Posted on

3 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:
  - " 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.
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

Includes incremental static regeneration and serverless fallbacks for efficient updates.

Give the repo a star if you find it useful. Contributions and comments welcome, thanks!

Feature flag article image

Create a feature flag in your IDE in 5 minutes with LaunchDarkly’s MCP server ⏰

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post

Top comments (3)

Collapse
 
salfia_anzar profile image
Salfiya Anzar

hii i would love to contribute to this, please let me know how i can help?

Collapse
 
douvy profile image
douvy

btw I just added a CONTRIBUTING.md file to make recipe contributions clear and easy. cheers

Collapse
 
douvy profile image
douvy

thanks! here is the repo: github.com/douvy/tasty-cooking

you can fork the project and contribute directly or if you have any recipes you'd like me to add just let me know

Feature flag article image

Create a feature flag in your IDE in 5 minutes with LaunchDarkly’s MCP server 🏁

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post

👋 Kindness is contagious

Take a moment to explore this thoughtful article, beloved by the supportive DEV Community. Coders of every background are invited to share and elevate our collective know-how.

A heartfelt "thank you" can brighten someone's day—leave your appreciation below!

On DEV, sharing knowledge smooths our journey and tightens our community bonds. Enjoyed this? A quick thank you to the author is hugely appreciated.

Okay