Build a Simple Next.js Recipe App: A Beginner’s Guide

Written by

FixTechToday

in

In today’s digital age, the ability to quickly and easily access information is paramount. Whether you’re a seasoned chef or a novice cook, having a well-organized collection of recipes at your fingertips can be a game-changer. This is where a recipe app comes in handy. In this comprehensive guide, we’ll walk you through building a simple yet functional recipe app using Next.js, a powerful React framework for building web applications. This project is ideal for beginners and intermediate developers looking to expand their skillset and learn the fundamentals of modern web development.

Why Build a Recipe App?

Creating a recipe app is more than just a coding exercise; it’s a practical project that teaches you valuable skills. Here’s why you should consider building one:

  • Practical Application: You’ll learn how to fetch and display data, handle user input, and manage application state – all essential skills for web development.
  • Personalization: You can tailor the app to your specific needs, adding features like meal planning, dietary restrictions filtering, and more.
  • Portfolio Piece: A well-crafted recipe app is a great addition to your portfolio, showcasing your ability to build functional and user-friendly web applications.
  • Learning Next.js: You’ll gain hands-on experience with Next.js features like server-side rendering, routing, and API routes.

Prerequisites

Before we dive in, make sure you have the following:

  • Node.js and npm (or yarn): Installed on your computer.
  • Basic understanding of HTML, CSS, and JavaScript: Familiarity with React is a plus, but not strictly required.
  • A code editor: Such as Visual Studio Code, Sublime Text, or Atom.

Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app recipe-app

This command will set up a new Next.js project named “recipe-app”. Navigate into the project directory:

cd recipe-app

Now, start the development server:

npm run dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page. This confirms that your project is set up correctly.

Project Structure

Next.js projects have a specific file structure that helps organize your code. Here’s a basic overview:

  • pages/: This directory contains your application’s pages. Each file in this directory represents a route. For example, `pages/index.js` is the homepage (/).
  • components/: This directory is where you’ll store reusable React components.
  • public/: This directory holds static assets like images, fonts, and other files.
  • styles/: This directory is for your CSS and styling.

Creating the Recipe Data

For this project, we’ll use a simple JSON file to store our recipe data. Create a new directory named `data` in the root of your project, and inside it, create a file named `recipes.json`. Paste the following JSON data into `recipes.json`:

[
  {
    "id": "1",
    "name": "Spaghetti Carbonara",
    "ingredients": [
      "Spaghetti",
      "Eggs",
      "Pancetta",
      "Parmesan Cheese",
      "Black Pepper"
    ],
    "instructions": [
      "Cook spaghetti according to package directions.",
      "Fry pancetta until crispy.",
      "Whisk eggs and parmesan cheese.",
      "Combine spaghetti, pancetta, and egg mixture.",
      "Season with black pepper."
    ],
    "image": "/carbonara.jpg"
  },
  {
    "id": "2",
    "name": "Chicken Stir-Fry",
    "ingredients": [
      "Chicken Breast",
      "Soy Sauce",
      "Broccoli",
      "Carrots",
      "Rice"
    ],
    "instructions": [
      "Cut chicken into bite-sized pieces.",
      "Stir-fry chicken with vegetables.",
      "Add soy sauce.",
      "Serve over rice."
    ],
    "image": "/stirfry.jpg"
  }
]

This JSON data represents two recipes, each with an ID, name, ingredients, instructions, and an image path. We will add the images later.

Creating the Recipe Listing Page

Let’s create the main page that lists all the recipes. Open `pages/index.js` and replace its content with the following code:

import { useState, useEffect } from 'react';
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    async function fetchRecipes() {
      const response = await fetch('/api/recipes');
      const data = await response.json();
      setRecipes(data);
    }

    fetchRecipes();
  }, []);

  return (
    <div>
      <h1>Recipe App</h1>
      <div>
        {recipes.map((recipe) => (
          
            <a>
              <h2>{recipe.name} →</h2>
            </a>
          
        ))}
      </div>
    </div>
  );
}

Let’s break down this code:

  • Import Statements: We import `useState`, `useEffect` from `react`, `Link` from `next/link`, and the CSS modules from `../styles/Home.module.css`.
  • `useState` Hook: `const [recipes, setRecipes] = useState([]);` initializes a state variable `recipes` to an empty array. This variable will hold our recipe data.
  • `useEffect` Hook: This hook runs after the component renders. It fetches the recipe data from our API route (we’ll create this soon) and updates the `recipes` state.
  • `fetchRecipes` Function: This asynchronous function fetches the recipe data using `fetch` and updates the `recipes` state with the retrieved data.
  • JSX Structure: The JSX renders a title and a grid of recipe cards. Each card is a link to the individual recipe page (we’ll create this later). The `recipes.map()` function iterates over the `recipes` array and renders a card for each recipe.

Creating the API Route to Serve Recipe Data

Next.js allows you to create API routes to handle server-side logic. Create a new directory named `pages/api` in your project’s root. Inside `pages/api`, create a file named `recipes.js`. Add the following code:

import recipesData from '../../data/recipes.json';

export default function handler(req, res) {
  res.status(200).json(recipesData);
}

This code does the following:

  • Importing Recipe Data: It imports the `recipes.json` data we created earlier.
  • Defining the API Route Handler: The `handler` function is the main function for the API route. It takes `req` (the request object) and `res` (the response object) as arguments.
  • Sending the Data: `res.status(200).json(recipesData)` sets the HTTP status code to 200 (OK) and sends the `recipesData` as a JSON response.

Styling the Recipe Listing Page

Let’s add some basic styling to make our recipe listing page look better. Open `styles/Home.module.css` and replace the existing content with the following CSS:

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
  text-align: center;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
  margin-top: 3rem;
}

.card {
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  width: 100%;
  max-width: 300px;
}

.card:hover, .card:focus, .card:active {
  color: #0070f3;
  border-color: #0070f3;
}

.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

This CSS provides basic styling for the container, title, and recipe cards. It sets up the layout, font sizes, and card appearance.

Creating the Recipe Detail Page

Now, let’s create the page that displays the details of each recipe. In the `pages` directory, create a new folder named `recipes`. Inside the `recipes` folder, create a file named `[id].js`. This is a dynamic route that will handle requests for individual recipes based on their ID. Add the following code:

import { useRouter } from 'next/router';
import recipesData from '../../data/recipes.json';
import styles from '../../styles/Recipe.module.css';

export default function RecipeDetail() {
  const router = useRouter();
  const { id } = router.query;

  const recipe = recipesData.find((recipe) => recipe.id === id);

  if (!recipe) {
    return <div>Recipe not found.</div>;
  }

  return (
    <div>
      <h1>{recipe.name}</h1>
      <img src="{recipe.image}" alt="{recipe.name}" />
      <h2>Ingredients</h2>
      <ul>
        {recipe.ingredients.map((ingredient, index) => (
          <li>{ingredient}</li>
        ))}
      </ul>
      <h2>Instructions</h2>
      <ol>
        {recipe.instructions.map((instruction, index) => (
          <li>{instruction}</li>
        ))}
      </ol>
      
        <a>Back to Recipes</a>
      
    </div>
  );
}

Here’s a breakdown of this code:

  • Import Statements: We import `useRouter` from `next/router`, `recipesData` from `../../data/recipes.json`, and the CSS modules from `../../styles/Recipe.module.css`.
  • `useRouter` Hook: This hook provides access to the router object, which allows us to get the route parameters.
  • `router.query.id`: This retrieves the `id` parameter from the URL (e.g., `/recipes/1` will have `id` equal to “1”).
  • Finding the Recipe: `recipesData.find((recipe) => recipe.id === id)` searches the `recipesData` array for the recipe with the matching ID.
  • Error Handling: If the recipe is not found, the component displays a “Recipe not found” message.
  • JSX Structure: The JSX displays the recipe name, image, ingredients, and instructions. It also includes a link back to the recipe listing page.

Styling the Recipe Detail Page

Create a new file named `Recipe.module.css` in the `styles` directory and add the following CSS:


.container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.ingredients, .instructions {
  margin-bottom: 1.5rem;
}

.ingredients ul, .instructions ol {
  padding-left: 1.5rem;
}

This CSS styles the recipe detail page, including the title, image, ingredients, and instructions, to enhance readability and visual appeal.

Adding Images (Optional)

If you want to add images to your recipe app, you can do so by:

  1. Downloading Images: Download images for your recipes and save them in the `public` directory. Make sure the image paths in your `recipes.json` file match the image file names in the `public` directory.
  2. Referencing Images: Update the `image` property in your `recipes.json` file to include the correct file names. For example, if you have an image named `carbonara.jpg` in your `public` directory, the `image` property should be `/carbonara.jpg`.
  3. Testing: Refresh your app to see the images displayed on the recipe detail pages.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building Next.js apps, along with solutions:

  • Incorrect File Paths: Ensure your file paths (e.g., for images, JSON data, and components) are correct. Double-check your imports and file locations.
  • Missing Dependencies: If you encounter errors related to missing modules, install them using npm or yarn. For example, if you see an error about `next/router`, make sure you have Next.js installed.
  • Incorrect State Updates: When updating state variables, always use the `setRecipes()` function to trigger a re-render. Directly modifying the state variable won’t update the UI.
  • Incorrect API Route Handling: Make sure your API routes are correctly set up and returning the expected data. Use `console.log()` to debug the API route and check the response in your browser’s developer tools.
  • CSS Module Conflicts: Be mindful of CSS module naming conventions. Make sure your CSS module class names are unique and not conflicting with other styles.

Key Takeaways

  • Next.js Fundamentals: You’ve learned how to set up a Next.js project, create pages, use API routes, and handle dynamic routes.
  • Data Fetching: You’ve learned how to fetch data from a JSON file and display it in your app.
  • Component Structure: You’ve learned how to structure your application using components and reusable code.
  • State Management: You’ve used the `useState` hook to manage the state of your application.
  • Styling with CSS Modules: You’ve learned how to style your components using CSS modules.

Extending the Recipe App

Here are some ideas to extend your recipe app and further enhance your skills:

  • Add a Search Feature: Implement a search bar to allow users to search for recipes by name or ingredients.
  • Implement User Authentication: Allow users to create accounts, save their favorite recipes, and add their own recipes.
  • Add Filtering Options: Implement filtering options to allow users to filter recipes by dietary restrictions (e.g., vegetarian, vegan, gluten-free).
  • Integrate with a Database: Instead of using a JSON file, connect your app to a database (e.g., MongoDB, PostgreSQL) to store and retrieve recipe data.
  • Add Image Upload: Implement a feature that allows users to upload images for their recipes.

FAQ

Here are some frequently asked questions about building a Next.js recipe app:

  1. Can I use a different data source instead of a JSON file? Yes, you can use any data source, such as a database, a third-party API, or a CMS.
  2. How do I deploy my Next.js app? You can deploy your Next.js app to platforms like Vercel, Netlify, or AWS. Vercel is the easiest option as it’s built by the creators of Next.js and integrates seamlessly.
  3. How do I handle errors in my app? You can use try-catch blocks to handle errors and display informative error messages to the user.
  4. Can I use TypeScript with Next.js? Yes, Next.js has excellent support for TypeScript. You can easily set up a TypeScript project by running `npx create-next-app –typescript recipe-app`.
  5. How can I optimize the performance of my Next.js app? You can optimize your app’s performance by using techniques like code splitting, image optimization, and caching.

Building a recipe app with Next.js is an excellent way to learn the fundamentals of modern web development and create a practical tool you can use every day. By following the steps outlined in this guide, you’ve taken the first steps towards building a functional and user-friendly web application. Remember to experiment, explore, and continuously learn to expand your skills and create even more amazing projects. The journey of a thousand lines of code begins with a single function, and with each line, you’re not just building an app, you’re building your expertise, one recipe at a time.

More posts