Fetch error when building Next.js static website in production

Question

I don't understand these errors when I export as production npm run build , but when I test npm run dev it works just fine. I use getStaticProps and getStaticPath fetch from an API route.

First when I npm run build

FetchError: invalid json response body at https://main-website-next.vercel.app/api/products reason: Unexpected token T in JSON at position
0
    at D:\zummon\Main Website\main-website-next\node_modules\node-fetch\lib\index.js:272:32
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async getStaticPaths (D:\zummon\Main Website\main-website-next\.next\server\pages\product\[slug].js:1324:18)
    at async buildStaticPaths (D:\zummon\Main Website\main-website-next\node_modules\next\dist\build\utils.js:16:80)
    at async D:\zummon\Main Website\main-website-next\node_modules\next\dist\build\utils.js:26:612
    at async D:\zummon\Main Website\main-website-next\node_modules\next\dist\build\tracer.js:1:1441 {
  type: 'invalid-json'
}

\pages\product\[slug]

import { assetPrefix } from '../../next.config'

export default function Page(){...}

export const getStaticProps = async ({ params: { slug }, locale }) => {
  const res = await fetch(`${assetPrefix}/api/products/${slug}`)
  const result = await res.json()
  const data = result.filter(item => item.locale === locale)[0]
  const { title, keywords, description } = data
  return {
    props: {
      data,
      description,
      keywords, 
      title
    }
  }
}

export const getStaticPaths = async () => {
  const res = await fetch(`${assetPrefix}/api/products`)
  const result = await res.json()
  const paths = result.map(({ slug, locale }) => ({ params: { slug: slug }, locale }))
  return {
    fallback: true,
    paths,
  }
}

next.config.js

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  assetPrefix: isProd ? 'https://main-website-next.vercel.app' : 'http://localhost:3000',
  i18n: {
    localeDetection: false,
    locales: ['en', 'th'],
    defaultLocale: 'en',
  }
}

API routes

// pages/api/products/index.js
import data from '../../../data/products'
export default (req, res) => {
  res.status(200).json(data)
}

// pages/api/products/[slug].js
import db from '../../../data/products'
export default ({ query: { slug } }, res) => {
  const data = db.filter(item => item.slug === slug)
  if (data.length > 0) {
    res.status(200).json(data)
  } else {
    res.status(404).json({ message: `${slug} not found` })
  }
}

// ../../../data/products (data source)
module.exports = [
  { locale: "en", slug: "google-sheets-combine-your-cashflow",
    title: "Combine your cashflow",
    keywords: ["Google Sheets","accounting"],
    description: "...",
  },
    ...
]

Second when I remove the production domain, I run npm run build but still get the error like

TypeError: Only absolute URLs are supported
    at getNodeRequestOptions (D:\zummon\Main Website\main-website-next\node_modules\node-fetch\lib\index.js:1305:9)
    at D:\zummon\Main Website\main-website-next\node_modules\node-fetch\lib\index.js:1410:19
    at new Promise (<anonymous>)
    at fetch (D:\zummon\Main Website\main-website-next\node_modules\node-fetch\lib\index.js:1407:9)
    at getStaticPaths (D:\zummon\Main Website\main-website-next\.next\server\pages\[slug].js:938:21)
    at buildStaticPaths (D:\zummon\Main Website\main-website-next\node_modules\next\dist\build\utils.js:16:86)
    at D:\zummon\Main Website\main-website-next\node_modules\next\dist\build\utils.js:26:618
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async D:\zummon\Main Website\main-website-next\node_modules\next\dist\build\tracer.js:1:1441 {
  type: 'TypeError'
}

My next.config.js after remove

const isProd = process.env.NODE_ENV === 'production'

module.exports = {      //remove
  assetPrefix: isProd ? '' : 'http://localhost:3000',
  i18n: {
    localeDetection: false,
    locales: ['en', 'th'],
    defaultLocale: 'en',
  }
}

My package.json when I npm run build script

{
  "name": "main-website-next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.0.6",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

Can you share your API routes code? Rather than calling your API routes you should use the data fetching logic directly in getStaticProps/getStaticPaths. — juliomalves
– juliomalves, Commented Feb 15, 2021 at 9:01
thank you. I've added more info in the question above, if i understand correctly, if it's not what you looking for please tell me what you need. I'm really new to next js — zummon
– zummon, Commented Feb 15, 2021 at 9:29
@juliomalves use the data fetching logic directly fetch('${assetPrefix}/api/products/${slug}') change to fetch('${assetPrefix}/data/products') or fetch(/next/server...) right? But I don't know the correct one. Also I'm only fetching data inside its project — zummon
– zummon, Commented Feb 15, 2021 at 9:55

juliomalves · Accepted Answer · 2022-02-20 17:15:43Z

29

You should not call an internal API route inside getStaticProps. Instead, you can safely use your API logic directly in getStaticProps/getStaticPaths. These only happen server-side so you can write server-side code directly.

As getStaticProps runs only on the server-side, it will never run on the client-side. It won’t even be included in the JS bundle for the browser, so you can write direct database queries without them being sent to browsers.

This means that instead of fetching an API route from getStaticProps (that itself fetches data from an external source), you can write the server-side code directly in getStaticProps.

Furthermore, your API routes are not available during build-time, as the server has not been started at that point.

Here's a small refactor of your code to address the issue.

// /pages/product/[slug]

import db from '../../../data/products'

// Remaining code..

export const getStaticProps = async ({ params: { slug }, locale }) => {
    const result = db.filter(item => item.slug === slug)
    const data = result.filter(item => item.locale === locale)[0]
    const { title, keywords, description } = data
    return {
        props: {
            data,
            description,
            keywords, 
            title
        }
    }
}

export const getStaticPaths = async () => {
    const paths = db.map(({ slug, locale }) => ({ params: { slug: slug }, locale }))
    return {
        fallback: true,
        paths,
    }
}

edited Feb 20, 2022 at 17:15

answered Feb 15, 2021 at 10:33

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

zummon Over a year ago

Thank you I now understand more, but however this time shows Error occurred prerendering page "/en/product/[slug]" - TypeError: Cannot read property 'contents' of undefined instead. but for test server is run okay

juliomalves Over a year ago

Make sure to have checks on your data to avoid accessing undefined props which trigger errors like that one.

zummon Over a year ago

Thank you a lot, this should have already fixed the error as the question I've asked. For the next error I'm facing is out of scope, also there something that I can fix myself but i don't see it yet *I thought just testing npm run dev work just fine, but it's apparently not the same when come to production build

Sushilzzz Over a year ago

@juliomalves how do I perform undefined checks ?

TimPietrusky Over a year ago

Just coming here after doing the NextJS started app and the explanation regarding "why you should not use API routes inside of getStatic*" was not enough, but your "API routes are not available during build-time, as the server has not been started at that point." is perfectly fine and makes total sense.

|

Dima Dorogonov · Accepted Answer · 2023-09-06 21:27:23Z

0

I was fetching JSON files that are located in /public folder;
To deliver these JSONs to prod first I deleted files that do fetch in getStaticPaths and getStaticProps (like /pages/[category]/[id].tsx);
Then the build passed but the app is partially not working;
Now placed these files (like /pages/[category]/[id].tsx) back and built 2d time and it worked;
I know it's a weird way, but maybe it will help anyone.

answered Sep 6, 2023 at 21:27

Dima Dorogonov

2,5931 gold badge26 silver badges26 bronze badges

Comments

Muthu Kumar · Accepted Answer · 2024-06-11 12:22:47Z

0

If you are using http url as API URL, then add this config in .env file

NODE_TLS_REJECT_UNAUTHORIZED=0

answered Jun 11, 2024 at 12:22

Muthu Kumar

4786 silver badges10 bronze badges

Collectives™ on Stack Overflow

Fetch error when building Next.js static website in production

3 Answers 3

15 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

15 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related