Next.js Discord

Discord Forum

How can I read a route param in Next.js server component?

Answered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
I can't use useParams() as this hook only available in client components.
Answered by B33fb0n3
@Alligator mississippiensis you need to return an array of specific dynamic parts. So in your case an array of ids. It could look like this:

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}
View full answer

6 Replies

Alligator mississippiensisOP
// app/channels/[id]/page.tsx

import ChannelView from "@/components/client/ChannelView";
import { Metadata } from "next";
import { FC } from "react";

export const metadata: Metadata = {
    title:`Channel #1`,
    description:''
}
interface PageProps {
    _id:string
}

function generateStaticParams() {
    
}

const Page : FC<PageProps> = ({_id}) => {
    console.log(_id)
    return(
        <main className="pt-10 w-4/5 min-h-screen">
            <section className="flex flex-col mt-15">
                <ChannelView />
            </section>
        </main>
    )

}

export default Page
I can access the route param now. but how can I be able to use it in the genarateStaticParams() function in order to create multiple static pages
@Siberian
B33fb0n3
@Alligator mississippiensis you need to return an array of specific dynamic parts. So in your case an array of ids. It could look like this:

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}
Answer
Alligator mississippiensisOP
thanks @B33fb0n3 . it helped.
B33fb0n3