Django REST / NextJS Problem displaying paginated api – TypeError: p.map is not a function

So I’m attempting to redo a personal blog site that I built entirely in Django with the template system with a DRF / Next.js set up. The problem is that I can display the blog posts on the page no problem with and unpaginated django serializer. When I paginate the django serializer because I only want a few posts on the from page I get the error

TypeError: p.map is not a function

Here is the code that works:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import React, { Component } from 'react'
import Header from '../components/header'
import Link from 'next/link';

function Home({ p }) {
  return (
    <React.Fragment>
      <Header />
      <header className="masthead">
            <div className="container position-relative px-4 px-lg-5">
                <div className="row gx-4 gx-lg-5 justify-content-center">
                    <div className="col-md-10 col-lg-8 col-xl-7">
                        <div className="site-heading">
                            <h1>test</h1>
                            <span className="subheading">Test subheading</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        {p.map((post) => (
        <div className="container px-4 px-lg-5" key={post.id}>
            <div className="row gx-4 gx-lg-5 justify-content-center">
                <div className="col-md-10 col-lg-8 col-xl-7">
                    <div className="post-preview">
                        <Link href={`/posts/${encodeURIComponent(post.slug)}`}>
                            <a><h2 className="post-title">{ post.title }</h2>
                            <h3 className="post-subtitle">{ post.article_body.substr(0,50)}</h3></a>
                        </Link>
                        <p className="post-meta">
                            Posted by { post.author } in { post.article_type }
                            on { post.date_posted }
                        </p>
                    </div>
                </div>
            </div>
        </div>
        ))}
        <div className='container'>
        <hr className="my-4" />
                    <div className="d-flex justify-content-end mb-4"><a className="btn btn-primary text-uppercase" href="/allposts">All Posts →</a></div>
                    </div>
    </React.Fragment>
  )
}

export async function getStaticProps() {
  const res = await fetch("https://www.api.com/api");
  const p  = await res.json();
  console.log

  return{
    props: {
      p
    },
  };
};

export default Home;

This code displays all blog entries that are in the database and works just fine.

As soon as I change the api address to the paginated version I get the error:

TypeError: p.map is not a function

This api is being paginated by Django Rest Framework serializer.

If anyone could help me here it would be great. I’ve been banging my head against the wall for the last two days trying to figure this out.

Answer

At first check does your api returns an array? if it says map is not a function that’s for sure that p is not an array