Next.js SSR with API not building properly

Question

"Not building properly" meaning "not finishing building at all". I've set up a very basic blog project with dynamic SSR which fetches data from the Notion-API to generate static blog pages. Everything works fine when I'm running it in next dev - however when trying to build the project, it runs into an endless loop without any errors shown.

One thought I had was the following:
If I understand the sequence of everything correctly, Next.js already tries building the static sites during next build. The dynamic site generation relies on an API that I have also coded within the same project, which forwards requests to Notion in order to obfuscate secrets. Obviously no local API will be active during the build, which I am guessing is the error I'm running into?

To illustrate - here's the code for the pages that are to be generated:

import Head from 'next/head';

export default function Post( { postData, postBlocks } ) {
  console.log( { postData, postBlocks } );
  return (
    <>

      <Head>
        <title>Placeholder</title>
        <meta name="description" content="" />
      </Head>

      <h1>Placeholder</h1>

    </>
  )
}

// Get further info on the specific "Post" from Notion via my API
export async function getStaticProps( { params } ) {
  const postDataRequest = fetch( `${ process.env.API_ROOT }/posts/${ params.id }` );
  const postBlocksRequest = fetch( `${ process.env.API_ROOT }/blocks/${ params.id }` );

  const [ postData, postBlocks ] = await Promise.all(
    ( await Promise.all( [ postDataRequest, postBlocksRequest ] ) )
      .map( response => response.json() )
  );

  return {
    props: { postData, postBlocks: postBlocks.results },
    revalidate: 86400,
  };

}

// Fetch  all "Posts" from Notion via my API, get their ID and generate a static route for each 
export async function getStaticPaths() {
  const req = await fetch( `${ process.env.API_ROOT }/posts?limit=999` );
  const data = await req.json();

  const paths = data.results.map( page => {
    return { params: { id: page.id } };
  } )

  return {
    paths,
    fallback: false,
  };
}

I've also tried to start the API locally and build the project in another terminal, this didn't work either. Have I missed something somewhere?

I have also published my project on GitHub for further inspection.

@PsyGik apparently restarting my PC seemed to help..? I now get an error saying that the specific API-URL doesn't exist - which makes sense. It tries to query `https://pasu.me/api` which is where my blog would be located at if it was to be published. Is there any way to incorporate a running local API into the build process? — Pascal Stockert, Mar 11 '22 at 07:54
@Yilmaz the introductory project from Next.js doesn't include one, so I never created one. — Pascal Stockert, Mar 11 '22 at 07:55
"Obviously no local API will be active during the build, which I am guessing is the error I'm running into" - that's correct, you shouldn't call internal API routes inside `getStaticProps`/`getStaticPaths`. Instead move the logic from the API routes directly into them. Does this answer your question: https://stackoverflow.com/questions/66202840/fetch-error-when-building-next-js-static-website-in-production? — juliomalves, Mar 12 '22 at 12:37
@juliomalves Yeah, I kind of learned that "API everything!" is a bad approach the hard way. I moved all the logic over to helper-functions and that essentially solved every problem I faced. — Pascal Stockert, Mar 13 '22 at 13:14

score 0 · Accepted Answer · answered Mar 13 '22 at 13:18

I solved this one by thinking hard about whether an API was actually necessary. Since I already have the Notion-keys accessible project-wide in process.env, there's no real need to build up an API. Moving the query-logic to helper-functions that I can simply call has solved about every problem I faced.

Learning: Don't just build APIs for everything. It might just make your life harder.

Next.js SSR with API not building properly

1 Answers1