0

我正在尝试使用来自 Airtable 中的表的数据在 Nextjs 中设置分页，但我无法弄清楚如何通过 getStaticProps 和 getStaticPaths 来实现这一点。

以下是我的目录结构的一部分

> pages
  > posts
    > index.js
  > api
  > index.js
> .env

我在 posts/index.js 中编写了以下函数，以从后端 Airtable 表中检索数据。该函数预计将返回约 100 多条记录。

export async function getData() {

    const Airtable = require('airtable');
    const base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY }).base(process.env.AIRTABLE_BASE_ID);
    const table = base(process.env.AIRTABLE_TABLE_NAME);


    const getMinifiedRecords = (record) => {
        return {
            fields: record.fields.tweetUrl
        };
    }

    const minifyRecords = (records) => {
        return records.map((record) => getMinifiedRecords(record));
    }

    const records = await table.select({}).all();
    const minifiedRecords = await minifyRecords(records);
    return minifiedRecords;

}

下面是我的 getStaticProps()

export async function getStaticProps() {

    const posts = await getData();

    return {
        props: {
            posts,      
        },
    };
}

我需要将约 100 多条记录分页成每页 9 条记录，我只是无法弄清楚如何使用 getStaticProps 和 getStaticPaths 来做到这一点。作为尝试，我将 posts/index.js 重命名为 posts/[page].js 并如下修改 getStaticProps 以创建一个记录数组，每页分成 9 个。

export async function getStaticProps() {

    const posts = await getData();
    var totalCount = posts.length;
    const perPage = 9;
    var totalPageCount = (totalCount / perPage);    
    var lastPage = totalPageCount;
    var pageChunk = [];
    const pagedPosts = [];

    var j = 0;
    for (var i = 0; i < totalCount; i+perPage) {
        if ( i+perPage < totalCount ) {
            pageChunk = posts.slice(i, i+perPage);            
        }
        else {
            for ( var x=i-perPage; x < totalCount; x++)
                pageChunk.push(posts[x])
        }
        pagedPosts.push(j, pageChunk);
        j++;
    }

    console.log(totalCount);
    console.log(totalPageCount);
    console.log(pagedPosts);


    return {
        props: {
            posts,
            totalCount,
            perPage,
            revalidate: 1,
            totalPageCount,
            pagedPosts,
        },
    };
}

以下是帖子的代码片段。

const posts = ({ pagedPosts }) => {


        var content = null;
        
            //Generating posts list
            content = ( <div className = "flex-wrap p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5 mb-4 px-2 -mx-2 auto-cols-min"> 
            {
                pagedPosts.map( pagedPost => {
                    <TwitterTweetEmbed
                        tweetID = { pagedPost.fields.tweetUrl }
                    />
                })
            }
            </div>
            );
        

        return (
            //<div className="flex-1 md:flex-1 flex-wrap items-center justify-center py-10">

            //This section has the code for card listing
            <div className = "container max-w-5xl rounded-lg my-3 mx-auto px-4 md:px-12" > 
        { content }
            </div>
            );
        }

        export default posts;

我什至不知道我上面写的 getStaticProps 是否有意义。此时我不知道如何编写 getStaticPaths 来创建路由。

任何帮助表示赞赏。顺便说一句，我是一个完全的js菜鸟，刚刚开始学习。

4

0 回答 0