CODEWITHSUNDEEP
javascriptnode.jsreactjsnext.js
GeraltDieSocke
GeraltDieSocke

Reputation: 1618

Why do I get a 404 for half a second when clicking a next.js `Link` that just calls an API endpoint and then navigates to the correct page?

Hiho,

I followed this guide here: https://auth0.com/blog/next-js-authentication-tutorial/ (adding auth with passport to next.js)

I have one simple problem.

In my "/login" Link from next.js when I click it, I can see this error for about 200ms:

Request URL: http://localhost:3000/_next/static/development/pages/login.js Request Method: GET Status Code: 404 Not Found

Then it automatically redirects to the root of the Homepage since it is then authenticated successfully (with passport facebook).

Still I'm asking why do I see this error for a brief moment?

Here is the client Link:

{!user && (
        <Link href="/login">
          <a>Log In</a>
        </Link>
      )}

And here are the server routes:

router.get("/login", passport.authenticate("facebook"));

router.get("/callback", (req, res, next) => {
  passport.authenticate("facebook", (err, user) => {
    if (err) return next(err);
    if (!user) return res.redirect("/login");
    req.logIn(user, err => {
      if (err) return next(err);
      res.redirect("/");
    });
  })(req, res, next);
});

What is triggering this error?

My guess:

Because I use "Link" Component from next.js the app tries to find a page that's name is "Login.js" . Since it's not existent because it's just a server api it shows that error. If I'm right, how to get rid of it? Thx guys!

What have I tried so far:

I just found this in their docs: https://github.com/zeit/next.js/#disabling-file-system-routing

But that breaks the app, since it cant resolve any pages anymore. So that's not it I guess :D

Upvotes: 3

Views: 2838

Answers (2)

Daniel Nadar
Daniel Nadar

Reputation: 21

You are trying to access an external route with Link component!

As per the Next.JS official docs, they recommend using Link component and next/router (useRouter) only for navigating between pages (/pages) inside a next app. Simply use HTML <a> tag or window.location to navigate to the external link.

As /api folder is actually a server and if you try to access the routes inside it with Link or router.push(), then Next.js will try to find this paths inside the /pages folder and will result in that error in the console flashing for a micro second until it resolves to your actual API route.

https://nextjs.org/docs/api-reference/next/router

enter image description here

Upvotes: 2

GeraltDieSocke
GeraltDieSocke

Reputation: 1618

I fixed it by not using Link but instead use just <a href="/login">Login</a>

Don't know if it's the correct approach so I will not vote for this to be solved yet. Maybe someone could elaborate if this is the correct way to do this.

This is what my nav looks now:

<div>
      <Link href="/">
        <a>Thoughts!</a>
      </Link>
      {user && (
        <>
          <Link href="/share-thought">
            <a>New Thought</a>
          </Link>
          <Link href="/profile">
            <a>Profile</a>
          </Link>

            <a href="/logout">Logout</a>

        </>
      )}
      {!user && <a href="/login">Log In</a>}
    </div>

(Logout also uses no Link because I also got this problem here, also I think because there is no Logout.js in the pages folder).

Upvotes: 2

Related Questions