useParams() returns null
Answered
Wetterhoun posted this in #help-forum
WetterhounOP
Why does it returns null? What am I doing wrong? Here is the snippet code for the page.
P.S. pls don't judge my code. lol
P.S. pls don't judge my code. lol
"use client";
import { useParams, useRouter } from "next/navigation";
function Todos() {
const { projectId } = useParams();
....
}
export default function ProtectedTodos() {
return (
<ProtectedPage>
<Todos />
</ProtectedPage>
);
}49 Replies
how does your url looks like? @Wetterhoun
@Wetterhoun Why does it returns null? What am I doing wrong? Here is the snippet code for the page.
P.S. pls don't judge my code. lol
typescript
"use client";
import { useParams, useRouter } from "next/navigation";
function Todos() {
const { projectId } = useParams();
....
}
export default function ProtectedTodos() {
return (
<ProtectedPage>
<Todos />
</ProtectedPage>
);
}
because useParams is for app router and you are using page router
Answer
WetterhounOP
http://localhost:3000/projects/1/todostry using useRouter from
next/routerimport { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return <p>Post: {router.query.projectId}</p>
}@Ray because useParams is for app router and you are using page router
WetterhounOP
Damn. Why we can't have nice simple things?
because next needs to support both router?
Giant panda
you can use both
@Ray try using useRouter from `next/router`
ts
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return <p>Post: {router.query.projectId}</p>
}
WetterhounOP
I used this before but it look kind of ugly. That's why I wanted to shift to
useParams().lol
Giant panda
you need to use app router for it
WetterhounOP
That's sad.
I am using T3 stack.
kind of went ahead with the pages router.
T3 stack support app router now
WetterhounOP
Should I use pages or app router?
in your opinion.
I would use app router
Giant panda
over page router
WetterhounOP
is there any benefits to it?
Like what's new?
Giant panda
WetterhounOP
if you have to boil it down to a bumper sticker?
server component, less javascript sent to client
form action work without javascript enabled
WetterhounOP
too much for a bumper sticker.
btw, can I use nextjs without vercel?
sure
WetterhounOP
And if so, what will I losing?
losing the support from vercel maybe
WetterhounOP
like what functionality are tied to vercel.
like there is this opennext.
I don't know shit about either next or opennext
yes i have been using it
but It only support deploying to aws atm
WetterhounOP
Can I just simply throw T3 stack into a docker, deploy it on hetzner and call it a day?
sure
WetterhounOP
so it can be used without cloud functions and shit.
that's nice.
check out this dockerfile
Giant panda
deprecated
WetterhounOP
noice.
thanks men