Javascript 无法使用Next.js正确执行提取

根据Next.js网站上提供的文档进行提取时遇到问题。我试着去安慰那些道具，但是我没能出现。我没有下一步的经验，尝试镜像它以作出反应，但不幸的是，它不起作用。如何使用getStaticProps进行获取？我有一个教程，在旧版本的Next.js中使用getInitialProps，但我试图遵循他们的新文档。以下是到目前为止我掌握的入门代码：

import React, { Component } from 'react';
// import fetch from 'node-fetch'

class Index extends Component {
    state = {}

    getStaticProps = async () => {
        // Call an external API endpoint to get posts.
        console.log('fetching data')
        const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
        const posts = await res.json()


        return {
            props: {
                posts,
            },
        }

    }
    render() {
        console.log(this.props)
        return (
            <div>
                <h1>Our Index Page!!</h1>
            </div>
        );
    }
}


export default Index

import React，{Component}来自'React'；
//从“节点获取”导入获取
类索引扩展组件{
状态={}
getStaticProps=async（）=>{
//调用外部API端点以获取帖子。
console.log（'获取数据'）
const res=等待取数（'https://jsonplaceholder.typicode.com/todos/1')
const posts=wait res.json（）
返回{
道具：{
帖子，
},
}
}
render（）{
console.log（this.props）
返回(
我们的索引页！！
);
}
}
导出默认索引

来自文档：

如果从页面导出名为

getStaticProps

的异步函数，Next.js将在构建时使用

getStaticProps

返回的props预呈现此页面

这意味着与其将

getStaticProps

放在组件中，不如将其导出为：

import React, { Component } from 'react';
// import fetch from 'node-fetch'

class Index extends Component {
    state = {}

    render() {
        console.log(this.props)
        return (
            <div>
                <h1>Our Index Page!!</h1>
            </div>
        );
    }
}

export const getStaticProps = async () => {
    // Call an external API endpoint to get posts.
    console.log('fetching data')
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    const posts = await res.json()
    return {
        props: {
            posts,
        },
    }
}

export default Index

import React，{Component}来自'React'；
//从“节点获取”导入获取
类索引扩展组件{
状态={}
render（）{
console.log（this.props）
返回(
我们的索引页！！
);
}
}
export const getStaticProps=async（）=>{
//调用外部API端点以获取帖子。
console.log（'获取数据'）
const res=等待取数（'https://jsonplaceholder.typicode.com/todos/1')
const posts=wait res.json（）
返回{
道具：{
帖子，
},
}
}
导出默认索引