錯誤構建 NextJS 應用程序錯誤發生預呈現頁面

Question

我想部署我的應用程序，但在構建項目時遇到錯誤。

info  - Loaded env from /Users/furkanulker/Desktop/Projects/dev-project/.env
info  - Skipping validation of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[    ] info  - Generating static pages (0/4)TypeError: Cannot read properties of undefined (reading 'city')
    at NotFound (/Users/furkanulker/Desktop/Projects/dev-project/.next/server/chunks/601.js:40:31)
    at Jc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:64:191)
    at Mc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:66:253)
    at Z (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:89)
    at Mc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:13)
    at Z (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:89)
    at Mc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:66:481)
    at Z (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:89)
    at Nc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:73:98)
    at Pc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:72:306)

Error occurred prerendering page "/[country]/NotFound". Read more: https://nextjs.org/docs/messages/prerender-error
furkanulker@Furkans-Air-2 dev-project % yarn build
yarn run v1.22.19
$ next build
info  - Loaded env from /Users/furkanulker/Desktop/Projects/dev-project/.env
info  - Skipping validation of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[    ] info  - Generating static pages (0/4)TypeError: Cannot read properties of undefined (reading 'city')
    at NotFound (/Users/furkanulker/Desktop/Projects/dev-project/.next/server/chunks/601.js:40:31)
    at Jc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:64:191)
    at Mc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:66:253)
    at Z (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:89)
    at Mc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:13)
    at Z (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:89)
    at Mc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:66:481)
    at Z (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:89)
    at Nc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:73:98)
    at Pc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:72:306)

Error occurred prerendering page "/[country]/NotFound". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'city')
    at NotFound (/Users/furkanulker/Desktop/Projects/dev-project/.next/server/chunks/601.js:40:31)
    at Jc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:64:191)
    at Mc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:66:253)
    at Z (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:89)
    at Mc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:13)
    at Z (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:89)
    at Mc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:66:481)
    at Z (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:89)
    at Nc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:73:98)
    at Pc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:72:306)
info  - Generating static pages (4/4)

> Build error occurred
Error: Export encountered errors on following paths:
        /[country]/NotFound
    at /Users/furkanulker/Desktop/Projects/dev-project/node_modules/next/dist/export/index.js:398:19
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/next/dist/trace/trace.js:79:20)
    at async /Users/furkanulker/Desktop/Projects/dev-project/node_modules/next/dist/build/index.js:1034:21
    at async Span.traceAsyncFn (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/next/dist/trace/trace.js:79:20)
    at async /Users/furkanulker/Desktop/Projects/dev-project/node_modules/next/dist/build/index.js:910:17
    at async Span.traceAsyncFn (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/next/dist/build/index.js:58:29)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[城市].tsx 看起來像這樣

import { useEffect, useState } from "react";
import SearchForm from "../../components/Essential/SearchForm";
import Chart from "../../components/DataVisualization/Chart";
import ResultList from "../../components/DataVisualization/ResultList";
import NotFound from "./NotFound";
import Loader from "../../components/Essential/Loader";
import { motion } from "framer-motion";

export async function getServerSideProps(ctx) {
  const { country, city } = ctx.query;
  return {
    props: {
      country,
      city,
    },
  };
}

function capitalize(str: string) {
  if(str === undefined) return '';
  let splitStr = str.toLowerCase().split(' ');
  for (var i = 0; i < splitStr.length; i++) {
      splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
  }
  return splitStr.join(' '); 
}

const City = (props) => {
  const country = props.country;
  const city = props.city;
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);
  useEffect(() => {
    setLoading(true);
    fetch(`/api/${country}/${city}`)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Error in City");
      })
      .then((data) => {
        setTimeout(() => {
          setData(data);
          setLoading(false);
        }, 1000);
      })
      .catch((error) => {
        console.log(error);
        console.log("error occured");
        setData(0);
      });
  }, []);

  return (
    <>
        <h2 className="text-3xl font-light text-center">
          <b className="font-base text-brand-green-100">Most </b>
          used Programming Languages in {capitalize(city)}.
        </h2>
      {loading ? (
        <Loader />
      ) : data !== 0 ? (
        <motion.div
          initial={{
            opacity: 0,
          }}
          animate={{
            opacity: 1,
          }}
          exit={{
            opacity: 0,
          }}
          className="container-lg mx-auto"
        >
          <div className="my-8 mt-20">
            <SearchForm />
            <span className="text-gray-400 text-xs">
              Search Results for: {capitalize(data.city)}
            </span>
            
          </div>
          <div className="w-full overflow-hidden py-8 pt-4 mx-auto">
            <ResultList data={data} />
            <Chart data={data} />
          </div>
        </motion.div>
      ) : (
        <NotFound props={props} />
      )}
    </>
  );
};

export default City;

未找到.tsx

import React from "react";
import SearchForm from "../../components/Essential/SearchForm";
function NotFound({ props }) {  
  return (
    <div className="container-lg mx-auto">
      <div className="my-8 mt-20">
        <SearchForm />
        <span className="text-xs text-gray-400">
          {props.city} is not in the database.
          <em
            className="ml-1 text-white underline cursor-pointer"
          >
          </em>
        </span>
      </div>
    </div>
  );
}

export default NotFound;

任何幫助將非常感激！

Stackoverflow 告訴我我需要添加更多文本，因為它只是代碼。 但它是不言自明的......仍然不夠，我要添加一些。 Lorem, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. 在 vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet。

Answer 1

刪除 NotFound.tsx 並在 [city] 頁面內粘貼 HTML 為我解決了這個問題。 但是不知道為什么。。