Next.js Discord

Discord Forum

failed build

Unanswered
Valentine ant posted this in #help-forum
Open in Discord
Valentine antOP
occurred prerendering page "/"
Failed to fetch data

12 Replies

Valentine antOP
$ next build
- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data
[=   ] - info Generating static pages (0/5)Error: Failed to fetch data
    at D:\web_tresh\Portfolio\.next\server\app\page.js:1112:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getData (D:\web_tresh\Portfolio\.next\server\app\page.js:1111:17)
    at async MainPage (D:\web_tresh\Portfolio\.next\server\app\page.js:1117:22)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Failed to fetch data
    at D:\web_tresh\Portfolio\.next\server\app\page.js:1112:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getData (D:\web_tresh\Portfolio\.next\server\app\page.js:1111:17)
    at async MainPage (D:\web_tresh\Portfolio\.next\server\app\page.js:1117:22)
- info Generating static pages (5/5)

> Export encountered errors on following paths:
        /page: /
import React, {useEffect, useState} from 'react';
import axios from "axios";

import BgMouseMove from "@/features/bgMouse";
import Aside from "@/widgets/aside";
import UserDescription from "@/shared/ui/user-description";
import ExperienceBox from "@/entities/experience";
import {IExperience} from "@/shared/type/experience";

import cl from "./style.module.scss"

async function getData() {
  const res = await axios.get<IExperience[]>("http://localhost:3000/api/experience")
    .catch((err) => {
      throw new Error('Failed to fetch data')
    })

  return res.data
}

const MainPage = async () => {
  const response: IExperience[] = await getData()

  return (
    <>
      <BgMouseMove/>
      <div className={cl.wrap}>
        <Aside/>
        <div className={cl.main}>
          <UserDescription/>
          <ExperienceBox data={response}/>
        </div>
      </div>
    </>
  );
};

export default MainPage;
Valentine antOP
erron on build
in yarn dev its ok
don't fetch your own route handlers in server components
@joulev don't fetch your own route handlers in server components
Valentine antOP
how can i do it then?
@Valentine ant how can i do it then?
move the logic in your route handler to the server component itself
@joulev move the logic in your route handler to the server component itself
Valentine antOP
so this is the server component
instead of
// route.ts
export async function GET() {
  const data = await getData();
  return new Response(data);
}

// page.tsx
export default async function Page() {
  const res = await fetch("http://localhost:3000/api/...");
  return ...
}

do
// page.tsx
export default async function Page() {
  const data = await getData();
  return ...
}
also please change your pfp and banner for this server
we are strict in this rule and you risk getting kicked if you keep that pfp/banner