Значения запроса теряются при обновлении страницы в Next js?

Question

Я делаю страницу с подробностями в блоге с помощью Next.Js

Когда я нажимаю ссылку на карточках, я попадаю в подробности блога, используя query. Я также получаю сданный query valuesподробно страница. Но когда я обновляю страницу с подробностями, запрос теряется.

Страница карты

<Link href='/recipes/[id]' as={`/recipes/${recipe.strMeal}`} key={recipe.strMeal} passHref>

Подробная страница

          
    const { query } = useRouter();
    const id = query.id


    const [recipes, setRecipes] = useState([]);
    const [isFetchingData, setIsFetchingData] = useState(true);

    const getRecipesList = async () => {
        try {
        const { meals } = await getRecipes(id);
        setIsFetchingData(false);
        setRecipes(meals ?? []);
        } catch (e) {
        setIsFetchingData(false);
        console.error(e);
        }
    }
    useEffect(() => {
        getRecipesList();
    }, [])

    return (
        <div>
            <h1>
                {recipes.map((recipe, index) => {return(<div key={index}> <li>{recipe.strMeal}</li></div>)})}
            </h1>
        </div>
    );```