Dynamic URL from API in Next.js

Using Next.js (app router). Called the api (edamam api) , which is rendering the list of items.However inorder to access the item details when I click on the link 'view details', gives 404 page not found. Used [slug] and have the directory as app > recipes> recipecard.

When clicks the browser url is

   http://localhost:3000/recipes/salted-egg-yolks? uri=http%3A%2F%2Fwww.edamam.com%2Fontologies%2Fedamam.owl%23recipe_8551e53605b24f79b6912f5a0ed2cace.

How do I format the link to get the actual result?

Recipe card

import React from 'react';
import Link from 'next/link';
import { slugify } from '@/app/utils/slugify';

interface RecipeCardProps {
  recipe: {
    uri: string;
    label: string;
    image: string;
    ingredientLines: string[];
  };
}

const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
  const slug = slugify(recipe.label);

  return (
    <div className="recipe-card">
      <h3>{recipe.label}</h3>
      <img src={recipe.image} alt={recipe.label} />
      <p>{recipe.ingredientLines.slice(0, 3).join(', ')}...</p>
      <Link href={`/recipes/${slug}?uri=${encodeURIComponent(recipe.uri)}`}>
        View Details
      </Link>
    </div>
  );
};

export default RecipeCard;

Recipe details

import { GetServerSideProps } from 'next';
import axios from 'axios';

const APP_ID = process.env.NEXT_PUBLIC_APP_ID;
const APP_KEY = process.env.NEXT_PUBLIC_APP_KEY;

interface RecipeDetailsProps {
  recipe: {
    uri: string;
    label: string;
    image: string;
    ingredientLines: string[];
    calories: number;
    totalWeight: number;
    cuisineType: string[];
    mealType: string[];
    dishType: string[];
  } | null;
}

const RecipeDetails: React.FC<RecipeDetailsProps> = ({ recipe }) => {
  if (!recipe) {
    return <div>Recipe not found</div>;
  }

  return (
    <div>
      <h1>{recipe.label}</h1>
      <img src={recipe.image} alt={recipe.label} />
      <ul>
        {recipe.ingredientLines.map((ingredient, index) => (
          <li key={index}>{ingredient}</li>
        ))}
      </ul>
      <p><strong>Calories:</strong> {recipe.calories.toFixed(2)}</p>
      <p><strong>Total Weight:</strong> {recipe.totalWeight.toFixed(2)}g</p>
      <p><strong>Cuisine Type:</strong> {recipe.cuisineType.join(', ')}</p>
      <p><strong>Meal Type:</strong> {recipe.mealType.join(', ')}</p>
      <p><strong>Dish Type:</strong> {recipe.dishType.join(', ')}</p>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { slug } = context.params!;
  const decodedUri = decodeURIComponent(slug as string);
  const API_URL = `https://api.edamam.com/api/recipes/v2/by-uri?type=public&app_id=${APP_ID}&app_key=${APP_KEY}&uri=${decodedUri}`;

  try {
    const response = await axios.get(API_URL);
    const recipe = response.data.recipe || null;

    return {
      props: {
        recipe,
      },
    };
  } catch (error) {
    console.error('Error fetching recipe details:', error);
    return {
      props: {
        recipe: null,
      },
    };
  }
};

export default RecipeDetails;