Next.js adding [object%20Object] at the end of url

Question

When launching my next app with "npm run dev", I have this error during the pre-render try :

GEThttp://localhost:3000/aave/fundamentals/economics/[object Object] [HTTP/1.1 404 Not Found 434ms]

The thing is that this is not dependent on this specific path. If I delete it, I still have it on another path ... Here is my pages folder : pages folder

I don't understand why Next.js doesn't fecth rightly my pages at first. And I think this is giving me a problem to build my project. This runs fine on local, even though I have this error, but everytime I try to build, I have this error : Error Export encountered errors on following paths: ALL_PATHS

This is yet a dummy project, I am not fetching any data so I don't use the getStaticProps() function, or the getStaticPath() either. Correct me if I'm wrong, but I don't think I need it yet because I am not interacting with any API. And if you think I need, I don't know in what page I should put these function as there is no "main" file.

All links between pages are handled here (but I don't think the problem is there) :

const router = useRouter();

const token = !router.query.protocoleId ? "aave" : router.query.protocoleId.toString();

const [analyticsUnfold, setAnalyticsUnfold] = useState(false);
const [overviewUnfold, setOverviewUnfold] = useState(false);
const [feUnfold, setFeUnfold] = useState(false);
const [marketUnfold, setMarketUnfold] = useState(false);
const [newsUnfold, setNewsUnfold] = useState(false);
const [sentimentUnfold, setSentimentUnfold] = useState(false);
const [feEconomicsUnfold, setFeEconomicsUnfold] = useState(false);

const analyticsUnfoldHandler = () => analyticsUnfold === false ? setAnalyticsUnfold(true) : setAnalyticsUnfold(false);
const overviewUnfoldHandler = () => overviewUnfold === false ? setOverviewUnfold(true) : setOverviewUnfold(false);
const feUnfoldHandler = () => feUnfold === false ? setFeUnfold(true) : setFeUnfold(false);
const marketUnfoldHandler = () => marketUnfold === false ? setMarketUnfold(true) : setMarketUnfold(false);
const newsUnfoldHandler = () => newsUnfold === false ? setNewsUnfold(true) : setNewsUnfold(false);
const sentimentUnfoldHandler = () => sentimentUnfold === false ? setSentimentUnfold(true) : setSentimentUnfold(false);
const feEconomicsUnfoldHandler = () => feEconomicsUnfold === false ? setFeEconomicsUnfold(true) : setFeEconomicsUnfold(false);

function redirect(path) {
    // console.log(path);
    // console.log(`/${token}/overview/${path}`);
    router.push(`/${token}/overview/snapshot`);
}

return(
    <ul className={styles.ul}>
        <ListItems onClick={analyticsUnfoldHandler} isUnfolding={true}>Analytics</ListItems>

        {analyticsUnfold && <ListItems onClick={overviewUnfoldHandler} isUnfolding={true} isSubItem={true} >Overview</ListItems>}
        {overviewUnfold && <Link href={`/${token}/overview/snapshot`} passHref ><div><ListItems isSubItem={true} >Snapshot</ListItems></div></Link>}
        {overviewUnfold && <Link href={`/${token}/overview/description`} passHref><div><ListItems isSubItem={true} >Description</ListItems></div></Link>}
        {overviewUnfold && <Link href={`/${token}/overview/estimates`} passHref><div><ListItems isSubItem={true} >Estimates</ListItems></div></Link>}
        {overviewUnfold && <Link href={`/${token}/overview/yield`} passHref><div><ListItems isSubItem={true} >Yield</ListItems></div></Link>}

        {analyticsUnfold && <ListItems onClick={feUnfoldHandler} isUnfolding={true} isSubItem={true} >Fundamentals Economics</ListItems>}
        {feUnfold && <ListItems onClick={feEconomicsUnfoldHandler} isUnfolding={true} isSubItem={true} >Economics</ListItems>}
        {feEconomicsUnfold && <Link href={`/${token}/fundamentals/economics/marketdesign`} passHref><div><ListItems isSubItem={true} >Market Design</ListItems></div></Link>}
        {feEconomicsUnfold && <Link href={`/${token}/fundamentals/economics/mechanismdesign`} passHref><div><ListItems isSubItem={true} >Mechanism Design</ListItems></div></Link>}
        {feEconomicsUnfold && <Link href={`/${token}/fundamentals/economics/tokendesign`} passHref><div><ListItems isSubItem={true} >Token Design</ListItems></div></Link>}
        {feUnfold && <Link href={`/${token}/fundamentals/fundamental`} passHref ><div><ListItems isSubItem={true} >Fundamental</ListItems></div></Link>}
        {feUnfold && <Link href={`/${token}/fundamentals/transactionnal`} passHref><div><ListItems isSubItem={true} >Transactionnal</ListItems></div></Link>}

        {analyticsUnfold && <ListItems onClick={marketUnfoldHandler} isUnfolding={true} isSubItem={true} >Markets</ListItems>}
        {marketUnfold && <Link href={`/${token}/markets/price`} passHref><div><ListItems isSubItem={true} >Price</ListItems></div></Link>}
        {marketUnfold && <Link href={`/${token}/markets/financialproducts`} passHref><div><ListItems isSubItem={true} >Financial Products</ListItems></div></Link>}
        {marketUnfold && <Link href={`/${token}/markets/fundflow`} passHref><div><ListItems isSubItem={true} >Fund Flow</ListItems></div></Link>}

        {analyticsUnfold && <ListItems onClick={newsUnfoldHandler} isUnfolding={true} isSubItem={true} >Latest News</ListItems>}
        {newsUnfold && <Link href={`/${token}/latestnews/newsevents`} passHref><div><ListItems isSubItem={true} >News and Events</ListItems></div></Link>}

        {analyticsUnfold && <ListItems onClick={sentimentUnfoldHandler} isUnfolding={true} isSubItem={true} >Sentiment</ListItems>}
        {sentimentUnfold && <Link href={`/${token}/sentiment/marketsentiment`} passHref><div><ListItems isSubItem={true} >Market Sentiment</ListItems></div></Link>}
        {sentimentUnfold && <Link href={`/${token}/sentiment/webscraping`} passHref><div><ListItems isSubItem={true} >Web Scraping</ListItems></div></Link>}
        {sentimentUnfold && <Link href={`/${token}/sentiment/webtracking`} passHref><div><ListItems isSubItem={true} >Web Tracking</ListItems></div></Link>}

    </ul>
);

}

Answer 1

All right guys, I found the problem ! In my _app.js I was inserting a link tag, I wanted to add a favicon to my tab ... And it was added at the end of every link of the page :

function MyApp({ Component, pageProps }) {
  return (
    <AppLayout>
      <Head>
        <title>Econteric</title>
        {/* <link rel="icon" href={logo} /> */} // THIS WAS THE PROBLEM
      </Head>
      <Component {...pageProps} />
    </AppLayout>
  );
}
export default MyApp;

Thank you so much for your help, I found the bug while trying to build the minimum reproductible project. Thank you so so much, it work now !