[NextJS] getStaticProps

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']
        },
    }
}
复制代码

 

posted @   郝壹贰叁  阅读(209)  评论(0)  编辑  收藏  举报
相关博文：
·  [React] Next.js
·  [React] Review
·  next.js 源码解析 - getStaticProps、getStaticPaths 篇
·  5 分钟理解 Next.js Static Export
·  Next.js的页面预渲染
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae