“next”: “^13.4.3”, app route
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
I got this error message while compiling pages:
<code>Type error: Type '({ params }: Props) => Promise<Element | null>' is not assignable to type 'FC<Props>'. Type 'Promise<Element | null>' is missing the following properties from type 'ReactElement<any, any>': type, props, key
</code>
<code>Type error: Type '({ params }: Props) => Promise<Element | null>' is not assignable to type 'FC<Props>'. Type 'Promise<Element | null>' is missing the following properties from type 'ReactElement<any, any>': type, props, key
</code>
Type error: Type '({ params }: Props) => Promise<Element | null>' is not assignable to type 'FC<Props>'. Type 'Promise<Element | null>' is missing the following properties from type 'ReactElement<any, any>': type, props, key
/blog/[id]/page.tsx
<code>import React, { FC } from 'react'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
async function getData(id: string) {
const res = await fetch(
`http://localhost:9090/v1/blog/${id}`,
{
next: { revalidate: 3600 },
}
)
if (!res.ok) {
throw new Error('Failed to fetch data')
}
return res.json()
}
const page: FC<Props> = async ({ params, searchParams }) => {
const { id } = params
const { data: Offering } = await getData(id)
</code>
<code>import React, { FC } from 'react'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
async function getData(id: string) {
const res = await fetch(
`http://localhost:9090/v1/blog/${id}`,
{
next: { revalidate: 3600 },
}
)
if (!res.ok) {
throw new Error('Failed to fetch data')
}
return res.json()
}
const page: FC<Props> = async ({ params, searchParams }) => {
const { id } = params
const { data: Offering } = await getData(id)
</code>
import React, { FC } from 'react'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
async function getData(id: string) {
const res = await fetch(
`http://localhost:9090/v1/blog/${id}`,
{
next: { revalidate: 3600 },
}
)
if (!res.ok) {
throw new Error('Failed to fetch data')
}
return res.json()
}
const page: FC<Props> = async ({ params, searchParams }) => {
const { id } = params
const { data: Offering } = await getData(id)
I was expecting to do server-side rending by fetching data on server then sending content to client
New contributor
Vidit Kushwaha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.