Next.js Discord

Discord Forum

[id].js doesn't work

Answered
i_lost_to_loba_kreygasm posted this in #help-forum
Open in Discord
i_lost_to_loba_kreygasmOP
//page.js
import Link from "next/link";
export default async function Page(){
let res =await  fetch('https://jsonplaceholder.typicode.com/users');
let users =await res.json();
console.log(users)
return <ul>
{users.map(user => (
  <li key={user.id}>
    <Link href={`/users/${user.id}`}>
      <p>See User {user.id}</p>
    </Link>
  </li>
))}
</ul>
}
Answered by B33fb0n3
in this case you need to change your folder structure a bit. Instead of having a [id].js you will need to create a /[id]/page.tsx. Inside the page.tsxyou can get the id by getting the params like:
export default function Page({ params }) {
  return <div>My Post: {params.id}</div>
}
View full answer

36 Replies

i_lost_to_loba_kreygasmOP
@B33fb0n3 hi
// [id].js
export default function UserID(){
 return <h1>This</h1>
}
i_lost_to_loba_kreygasmOP
yes
@i_lost_to_loba_kreygasm yes
B33fb0n3
in this case you need to change your folder structure a bit. Instead of having a [id].js you will need to create a /[id]/page.tsx. Inside the page.tsxyou can get the id by getting the params like:
export default function Page({ params }) {
  return <div>My Post: {params.id}</div>
}
Answer
i_lost_to_loba_kreygasmOP
Now it works , thank you very much . Also why doesn't console.log work when i try
B33fb0n3
Also why doesn't console.log work when i try
can you clarify?
i_lost_to_loba_kreygasmOP
import Link from "next/link";
export default async function Page(){
let res =await  fetch('https://jsonplaceholder.typicode.com/users');
let users =await res.json();
console.log(users)
like my console in dev tools doesnt show any response
@i_lost_to_loba_kreygasm js import Link from "next/link"; export default async function Page(){ let res =await fetch('https://jsonplaceholder.typicode.com/users'); let users =await res.json(); console.log(users) like my console in dev tools doesnt show any response
B33fb0n3
you see the response in your server side log. So

devtools = client side
server log = server side

Your fetch looks like it was fetched serverside, so the console.log will also appear in your server side log
i_lost_to_loba_kreygasmOP
just opened my cmder , its filled with logs . thank you
u can close it now
B33fb0n3
@B33fb0n3
i_lost_to_loba_kreygasmOP
can we re open the issue again ?
@i_lost_to_loba_kreygasm can we re open the issue again ?
B33fb0n3
It's never closed, but I guess your question was answered, right?
i_lost_to_loba_kreygasmOP
well another issue appeared in the same subject
  3 | export default function BlogId(){
  4 | let router=useRouter();
> 5 | const { id} = router?.query;
    |               ^
  6 |  return <h1>This is User {id}</h1>
  7 | }
i_lost_to_loba_kreygasmOP
Oh ok I didnt saw that
lemme try
empty screen it shows
B33fb0n3
can you share the code?
i_lost_to_loba_kreygasmOP
i copy pasted your code
it didnt have a return
my bad
B33fb0n3
lol
i_lost_to_loba_kreygasmOP
so I can also call fetch same data based on params
i_lost_to_loba_kreygasmOP
where exactly is params coming from ? I only saw props
@i_lost_to_loba_kreygasm where exactly is params coming from ? I only saw props
B33fb0n3
they are coming from nextjs itself. But they will be only there when you have the correct folder structure (with /[dynamicParam]/
@B33fb0n3 they are coming from nextjs itself. But they will be only there when you have the correct folder structure (with /[dynamicParam]/
i_lost_to_loba_kreygasmOP
const  userData=async ()=>{
    let user = await   fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`).then(res => res.json());
   return user 
   }


export default function UserId({params}){
 let user = userData();
return <div>
    <p>{user.name}</p>
</div>
}
it says params undefined . I understand that they are in different scopes but how to fix
maybe I can pass it
so i tried 
export default function UserId({params}){
    const  userData=async (params)=>{
        let user = await   fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`).then(res => res.json());
       return user 
       }
 let user = userData(params);
return <div>
    <p>{user.name}</p>
</div>
}
but you can close now