错误构建 NextJS 应用程序错误发生预呈现页面

Question

I want to deploy my app, but I run into an error building my project.

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.

[city].tsx looks like this

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;

NotFound.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;

Any help would be much appreciated!

Stackoverflow tells me I need to add some more text, because it's only code. But it's self explanatory... Still not enough, I'm gonna add some. Lorem, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 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

Removing the NotFound.tsx and pasting the HTML inside the [city] page solved this issue for me. But I don't know why..