Send the id of a specific card to the next route to fetch data using that id in nextjs

Question

[]Hey I am fetching some data from API and am using the map to display the fetched data. Now I want to take the data from one specific data to fetch more details about that data. I am using nextjs and there is conflict that I can't use async in client. I am fetching data from here

    import api from "./api";


interface multiplemovieData{
    results:[{
        original_title:string,
        backdrop_path:string
        id:string
    }]
}

export default async function(){
    const res = await api.get<multiplemovieData>('')
    const data = await res.data
    return({
        movieData:data
    })
}

from above api I want to take the id of one specific data to pass on to another page to load that specific data. I am mapping the whole array in import getMultipleMovieData from "./_lib/getMultipleMovieData" import Card from "@/components/card/Card"

export default async function  () {

  const {movieData} = await getMultipleMovieData()

  return (
    <div className="mx-5 text-white flex flex-wrap justify-between" >
        {movieData.results.map((item) =>(
          <a href={item.id} key={item.id}>
            <Card imgUrl={`https://image.tmdb.org/t/p/w400/${item.backdrop_path}`} title={item.original_title} location="Kathmandu, Nepal" date="13 Dec 2023" />
          </a>
        ))}

    </div>
   
  
  )
}

Now whenever the user clicks on one card I want to take that id and fetch data on that id. I can't seem to do that no matter whatever I try for past 7 hours. I would be really glad if someone could help me on this.

The latest Next.js version

the page.tsx for[id]

'use client'

import { useState } from 'react'
import axios from 'axios'
import { useParams } from 'next/navigation'

export default function page() {
  const [movieData, setMovieData] = useState()
  const params = useParams()
  const res = axios
    .get(
      `https://api.themoviedb.org/3/movie/${params.id}?api_key=2d34ac8351a15624422d4e14b38f3374`
    ).then((res) => {return res.data})
    


  return <div></div>
}

I can't use async await due to 'use client' and I cant resolve the promise into giving me the data.

Answer 1

For more info on dynamic routing, check this section on the NextJs official docs

To solve this issue, you need to change the a tag you are passing the id of the movie to use the inbuilt Link component provided by NextJs.

import Link from "next/link";
import { useEffect, useState } from "react";

export default function Home () {
const [movie, setMovie] = useState([]);

  useEffect(() => {
    getMovies();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const getMovies = async () => {
    const {movieData} = await getMultipleMovieData();
    setMovie(movieData.result);
  };
  

  return (
    <div className="mx-5 text-white flex flex-wrap justify-between" >
        {movie.length > 0 && movie.map((item) =>(
          <Link href={item.id} key={item.id}>
            <Card imgUrl={`https://image.tmdb.org/t/p/w400/${item.backdrop_path}`} title={item.original_title} location="Kathmandu, Nepal" date="13 Dec 2023" />
          </Link>
        ))}

    </div>
   
  
  )
}

The next step is to create a new folder in your app directory called movie, and add another folder [id] which will represent the dynamic route. The last step is to add an empty file page.tsx. This is how your structure will look like app/movie/[id]/page.tsx

In your newly created page.tsx file, we will make use of useParams from next/navigation a client component hook that will enable you to retrieve any available param on the current route you are accessing. Add the following code below:

"use client";
import { useParams } from "next/navigation";


function Page() {
  const params = useParams();

  return (
    <div>Movie ID: {params.id}</div>
  );
}

export default Page;