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>
);

}

Hi John, yes I do handle them this way (see edited question above for more details) : {overviewUnfold && <Link href={/${token}/overview/snapshot} passHref ><ListItems isSubItem={true} >Snapshot</ListItems></Link>} But I tried to delete them, to handle it with a router.push on a onClick props. It doesn't change anything. That's why I conclude that the problem come from the "pages" folder. Even if there is no <Link /> component in the Menu component, the error is still there (because of the files in the "pages" folder I guess) ... — Cizia
– Cizia, Commented Jul 20, 2021 at 18:43
I'm not completely sure, but I believe that this pathing: localhost:3000/aave/fundamentals/economics/[object Object] can happen if you router push "url" + someObject. Do you know anywhere else in your code where you handle redirects? If it is happening pre-render, then you have a useEffect or hanging router.push() in your code somewhere. Does your browser also redirect to the mentioned url? — John Marshall
– John Marshall, Commented Jul 20, 2021 at 19:33
I handle a redirection at two other places only, but these are basics redirection on an onClick props. I deleted them, and the bug is still there. I am almost sure it comes from a code inside Next.js. Sometimes, the error message is : GEThttp://localhost:3000/[object Object] [HTTP/1.1 404 Not Found 13ms] And there is no custom url, sometime there is ... I must do something wrong inside my code that trigger a NExtjs function. when I run npm build I have this error : Error: Export encountered errors on following paths : ALL_PATHS I'll make a minimum reproductible example. — Cizia
– Cizia, Commented Jul 21, 2021 at 3:43

Cizia · Accepted Answer · 2021-07-21 04:20:26Z

4

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 !

answered Jul 21, 2021 at 4:20

Cizia

5166 silver badges14 bronze badges

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

Comments

Sebastian Fay · Accepted Answer · 2024-08-08 15:30:09Z

1

In case anyone is experiencing this issue after migrating from CRA to Next, this was happening to me because I had a lingering <img /> that should have been a Next JS <Image />.

edited Aug 8, 2024 at 15:30

answered Aug 8, 2024 at 15:29

Sebastian Fay

113 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related