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?

3
votes

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

1
javascriptnode.jsreactjsnext.js
maybe because of if (!user) return res.redirect("/login"); – evgeni fotia
I just tested it, got rid of the line completely, but still same problem. – GeraltDieSocke
if (!req.isAuthenticated()) return res.redirect("/login"); what about this line – evgeni fotia
Where do you see this line? – GeraltDieSocke
I found it in the tutorial. aren't you doing the same stuff as in the tutorial – evgeni fotia

1 Answers

2
votes

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