Next Meals

Example project following the Next.js 15 & React - The Complete Guide based on Maximilian Schwarzmüller's Udemy course.

Next Meal Demo

Next.js 15 Core Features
- App Router with file-based routing
- Server Components as default
- Server Actions for form handling (meals sharing)
- Dynamic Routes for meal details ([mealSlug])
- Static Metadata API for SEO
- Loading UI and Error Boundaries
- Not Found pages handling
React Hooks & Patterns
- useActionState for form submission states
- useFormStatus for indicating form submission state
- useRef for file input handling
- useState for image preview
- useEffect for image slideshow
- usePathname for active link detection
Data & Image Handling
- SQLite database integration with better-sqlite3
- Image optimization with Next/Image component
- File upload handling for meal images
- XSS protection with xss package
- Slug generation with slugify
Styling & UI
- CSS Modules for scoped styling
- Responsive design with media queries
- Custom animations and transitions
- SVG background with gradient
- Google Fonts integration
- Image slideshow component

Meal Home

Meal Detail

Share Meal Page