526互联

[NextJS] getStaticProps

发布时间 2023-05-29 21:37:07作者: 郝壹贰叁

Continue ...

 

Ref: Next.js 产品级的 React 框架 - 中文开发入门教学 - 编写静态页面属性 getStaticProps

 

 

为了爬虫，所以这么写。

import Head from 'next/head'

export default function Home(props) {
    const { datalist } = props;

    return (
        <div>
            <Head>
                <title>Next App</title>
                <meta name="description" content="Next App 快速开发" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <div className="fs-1 p-3">
                <ul>
                    {datalist.map(item => (
                        <li key={item}>{item}</li>
                    ))}
                </ul>
            </div>
        </div>
    )
}

// 服务器端执行，编译时也会执行 (next build)
export async function getStaticProps(context) {
    console.log('getStaticProps is running...');
    return {
        // will be passed to the page component as props
        props: {
            datalist: ['React', 'Vue', 'Angular']
        },
    }
}