TypeScript - Cannot find name from exemple

[KianoJ]

Verify canary release

• [X] I verified that the issue exists in Next.js canary release

Provide environment information

Operating System: Platform: linux Arch: x64 Version: #34-Ubuntu SMP Wed May 18 13:34:26 UTC 2022 Binaries: Node: 16.15.0 npm: 8.5.5 Yarn: N/A pnpm: N/A Relevant packages: next: 12.1.6 react: 18.1.0 react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When testing NextJS with Typescript I encounter an error when trying to access to props Cannot find name ... So I try with the exemple there https://nextjs.org/docs/basic-features/data-fetching/get-static-props when the message still appear

Expected Behavior

Can use the props

To Reproduce

Generate a project with typescript in intex.tsx replace all by this

import { GetStaticProps } from "next"

// posts will be populated at build time by getStaticProps()
function Blog({ posts: [] }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

[AviAvinav]

I might be able to help you out. If I understand this correctly this is the exact code you are using, if that is the case, the problem is that you haven't actually linked it to CMS or an API.

In const res = await fetch('https://.../posts') you have to replace https://../posts with your CMS or API url.

For example, I was using themoviedb API for one of my projects and I had something like this: const res = await fetch('https://api.themoviedb.org/3').

[KianoJ]

Hello, even if I remove the fetch and only return an empty list it's still occurs. Maybe I'm not clear in my description but here is it So posts is set as a props of Blog but when using it typescript display an error Cannot find name posts

function Blog({ posts: [] }) {
  return (
    <ul>
      {posts.map((post) => (   <--- Cannot find name posts
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

[icyJoseph]

function Blog({ posts: [] }) {
  return (
    <ul>
      {posts.map((post) => (  // <--- Cannot find name posts
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

That's incorrect syntax:

// posts = [] to make it default to an empty array
function Blog({ posts = [] }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  );
}

However, TS will complain that posts is never[]

so you do:

function Blog({ posts = [] }: { posts: Array<{ title: string }> }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.title}>{post.title}</li>
      ))}
    </ul>
  );
}

I also threw in the key prop, which is needed.