Next.js Discord

Discord Forum

Fetching Data

Answered
Western yellowjacket posted this in #help-forum
Open in Discord
Western yellowjacketOP
Hello,

I'm just trying my luck to see if I can find the answer here. I'm trying to fetch data when I click the View button on my application. I just do not know how I can make the id to be dynamic when I'm trying to fetch it.

This is my github gist of both user/page.jsx(Where the users are listed) and the [id]/page.jsx. On the ID page, I can show the data with no problem when I manually enter the ID. But I have multiple users and I wanted to see how I can make it dynamic. I already tried searching online and I saw the NextJS documentation, that's is where I got the client-side fetching from for the [id] page. I really hope someone can teach me on how I can do it.

This is gist link:
https://gist.github.com/NexCodeJimM/843f379edbe01bed75ffcb02a1b5b92d

Thank you!
Answered by Western yellowjacket
Hello! Thank you for responding!

I just figured it out just now actually. I just need to add useParams

Basically:
"use client";
import { Box, Text } from "@chakra-ui/react";
import { useState, useEffect } from "react";
import { useParams } from "next/navigation";

const UserPage = () => {
  const [data, setData] = useState({});
  const { id } = useParams();

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`/api/users/${id}`);
      const body = await response.json();
      setData(body);
    };
    fetchData();
  }, []);

  return (
    <>
      <Text>Test</Text>
      <Box>
        <Text>Name: {data.name}</Text>
        <Text>Email: {data.email}</Text>
        <Text>Country: {data.country}</Text>
        {/* Add more properties as needed */}
      </Box>
    </>
  );
};

export default UserPage;


Now the ID is dynamic when trying to select a user.
View full answer

6 Replies

Munchkin
if i am right your using the page router:
a very good description is here:
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes


basiclly:
change your file structure to something like this: pages/blog/[slug].js

and on the page you can access the id like:
import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}
@Munchkin if i am right your using the page router: a very good description is here: https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes basiclly: change your file structure to something like this: `pages/blog/[slug].js` and on the page you can access the id like: ts import { useRouter } from 'next/router' export default function Page() { const router = useRouter() return <p>Post: {router.query.slug}</p> }
Western yellowjacketOP
Hello! Thank you for responding!

I just figured it out just now actually. I just need to add useParams

Basically:
"use client";
import { Box, Text } from "@chakra-ui/react";
import { useState, useEffect } from "react";
import { useParams } from "next/navigation";

const UserPage = () => {
  const [data, setData] = useState({});
  const { id } = useParams();

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`/api/users/${id}`);
      const body = await response.json();
      setData(body);
    };
    fetchData();
  }, []);

  return (
    <>
      <Text>Test</Text>
      <Box>
        <Text>Name: {data.name}</Text>
        <Text>Email: {data.email}</Text>
        <Text>Country: {data.country}</Text>
        {/* Add more properties as needed */}
      </Box>
    </>
  );
};

export default UserPage;


Now the ID is dynamic when trying to select a user.
Answer
Munchkin
can you mark it as solution
@Munchkin can you mark it as solution
Western yellowjacketOP
How can I mark it exactly? Sorry I'm pretty new here :mph_wht2:
Munchkin
on your answer: Right click -> Apps -> Mark Solution
@Munchkin on your answer: `Right click -> Apps -> Mark Solution`
Western yellowjacketOP
Done! 😄 Thanks!