Error occurred prerendering page in Next JS

Question

I created an API in next JS (in the pages/api folder) and I used it on a page in the pages folder.

When I run on the localhost (development stage), the API can be called correctly. But when I deploy to Vercel there is an error during build.

This is my code when i call the API which is in the pages/api folder

export const getStaticProps = async () => {
  const baseUrlDribble = 'https://api.dribbble.com/v2';
  const baseUrl = process.env.NODE_ENV === 'production' ?
    'https://jovanka-samudra.vercel.app/api' : 'http://localhost:3000/api';

  const resShots = await fetch(`${baseUrlDribble}/user/shots?access_token=${process.env.TOKEN_DRIBBLE}&page=1&per_page=9`);
  const shots = await resShots.json();

  const resResult = await fetch(`${baseUrl}/projects`);
  const result = await resResult.json();
  const projects = result.data.projects;

  return {
    props: {
      shots,
      projects,
    },
    revalidate: 1,
  }
}

This is the API code to retrieve data from database (pages/api/projects folder)

import ProjectService from "@services/ProjectService";
import connectDB from "@utils/connectDB";
import projectValidator from "@validators/project";
import ClientError from '@exceptions/ClientError';

const handler = async (req, res) => {
  const projectService = new ProjectService();

  if (req.method === 'GET') {
    try {
      const projects = await projectService.getProjects();
  
      return res.status(200).json({
        success: true,
        length: projects.length,
        data: {
          projects
        }
      });
    } catch (error) {
      return res.status(500).json({
        success: false,
        message: error.message,
      });
    }
  } else if (req.method === 'POST') {
    ...
  }

  return res.status(404).json({
    success: false,
    message: 'Method not alowed'
  });
}

export default connectDB(handler);

services/ProjectService folder

import InvariantError from '@exceptions/InvariantError';
import NotFoundError from '@exceptions/NotFoundError';
import Project from '@models/Project';

class ProjectService {
  async getProjects() {
    const projects = await Project.find().sort({ 'createdAt': -1 });

    return projects;
  }

    ...
}

export default ProjectService;

Maybe the problem is your file in`/pages/api/projects` and not in the fetch call. Could you share tha file? — Cássio Lacerda, Jun 19 '21 at 20:53
Does this answer your question: [Fetch error when building Next.js static website in production](https://stackoverflow.com/questions/66202840/fetch-error-when-building-next-js-static-website-in-production)? You should use the logic that's in your API routes directly in getStaticProps rather than fetching from your internal API. — juliomalves, Jan 26 '22 at 00:01

score 5 · Accepted Answer · edited Aug 26 '22 at 12:23

5

You should not fetch an internal API route from getStaticProps — instead, you can write the fetch code in API route directly in getStaticProps.

https://nextjs.org/docs/basic-features/data-fetching/get-static-props#write-server-side-code-directly

edited Aug 26 '22 at 12:23

Community

1
1

answered Jun 20 '21 at 09:23

Anish Antony

1,379
8
13

2

This is basically the first sentence of [this answer](https://stackoverflow.com/a/66206394/6243352), without attribution and missing a lot of useful details – ggorlen Jun 13 '23 at 18:23

Error occurred prerendering page in Next JS

1 Answers1